dat.gui in three.js not applying changes

Question

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.

Answer 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.