[React Three Fiber] Move camera based on MouseOver interaction

Questions
, ,
1

Hello everyone! I’m re-creating a tunnel with react-threefiber using the code from this tutorial in vanilla Three.js.

I am stuck to implement the user interaction: the shape of the tube moves according to the mouse movement. I am using THREE.Vector2 to get the mouse’s position + useFrame to move the camera.

any help would be greatly appreciated!!

2

mouse is part of the state

useFrame(state => {
  // state.mouse.x
  // state.mouse.y

x and y are already normalized. 0 is center, -1 left/top, 1 right/bottom

3

thanks a lot @drcmda :slight_smile: I am now trying to do the interaction with camera and mouse.state taken from useFrame and it works for the camera movement, but for some reason it doesn’t work for updating the curve’s points: when I console.log the values, I see that the points are not updating.

I guess it has to do with verticesNeedUpdate but I don’t manage to set it…

4

that it pure threejs now, i don’t know if you have to update the vertex buffers directly and then call verticesNeedsUpdate=true or something like that. don’t know what tube does internally or how it can be altered afterwards.