Невозможно анимировать свойство THREE. js с помощью React Spring - PullRequest
Новая
       151

Невозможно анимировать свойство THREE. js с помощью React Spring

0 голосов
/ 13 июля 2020

Я хотел бы, чтобы React Spring анимировал свойство материала в Three. js.

Однако при попытке сделать это я получаю сообщение об ошибке: 

THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.

Вот мой код, я пытаюсь оживить props.theta от 6.3 до 1.3: 

import React, { useRef, useState, useEffect } from 'react';
import { useFrame } from 'react-three-fiber';
import { useSpring, a } from 'react-spring/three';

function RingBuffer() {
  const ringBuffer = useRef();

  const props = useSpring({
    to: async (next, cancel) => {
      await next({ theta: 1.3 });
    },
    from: { theta: 6.3 },
  });

  useFrame(() => {
    ringBuffer.current.rotation.z += 0.03;
  });

  return (
    <a.mesh ref={ringBuffer}>
      <a.ringBufferGeometry attach="geometry" args={[1, 2, 30, 30, 0, props.theta]} />
      <meshLambertMaterial attach="material" wireframe={true} color={'#4FFF9C'} />
    </a.mesh>
  );
}

Я использую response-three-fiber, который является согласователем реакции для Three. js.

1 Ответ

1 голос
/ 15 июля 2020

args - для аргументов конструктора. если вы измените аргумент, объект будет повторно создан, например: <foo args={[123]} /> совпадает с new Foo(123). анимация чего-то, что создает 60 кадров в секунду, не может быть go, и это также невозможно с помощью react-spring. на практике вы должны найти способы как можно быстрее видоизменить вещи, если вам это удастся, анимировать масштаб или создать кольцевой шейдер, формы которого вы анимируете.

...