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

【问题标题】：Adding and removing three.js lights at run time在运行时添加和删除 three.js 灯
【发布时间】：2013-06-02 03:05:00
【问题描述】：

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

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

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

【问题讨论】：

标签： three.js light

【解决方案1】：

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

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

有关详细信息，请参阅 Wiki 文章 How to Update Things。

three.js r.116

【讨论】：

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

【解决方案2】：

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

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

material.needsUpdate = true;

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

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

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

【讨论】：

你用的是哪个three.js版本？
你可以在这里查看。 github.com/rantiev/threejs-clock 我使用的是 72 版，已经尝试了几乎最新的 77 版，它可以工作。不确定它是否是版本号，除了修订版之外，我在顶部文件部分看不到任何内容，这里没有任何带有版本号的横幅注释。
对不起。我应该使用“修订”这个词。不过，“版本”的意思是一样的。

【解决方案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);
        }
    }

【讨论】：