无法使用 React Spring 制作动画 THREE.js 属性
Unable to animate THREE.js property using React Spring
我想让 React Spring 为 Three.js 中的 material 的 属性 设置动画。
但是,当我尝试这样做时出现错误:
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 的反应调节器。
args 用于构造函数参数。如果更改 arg,对象将重新实例化,如:<foo args={[123]} />
与 new Foo(123)
相同。为构建 60fps 的东西制作动画是不行的,而且使用 react-spring 也是不可能的。在实践中你应该找到尽可能快地改变事物的方法,如果你可以摆脱它动画比例,或者制作一个环形着色器,你可以动画制服。
我想让 React Spring 为 Three.js 中的 material 的 属性 设置动画。
但是,当我尝试这样做时出现错误:
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 的反应调节器。
args 用于构造函数参数。如果更改 arg,对象将重新实例化,如:<foo args={[123]} />
与 new Foo(123)
相同。为构建 60fps 的东西制作动画是不行的,而且使用 react-spring 也是不可能的。在实践中你应该找到尽可能快地改变事物的方法,如果你可以摆脱它动画比例,或者制作一个环形着色器,你可以动画制服。