带有 react-spring 动画的 React-three-fiber

Question

抱歉，如果这看起来是一个明显的答案，但我正在尝试创建类似于 this. I am trying to create one similar with react-three-fiber but I can't use the ones shown in the docs since they manipulate the style transform property which isn't possible with three.js. I have tried to manipulate it through the position attribute and props but it comes with an error as shown here 的动画，但我真的不知道从哪里开始解决这个问题。这是我的代码：

const props = useSpring({
    to: async next => {
      await next({ position: [100, 100, 100] });
      await next({ position: [50, 50, 50] });
    },
    from: { position: [100, 100, 100] },
    config: { duration: 3500 },
    reset: true
  });

 return (
    <Canvas>

      <a.group {...props}>
        <Box position={[-1.2, 0, 0]} />
        <Box position={[1.2, 0, 0]} />
      </a.group>
    </Canvas>

)

我已经成功地使用了 react-spring 悬停和缩放，但它在使用位置时不起作用。

Answer 1

我认为类似的事情最好用三角函数来完成

const ref = useRef()
useFrame(() => {
  ref.current.position.y = Math.sin(state.clock.getElapsedTime()) * 10
})
return <group ref={ref}> ...

Math.sin 将产生 -1 到 1 之间的值，并在两者之间平滑交替。乘以你的因素（距离），你就有了。这是一个像这样移动相机的例子：https://codesandbox.io/s/r3f-lod-e9vpx

否则就是react-spring/three，不反应-spring：https://codesandbox.io/s/clever-bartik-tkql8

带有 react-spring 动画的 React-three-fiber

React-three-fiber with react-spring animations

three.js

reactjs

react-spring

react-three-fiber