How to add a shooting star to the scene?

Questions
1

Hi Friends,

can anyone give me a hint on how to add a shooting star to a three.js scene? I have a sky component in my scene and I would like to add some shooting stars from time to time.

At the moment I dont have any idea on how to do that.

Thanks a lot for answers! :smiley:

2

Please share more detail of what you’ve tried, and what you’re hoping to do. I’m not sure what a sky component is… Are you asking about React Three Fiber? There is a dedicated R3F Discord that may have more people familiar with the component you’re using.

But my guess would be that animated shooting stars means creating some objects, giving them an emissive material, and animating them. There are tutorials and examples for all of these things, so you may get better help by getting started and sharing your progress (with code or a demo) when you get stuck.

1 Like
3

if @donmccurdy guessed right and you’re dealing with react it couldn’t be any easier, drei has trails

mix this with vfx composer and you can have particles, too VFX Composer Examples

4 Likes
4

The syntax for adding objects to a scene is scene.add( object ).

5

Thanks a lot for your answers! :slight_smile:

Yes I use React Three Fiber

Thats exactly what I was looking for, thanks a lot!

Wow great example!

Can we also use this syntax within react three fiber?

6

bar is added to foo.

<foo>
  <bar />

bar is conditional and will be unmounted if condition switches to false

<foo>
  {condition && <bar />}

there is no imperative add/remove in the fp/declarative world.

7

Puhh… I always struggled to understand “foo” and I also dont know “bar”…

Could you give me a hint, what is the use case of “foo” and “bar” ? :grimacing:

Thanks again for your help!

8 
<mesh name="that">
  <mesh name="this">

this will be a child of that. you don’t call that.add(this), nor do you call that.remove(this), you remove “this” by taking the node out conditionally.

1 Like
9
2 Likes
10

Hey @drcmda this Shooting Star example is amazing! I just wanted to know how the colors work ? seems like the fact that it glows related to the set of colors you need to pick however I see docs from THREE that it only takes rgb from 1-0 and your example uses values grater than 5

11

There is no such general limit — though I see the THREE.Color documentation is incorrect about this, and will need to be updated.

In some contexts where you might use a Color instance, values outside 0–1 would not be valid. For example, MeshStandardMaterial#color represents something more like a reflected fraction of incoming diffuse light, and values >1 do not make sense. But MeshBasicMaterial#color is not so limited, and many RGB color values throughout the internal rendering process will exceed 1.

For more on this see the color management docs, particularly as related to the “open domain” working color space.

3 Likes
12

Thanks a lot for explanation @donmccurdy! This makes sense! I will look into the Color management docs to see how can I achieve the neon sky blue color that I am looking for the shooting star example! Thank you once again!

1 Like
13

Proposed rewording in the docs here:

1 Like