three.js - 在运行时添加和删除 three.js 灯

Question

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

我有一些复选框，每个复选框都代表一种灯光类型，我想在选中复选框时将某种灯光类型添加到场景中，并在未选中时移除灯光。

我试过：scene.remove(light)和light.visible = false，但没有奏效。

Answer 1

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

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

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

三.js r.116

Answer 2

隐藏/显示灯光使用：light.visible = false; //或真

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

material.needsUpdate = true;

我在一个对象中拥有所有材料，这些材料的属性是材料对象，所以我有。

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

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

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