【问题标题】："RectAreaLightHelper" Not Moving in React-three-fiber“RectAreaLightHelper”在 React-three-fiber 中不动
【发布时间】：2021-03-09 20:58:53
【问题描述】：

简介： 似乎所有其他灯光助手都是通过向我显示屏幕上的位置和旋转来工作的。我了解 rectAreaLight 仅适用于特定材料，现在位于“三个/示例”文件夹中。我用“useHelper”函数调用它，当我改变位置参数时它不会移动。

Codepen： simple scene

代码说明：“moon.gltf”模型、背景、rectAreaLight、Helper、样板。 RectAreaLightHelper 卡在位置 [0,0,0]。

疑难解答： 我正在使用“react-three-gui”库，删除功能后，“RectLightHelper”仍然不会在场景中移动。

==========================================

问题：如何在“react-three-fiber”场景中正确设置“RectAreaLightHelper”？

==========================================

任何信息或帮助将不胜感激。

【问题讨论】：

嗨，你能解决这个问题吗？我有同样的问题。谢谢！

标签： javascript reactjs three.js lighting react-three-fiber

【解决方案1】：

回答

当我回到三种语法时，它似乎起作用了。然后，您可以将 <RectArealightWithHelper> 放在 <Canvas> 上，就像在 @react-three/fiber 中的任何其他组件一样。

const RectArealightWithHelper = () => {

  const { scene } = useThree();

  RectAreaLightUniformsLib.init();

  const rectLight = new THREE.RectAreaLight("red", 5, 4, 10);

  rectLight.position.set([-5, 5, 5);
  scene.add(rectLight);
  scene.add(new RectAreaLightHelper(rectLight));

  return null;
}

Codesandbox

除了 useThree 钩子，所有这些都直接取自其中一个 threejs.org 上的示例：https://threejs.org/examples/#webgl_lights_rectarealight.

请参阅 Codesandbox 中的评论以进行研究和错误报告。

【讨论】：