reactjs - 如何随时间改变 JSX 属性

Question

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

score 2 · Accepted Answer

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>
    );
}

reactjs - 如何随时间改变 JSX 属性

1 回答 1

Related

Reference