Trouble with React Spring animations on Blender Model

Questions
,
1

Need some help for react spring animations on a blender model
As in the video, I want the chair to spin on its axis but its rotating around the origin of my blender scene (I am not sure). The chair is part of a scene (not in the clip). I don’t want to change its position to the origin. How to solve this issue?

export default function ChairModel({ ...props }) {
  const group = useRef();
  const [active, setActive] = useState(false);

  const { rotation } = useSpring({
    rotation: active ? 0 : Math.PI * 2,
    config : {mass: 1, tension: 170, friction: 80},
  });

  const { nodes, materials } = useGLTF('/chairModel.glb')
  useFrame(({ clock }) => {
    const a = clock.getElapsedTime()
    group.current.rotation.x = 0
  });

  return (
      <group ref={group} {...props} dispose={null}>
      <animated.mesh rotation-y={rotation} onClick={() => setActive(!active)}>
        <mesh geometry={nodes.chair.geometry} material={nodes.chair.material} position={[0.3, 0.24, -0.13]} rotation={[0, -1.36, 0]} />
      </animated.mesh>
      </group>
  )
}
2

blender > select object > menu:object > set origin > origin to center of mass

4

It’s kinda my job. Vercel pays me for it. :smile:

1 Like
5

Hi,
I tried this method but it didn’t seem to work. I tried both center of mass with volume and surface.
result is the same