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

2 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
1 Like