Three.js灯和&阴影

时间:2017-04-04 10:11:00

标签: javascript three.js shadow light

我对初始化和动画过程中的某些事情感到好奇。我们可以改变灯光和阴影之类的东西,我注意到如果我在初始点使用大值,开始时的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;

在init()中; - >

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

in animate(); - >

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

1 个答案:

答案 0 :(得分:0)

我不知道,如果这是导致您的问题,但您的shadow.mapSize有奇数值。文档说Values must be powers of 2,如果您的设备具有大纹理,则应检查WebGLRenderer.capabilities.maxTextureSize

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