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

Question

[cedFlame]

Я сделал модель в блендере, а так же анимацию к ней, по клику на модель должна воспроизводится анимация, всё работает но анимация воспроизводится бесконечно, как это исправить?

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>
  );
}

Answer 1

[SamRadik]

Для того, чтобы анимация воспроизводилась только один раз, вы можете использовать метод setLoop() из библиотеки three.js, чтобы установить количество повторений анимации. В вашем коде можно добавить этот метод к каждому действию, передав значение "Once" в качестве параметра:

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

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