由网友(辰星心语)分享简介：我无法与three.js现场keydown事件补充光照。I can't add light with keydown event in three.js scene.我有以下功能function putLight(){light = new THREE.SpotLight( 0xffffff );light.po...

我无法与three.js现场keydown事件补充光照。

I can't add light with keydown event in three.js scene.

我有以下功能

function putLight(){
    light = new THREE.SpotLight( 0xffffff );
    light.position.set( 10, 80, 20 );
    light.target.position.set( 0, 0, 0 );

        light.castShadow = true;

        light.shadowCameraNear = 20;
        light.shadowCameraFar = 50;
        light.shadowCameraFov = 40;

        light.shadowMapBias = 0.1;
        light.shadowMapDarkness = 0.7;
        light.shadowMapWidth = 2*512;
        light.shadowMapHeight = 2*512;
    scene.add( light );
}

和它的作品时，我在我的初始化函数中使用它

And it works when I use it in my init function

function init(){
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    scene = new THREE.Scene();
geometry = new THREE.PlaneGeometry( 300, 300, 50, 50 );
    geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

    material = new THREE.MeshLambertMaterial( { color: 0xdddddd } );

    mesh = new THREE.Mesh( geometry, material );

    mesh.position.copy(groundBody.position);
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add( mesh );


    renderer = new THREE.WebGLRenderer();
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild(renderer.domElement);
}

它也可以，如果我把它列在主脚本的任何功能：

it also works if I put it out of any function in main script:

initCannon();
init();
loadModel();
putLight();
render();

但它不`吨的工作，在未来形势

but it doesn`t work in the next situation

window.addEventListener("keydown",function(e){
    switch( e.keyCode ) {
        case 76:
            putLight();
            break;
    }
});

有什么建议？

感谢

推荐答案

您添加一盏灯，现场呈现至少一次后。

You are adding a light to the scene after rendering at least once.

正如维基文章如何更新东西WebGLRenderer ，性能说明不能在运行时被容易地改变（一次一个材料呈现至少一次）包括灯的数量和类型。

As stated in the Wiki article How to Update Things with WebGLRenderer, properties that can't be easily changed in runtime (once a material is rendered at least once) include the number and types of lights.

如果之后的第一个渲染，那么你需要设置你必须添加光

If you must add the light after the first render, then you need to set

material.needsUpdate = true;

另一种解决方案是将光添加第一个渲染之前，并设置光的强度为零。

three.js r.68

three.js r.68