React-Three-Fiber с анимацией реактивной пружины - PullRequest
Новая
       72

React-Three-Fiber с анимацией реактивной пружины

1 голос
/ 29 апреля 2020

извините, если это кажется очевидным ответом, но я пытаюсь создать анимацию, похожую на this . Я пытаюсь создать аналог с помощью реагирующего с тремя волокнами, но я не могу использовать те, которые показаны в документах, поскольку они манипулируют свойством преобразования стиля, что невозможно с тремя. js. Я пытался манипулировать им с помощью атрибута позиции и реквизита, но он приходит с ошибкой, как показано здесь , и я не знаю, с чего начать, чтобы это исправить. Вот мой код: 

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>

)

Я успешно использовал реагирующую пружину с зависанием и масштабированием, но она просто не работает при использовании положения.

1 Ответ

2 голосов
/ 30 апреля 2020

Я думаю, что-то подобное лучше всего сделать с помощью тригонометрии. 

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

в противном случае это реагирующая пружина / три, а не реагирующая пружина: https://codesandbox.io/s/clever-bartik-tkql8

...