React Three Fiber - rotate GLB model on scroll

Questions
, , ,
1

Hi, I have managed to load my GLB model in a starter template but would like to rotate the car on scroll event (spin depending on scroll position). Would appreciate tips/suggestions for how to implement this (I’ve read through docs and examples but wondering if there is a more simple approach).

2

just tie scroll to group.rotation. drei has a really useful component for that, scrollcontrols

and a smaller example, it’s not a rotation but in the end it’s all just value interpolation

3

Thanks, yes I had seen the examples. Here is my code so far, does anyone know how to have the car rotate on y axis (spin slowly as user scrolls)? I can’t seem to get it working. Also, would it be better to use react-spring (useScroll event) for this instead of useEffect? Thanks

4 
export default function App() {
  return (
    <Canvas>
      <ScrollControls pages={3}>        
        <Model scale={0.005} />
      </ScrollControls>
    </Canvas>
  )
}

function Model(props) {
  const scroll = useScroll()
  const { scene } = useGLTF(url)
  useFrame(() => (scene.rotation.y = scroll.offset * Math.PI))
  return <primitive object={scene} {...props} />
}

scroll.offset is normalized between 0 (start) and 1 (end), multiply it with any value you like. PI * 2 for instance would be a full rotation.

if you want the model to turn around its own point of mass you better center it first in blender, it’s uncentered.

1 Like
5

Thank you so much, it means more than you know. May I also ask: is there a common way to make the GLB model/canvas responsive? The text is overlapping and car is too big on smaller browser width.

Also, is there a best practice for applying different styles on mobile? E.g. detect mobile device and set the “top” style of text elements lower (so they are below the car) if isMobile state. Thanks!

6

It’s responsive ootb, you have useThree(state =>state.viewport) for instance, and otherwise you can get isMobile through media queries in javascript