@cedFlame

Анимация в three fiber зациклилась, что мне сделать, чтобы она проигрывалась один раз?

Я сделал модель в блендере, а так же анимацию к ней, по клику на модель должна воспроизводится анимация, всё работает но анимация воспроизводится бесконечно, как это исправить?
export function Model(props) {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/cube.glb')
  const { actions } = useAnimations(animations, group)
  let k = 0
  const open = () => {
      actions.a?.play()
      actions.b?.play()
      actions.c?.play()
      actions.d?.play()
      actions.e?.play()
      actions.f?.play()
      actions.g?.play()
      actions.h?.play()
      actions.i?.play()
      actions.j?.play()

    }

  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <mesh onClick={open} name="a" geometry={nodes.a.geometry} material={materials.a} position={[-16.68, 10.91, 1.38]} rotation={[-0.21, 0.81, 0.26]} />
        <mesh name="b" geometry={nodes.b.geometry} material={materials.b} position={[-16.76, 10.56, -0.04]} rotation={[1.57, 0.17, 2.31]} scale={[0.6, 1, 1]} />
        <mesh name="c" geometry={nodes.c.geometry} material={materials.c} position={[-15.24, 10.85, 1.28]} rotation={[1.57, 0.19, -2.4]} scale={[0.6, 1, 1]} />
        <mesh name="d" geometry={nodes.d.geometry} material={materials.d} position={[-18.01, 10.34, 1.56]} rotation={[1.54, 0.17, 0.74]} scale={[0.6, 1, 1]} />
        <mesh name="e" geometry={nodes.e.geometry} material={materials.e} position={[-16.49, 10.64, 2.8]} rotation={[1.54, 0.2, -0.82]} scale={[0.6, 1, 1]} />
        <mesh name="f" geometry={nodes.f.geometry} material={materials.f} position={[-16.77, 10.6, 1.44]} rotation={[1.57, 0.17, -0.83]} scale={[0.05, 0.32, 0.32]} />
        <mesh name="g" geometry={nodes.g.geometry} material={materials.g} position={[-16.74, 10.58, 1.48]} rotation={[1.57, 0.17, -0.83]} scale={[0.07, 0.32, 0.32]} />
        <mesh name="h" geometry={nodes.h.geometry} material={materials.h} position={[-16.75, 10.58, 1.49]} rotation={[1.57, 0.17, -0.83]} scale={[0.03, 0.32, 0.32]} />
        <mesh name="i" geometry={nodes.i.geometry} material={materials.i} position={[-16.66, 10.62, 1.49]} rotation={[1.57, 0.17, -0.83]} scale={[0.02, 0.32, 0.32]} />
        <mesh name="j" geometry={nodes.j.geometry} material={materials.j} position={[-16.65, 10.64, 1.38]} rotation={[1.57, 0.17, -0.83]} scale={[0.02, 0.32, 0.32]} />
      </group>
    </group>
  )
}

useGLTF.preload('/cube.glb')

вот App
function App() {

  return (
      <Canvas dpr={[1,3]} style={{"position":'absolute'}}>
              <Stage shadows={null} environment={'dawn'} >
                  <Suspense fallback={null} >
                      <Model scale={0.001} />
                  </Suspense>
              </Stage>
      </Canvas>
  );
}
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ответы на вопрос 1
@SamRadik
Для того, чтобы анимация воспроизводилась только один раз, вы можете использовать метод setLoop() из библиотеки three.js, чтобы установить количество повторений анимации. В вашем коде можно добавить этот метод к каждому действию, передав значение "Once" в качестве параметра:

const { actions } = useAnimations(animations, group)
actions.a?.setLoop("Once")
actions.b?.setLoop("Once")
// добавьте для каждого действия


Это установит повторение анимации только один раз при каждом ее воспроизведении.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы