1

我正在使用 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>
  );
};
4

1 回答 1

2

react-three-fiber登陆页面有一个代码演示,演示了如何为对象设置动画。该函数是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>
    );
}
于 2020-08-20T21:51:20.840 回答