如何使用 React 和 Three.js 动态更改网格颜色

Question

我知道这是一个微不足道的问题，但我向你保证我已经尝试解决这个问题几个小时了。 color 属性是一个字符串（例如 '#f56d3d'），它应该更改网格材质颜色。我正在使用 useEffect 来初始化场景，并尝试使用另一个来更改颜色。

function Scene({ color, shape }) {
  const cubeRef = useRef(null);

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  const renderer = new THREE.WebGLRenderer({ alpha: true });
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color });
  const cube = new THREE.Mesh(geometry, material);

  const animate = () => {
    requestAnimationFrame(animate);
    cube.material.color.setStyle(color);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  };

  useEffect(() => {
    renderer.setSize(window.innerWidth,  window.innerHeight);
    cubeRef.current.appendChild(renderer.domElement);
    scene.add(cube);
    camera.position.z = 5;

    animate();
  },[]);

  return (
    <div ref={cubeRef}>
    </div>
  )
}

export default Scene

我想到的是一种让渲染器知道场景内的立方体已更改的方法。 到目前为止我尝试过的是：

• cube.material.needsUpdate = true;
• renderer.render(scene, camera);
• cube.material = new 三。 MeshBasicMaterial({ 颜色 }); 所有这些都在 useEffect 中，以“color”为 dep。

谢谢

Answer 1

如果您不介意创建一个新对象，那么您可以重新排列 useEffect 中的变量，如下所示：

  const cubeRef = useRef(null);
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  const renderer = new THREE.WebGLRenderer({ alpha: true });
  const geometry = new THREE.BoxGeometry();
  let cube, material;
  
  const animate = () => {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  };

  useEffect(() => {
    material = new THREE.MeshBasicMaterial({color});
    cube = new THREE.Mesh(geometry, material);
    renderer.setSize(window.innerWidth,  window.innerHeight);
    cubeRef.current.innerHTML = '';
    cubeRef.current.appendChild(renderer.domElement);
    scene.add(cube);
    camera.position.z = 5;
    animate();
  }, [color])

此外，您可能需要将先前的定位或旋转保存在某处。