小编ib9*_*b95的帖子

我是 R3F 和 Three.js 的新手，我很难将时间值作为简单着色器的变量。

我有一个 GLSL 着色器作为 JavaScript 文件，我想使用统一的 u_time 更新时间值

我试图在我的 React 组件中使用 THREE.Clock 传递时间变量。当我在 useEffect 挂钩内 console.log 计时器时，我将时间控制台记录为舍入值，因为着色器需要它。但是我不确定如何返回这个值以在我的着色器中使用，作为 u_time 值。我的 useEffect 挂钩中是否缺少某些内容？

反应组件代码

import React, { useRef, useEffect, useState } from "react";
import { Canvas, useThree, useFrame } from "@react-three/fiber";
import { vertexShader, fragmentShader } from '../Shaders/Shader';

    const ShaderPlane = (props) => {
        const [value, setValue] = useState(0);
        const mesh = useRef()
        const time = new THREE.Clock();
    
      useEffect(() => setInterval(() => setValue(time.getElapsedTime().toFixed(1)), 1000), []);
      console.log(value)
        
        return ( …