2

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

Codepen： 简单的场景

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

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

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

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

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

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

4

1 回答 1

0

回答

当我回到三种语法时，它似乎起作用了。然后 <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;
}

密码沙盒

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

有关研究和错误报告，请参阅 Codesandbox 中的评论。

于 2021-09-22T13:28:57.987 回答