Как изменить атрибут JSX с течением времени

Question

Я работаю над Threejs с React Three Fiber. Нужна помощь с использованием функции, которая изменяет атрибут 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>
  );
};

Answer 1

Целевая страница 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>
    );
}