2

I am learning three.js. But when I try to use the dat.gui library, no change is applied to the light. I have given the codes in the link.

   gui.add(spotLight, 'penumbra', 0, 1).step(0.01);
    gui.add(spotLight, 'intensity', 0, 10).step(1);
    gui.add(spotLight, 'distance', 0, 10).step(1);
    gui.add(spotLight, 'decay', 0, 10).step(1);
    gui.add(spotLight, 'power', 0, 10).step(1);
    gui.add(spotLight.position, 'x', 0, 10).step(1);
    gui.add(spotLight.position, 'y', 0, 10).step(1);
    gui.add(spotLight.position, 'z', 0, 10).step(1);

Jsfiddle

I created spotlight and tried to change the properties of this spotlight in real time with gui but it didn't work.

Coderowsky
  • 21
  • 1

1 Answers1

1

You are rendering the scene just once so changing the light won't be visible on the canvas. This issue can be solved in two ways:

  • Use an animation loop.
  • Use the onChange() callback of dat.gui and call the render() method.

I've updated your fiddle with the second approach: https://jsfiddle.net/ertpdgvn/

BTW: dat.gui is not used by three.js anymore. The project uses lil-gui now which has a similar API.

Mugen87
  • 28,829
  • 4
  • 27
  • 50