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

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

我有一些复选框，每个复选框代表一种灯光类型，我想在选中某个灯光类型的复选框时将其添加到场景中，并在取消选中时删除该灯光

---

我尝试了：

场景。移除（灯光）

和

灯光。可见=false

，但没有成功

使用

WebGLRenderer

，如果更改灯光数量或灯光类型，则需要设置

material.needsUpdate=true

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

有关更多信息，请参阅Wiki文章

---

three.js r.116

我的工作方式如下：

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);
        }
    }

要隐藏/显示灯光，请使用： 可见光=假//还是真的

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

material.needsUpdate=true

我把所有的材料都放在一个物体里面，这些材料的属性都是材料，所以我有

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

---

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

谢谢您的重播。是的，我尝试了material.needsUpdate=true，虽然我定义了一个全局var=material并对其进行了设置，但它给了我一个错误“无法设置未定义的属性'needsUpdate'。我使用了mesh.material.needsUpdate=true，没有错误，但灯光仍然可见。我正在使用jQuery，并将复选框的更改事件放在$（document.ready（）中。我还尝试将更改事件放入render（）函数中，但灯光仍然可见。我想知道，在这种情况下，放置事件处理函数的最佳位置在哪里。您使用的是哪种3.js版本？您可以在这里查看。我用的是修订版72，我试过了最新的77，效果很好。不确定是否是版本号，除了修订版，我在顶部文件部分没有看到任何内容，这里没有任何带有版本号的横幅注释。对不起。我应该用“修订”这个词。不过，“版本”的意思是一样的。