Prompt Title: Очистка контекста канваса.

Проблема может быть в том, что при клонировании сцены все ссылки на анимации сохраняются на старую сцену, а не на новую, что может приводить к конфликтам.

Вместо того, чтобы клонировать сцену и дублировать все анимации, я бы порекомендовал использовать useMemo для сохранения анимаций и сцены в отдельных переменных, чтобы они не пересоздавались каждый раз при рендеринге компонента. Затем можно использовать эти переменные для создания новых экземпляров объектов, когда это необходимо.

Вот примерный код:

jsxCopy code
const GltfAnimationItem: React.FC<TProps> = ({ name }) => {
  const model = name === 'BasicShape1' ? BasicShape1 : BasicShape2
  const { animations, scene } = useGLTF(model)
  const { mixer } = useAnimations(animations, scene)

  // Сохраняем сцену и анимации с помощью useMemo
  const clonedScene = useMemo(() => {
    const clone = scene.clone()
    clone.traverse((obj) => {
      if (obj.isMesh) {
        obj.geometry = obj.geometry.clone()
        obj.material = obj.material.clone()
      }
    })
    return clone
  }, [scene])

  const clonedAnimations = useMemo(() => animations.map((clip) => {
    const action = mixer.clipAction(clip, clonedScene)
    action.play()
    return action
  }), [animations, mixer, clonedScene])

  return (
    <scene>
      <primitive object={clonedScene} rotation-y={0.3} />
    </scene>
  )
}

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