Three.js 灯光和阴影答案

【问题标题】：Three.js lights & shadowsThree.js 灯光和阴影
【发布时间】：2017-08-29 11:27:53
【问题描述】：

我对 init 和 animate 过程中的某些内容很好奇。我们可以改变灯光和阴影之类的东西，我注意到如果我在初始化点使用大值，开始时的 fps 会像地狱一样下降。因此，我在动画过程中使用一些代码测试了当我在每个循环中逐步设置值时的情况。我的意思是它就像它一样。 “程序”一直循环我们场景中的所有事物。

但我问自己的是“场景设置真的更好吗？！”

你说什么？！你知道那里是否有任何复杂的场景发生这样的情况，然后又不更新这样的值？！我的意思是在启动时，不像一个我们只渲染我们看到的东西的游戏，而不是整个场景的东西。

我也很好奇您如何/将如何解决这个问题：

 var cam, light, d, rend;
var ambLone = 0x444444, 
    ambLoneI = 0.2, 
    ambLtwo = 0x666666,
    ambLtwoI = 0.5, 
    lC = 0xdfebff, 
    lN = 2.75,
    lF = 1000,
    lightPx = 700,
    lightPy = 500,
    lightPz = 500,
    lightSCmin = 1,
    lightSCmax = 1000,
    lightSCF = 100,
    lightSCN = lightSCmin;

在初始化（）中； ->

scenes.add( new THREE.AmbientLight( ambLone, ambLoneI ) );
            scenes.add( new THREE.AmbientLight( ambLtwo, ambLtwoI ) );
            light = new THREE.DirectionalLight( lC, lN, lF );
            light.position.set( lightPx, lightPy, lightPz );
            light.position.multiplyScalar( 1.3 );
            light.castShadow = true;
            light.shadow.mapSize.width = 1024;
            light.shadow.mapSize.height = 1024;
            d = 1000;
            light.shadow.camera.left = - d;
            light.shadow.camera.right = d;
            light.shadow.camera.top = d;
            light.shadow.camera.bottom = - d;
            light.shadow.camera.far = lightSCF;
            light.shadow.camera.near = lightSCN;
            var helper = new THREE.CameraHelper( light.shadow.camera );

            scenes.add( light, helper );

在动画（）中； ->

requestAnimationFrame( animate );

    if (lightSCF === lightSCmax) {
        lightSCF = 1000;
        light.shadow.mapSize.width = 5120;
        light.shadow.mapSize.height = 5120;
        console.log( 'Light is set to: ' + lightSCF + light.shadow.mapSize.width);
    } else if(lightSCF < lightSCmax){
        lightSCF = lightSCF + 1;
        light.shadow.mapSize.width = light.shadow.mapSize.width + 4.5;
        light.shadow.mapSize.height = light.shadow.mapSize.width + 4.5;
        light.shadow.camera.far = lightSCF;
        light.shadow.camera.updateProjectionMatrix();
        console.log( 'Light is now: ' + lightSCF + ' ' + light.shadow.mapSize.width );
    } else {
        console.log( 'whatever... ');
    }

render();

【问题讨论】：

标签： javascript three.js shadow light

【解决方案1】：

我不知道这是否会导致您的问题，但您的 shadow.mapSize 有奇怪的值。文档说Values must be powers of 2，你应该检查WebGLRenderer.capabilities.maxTextureSize，如果你的设备能够处理大纹理。

https://threejs.org/docs/#api/lights/shadows/LightShadow

【讨论】：