我不能用鼠标事件添加光 [英] I can't add light with mouse event

问题描述

我无法与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

这篇关于我不能用鼠标事件添加光的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！