[React Three Fiber] Particles moving towards viewer

Questions
, ,
1

Hello everyone!

I’m learning React-Three-Fiber, and I want to make a tunnel with particles that go out of it, going towards the viewer.

I’m using this threejs code as a reference: https://github.com/Mamboleoo/InfiniteTubes/blob/a3b831b6c95bed4d803dfeed8b66ec76de333996/js/demo2.js

here is the live demo of what i want to make (from the threejs code): https://tympanus.net/Development/InfiniteTubes/index2.html

I’ve already managed to make the tunnel, but I’m stuck on the particles:

  • I’ve managed to make one mesh that comes out of the tunnel and comes towards the viewer, but the movement is really staggered and I’m wondering how I could make it smoother
  • I’m struggling to make a group of particles: I can’t make a separate component because the particles’ position are based on data from the tunnel.

here is my sandbox: https://codesandbox.io/s/tube-particle-animation-hd3ii?file=/src/objects/App.tsx

any help would be greatly appreciated!

2

you cannot call setState inside a loop - it just creates an infinite loop. useFrame subscribes the component to the renderloop, which executes 60 times per second. just like in plain threejs, calculate stuff and mutate the model in there. see: https://github.com/pmndrs/react-three-fiber/blob/5ba828ffcc67d446163dacf429096eef8b59a3aa/markdown/pitfalls.md#react-performance-pitfalls-️-

i really don’t understand why you make it so complicated, for instance you go

const [burst, setBurst] = useState(0)

...
setBurst(whatever +1 )

But why? SetState is for reactive data, its purpose is to re-render the component. In your code burst is treated like a common variable, so why not just plain javascript:

let burst = 0
useFrame(() => {
  burst = whatever + 1
  ...
})

I think you’re struggling with more basic concepts here, reactivity mostly, and maybe this isn’t the right place to look for input. Don’t know if it’s OK to recommend https://pmnd.rs/discord where r3f is being made, but the community here is probably relieved not having to see React stuff all day so it can focus on threejs and webgl.

3

thank you once again @drcmda!

I’ve worked on my sandbox, and there are 2 main things I don’t understand, and I would be super grateful if you could expand a bit on it!

1/ On the useFrame for the mesh particle movement, I’m using the exact same values as in the threejs example, and I get the movement direction right, but it the movement looks really staggered and I’m wondering why…

planePos = curve.getPoint(1 - (percent % 1)).add(offset)

  particle.current.position.x = planePos.x
  particle.current.position.y = planePos.y
  particle.current.position.z = planePos.z

2/ to update the tube’s curve value based on the mouse’s mouvement, I get really weird results by using normal variables and changing the mesh ref itself… using updates on state inside the useFrame() work well though - I know it’s bad practice so I’m wondering why…

→ particle-in-tunnel - CodeSandbox

thanks a lot!