"RectAreaLightHelper" Not Moving in React-three-fiber

Admin 1
Viewed 468

Briefing: It seems that all of the other light helpers work by showing me the position and rotation on the screen. I understand the rectAreaLight only works on specific materials and is now located in the "three/examples" folder. I'm calling it with the "useHelper" function and that it doesn't move when I change the position arguments.

Codepen: simple scene

Code Description: "moon.gltf" model, a background, rectAreaLight, Helper, boilerplate. RectAreaLightHelper is stuck as position [0,0,0].

Troubleshooting: I'm using the "react-three-gui" library, upon removing the features, the "RectLightHelper" still doesn't move in the scene.

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

QUESTION: How do I set up the "RectAreaLightHelper" properly within a "react-three-fiber" scene?

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

Any info or help would be appreciated.

react-three-fiber three.js reactjs lighting javascript
1 Answers

Answer

It seems to work when I fall back onto THREE syntax. You can then put <RectArealightWithHelper> on your <Canvas> as you would any other component in @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

Besides the useThree hook, all of this is taken straight from one of the examples on threejs.org: https://threejs.org/examples/#webgl_lights_rectarealight.

See comment in the Codesandbox for research and bug report.

user_169678910
Related