#reactjs #three.js #react-three-fiber
#reactjs #three.js #реагировать-трехволокно
Вопрос:
Я работаю над 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>
);
};
Комментарии:
1. Я не знаю, как написать функцию, которая столько раз появляется на странице. Динамически изменяет значение с 0.0 на 1.0. медленно увеличивается, затем возвращается. Благодаря этому я смог бы повторно использовать его во многих других элементах моего проекта: (пожалуйста, помогите
Ответ №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>
);
}
Комментарии:
1. Я попробую. Если nice даст вам правильный ответ, спасибо
2. Часть {…props} не сработала должным образом. Возможно, я делаю что-то неправильно. О useFrame и useRef я вроде понимаю, как это делается
3. Вам не нужно включать props, если вы его не используете. Я просто копировал демонстрацию на целевой странице. Пожалуйста, не стесняйтесь модифицировать мой пример кода в соответствии с вашими потребностями.