无法使用 React Spring 为 THREE.js 属性设置动画答案

【问题标题】：Unable to animate THREE.js property using React Spring无法使用 React Spring 为 THREE.js 属性设置动画
【发布时间】：2020-11-02 23:23:15
【问题描述】：

我想让 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>
  );
}

我正在使用 react-three-fiber，它是 Three.js 的反应协调器。

【问题讨论】：

标签： javascript reactjs three.js react-spring react-three-fiber

【解决方案1】：

args 用于构造函数参数。如果更改 arg，对象将重新实例化，如：<foo args={[123]} /> 与 new Foo(123) 相同。动画构建 60fps 的东西是不行的，而且 react-spring 也不可能。在实践中，你应该找到尽快改变事物的方法，如果你能摆脱它的动画规模，或者制作一个你的制服动画的环形着色器。

【讨论】：

那么可能的解决方案是什么？