如何解决如何随时间更改JSX属性
我正在使用React Three Fiber开发Threejs。 希望使用使用计数器或其他功能更改JSX属性的函数获得帮助。 只要用户停留在页面上,强度属性就会随着时间的推移而变化。最大值(在这种情况下为1,最小值为0)
到目前为止,这是我的代码。
import React from "react";
// import { random } from 'lodash';
export default () => {
const FakeSphere = () => {
return (
<mesh>
<sphereBufferGeometry args={[0.7,30,30]} attach="geometry" />
<meshBasicMaterial color={0xfff1ef} attach="material" />
</mesh>
);
};
return (
<group>
<FakeSphere />
<ambientLight intensity={0.3} /> // Want to change this value
<pointLight intensity={0.7} position={[0,5,0]} />
</group>
);
};
解决方法
反应三纤维landing page has a code demo,演示如何为对象设置动画。该函数为useFrame()
,它传递一个带有clock
对象的参数,您可以使用该参数来跟踪经过的时间。例如:
const FakeSphere = () => {
// This reference will give us direct access to the mesh
const mesh = useRef();
useFrame((t) => {
// Here we use a sine wave to move between y: [-1,1]
mesh.current.position.y = Math.sin(t.clock.elapsedTime);
});
return (
<mesh
{...props}
ref={mesh}
/* ... */>
</mesh>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。