Блог

Я работаю над 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>
  );
};
  

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