在运行时添加和删除Three.js灯光

Question

如何在three.js中运行时添加和删除不同类型的光源？

我有一些复选框，每个表示一种光源类型，当复选框被选中时，我想向场景中添加特定的光源类型，并在取消选中时将光源删除。

我尝试了：scene.remove(light)和light.visible = false，但都没有起作用。

- Miloud Eloumri

Answer 1

使用 WebGLRenderer，如果你改变灯光的数量或类型，则需要设置 material.needsUpdate = true。

更好的选择是将灯光强度设置为零。

有关更多信息，请参见 Wiki 文章 如何更新物体。

three.js r.116

- WestLangley

---

谢谢回复。是的，我尝试了material.needsUpdate=true，虽然我定义了一个全局变量=material并设置它，但它给出了一个错误“无法设置未定义的属性'needsUpdate'”。我使用mesh.material.needsUpdate=true，没有错误，但光仍然可见。我正在使用jQuery，并将复选框的更改事件放在$(document).ready()中。我还尝试将更改事件放在我的render()函数中，但光仍然可见。我想知道，在这种情况下，处理事件的最佳位置在哪里。 - Miloud Eloumri

Answer 2

隐藏/显示光源使用：

light.visible = false; //或 true

并将所有材质的needsUpdate设置为true。

material.needsUpdate = true;

我将所有材质放在一个对象中，其属性是材质对象，所以我有：

    for (var material in materials) {
        if (materials.hasOwnProperty(material)) {
            materials[material].needsUpdate = true;
        }
    }

这将允许您查看所有更新。在执行needsUpdate技巧之前，在大多数情况下，您将什么也看不到。

- Rantiev

---

你使用的是哪个three.js版本？ - WestLangley

你可以在这里检查 https://github.com/rantiev/threejs-clock。 我使用的是版本号为72，已经尝试了近期的77并且它可以工作。不确定是否是版本号，除了修订版本外，在文件顶部没有看到任何横幅注释包含版本号。 - Rantiev

抱歉。我应该使用“修订”这个词。不过，“版本”也是指同样的事情。 - WestLangley

Answer 3

对我来说，它是这样工作的：

render(){
    // some other code ....


    //light
    if($('#dLight').is(':checked')){
        dLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value')).normalize();
        dLight.intensity = $('#light-intensity-id').slider('value');
        dLight.color.setHex('0x' + $('#light-color').val());
             scene.add(dLight);
        }else{
             scene.remove(dLight);
        }

        if($('#pLight').is(':checked')){
            pLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value'));
            pLight.intensity = $('#light-intensity-id').slider('value');
            pLight.color.setHex('0x' + $('#light-color').val());
            scene.add(pLight);
        }else{
            scene.remove(pLight);
        }

        if($('#sLight').is(':checked')){
            sLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value'));
            sLight.intensity = $('#light-intensity-id').slider('value');
            sLight.color.setHex('0x' + $('#light-color').val());
            scene.add(sLight);
        }else{
            scene.remove(sLight);
        }

        if($('#aLight').is(':checked')){
            aLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value'));
            aLight.color.setHex('0x' + $('#light-color').val());
            scene.add(aLight);
        }else{
            scene.remove(aLight);
        }
    }

- Miloud Eloumri