three.js r75 point在错误的地方点亮阴影

时间:2016-04-19 23:10:33

标签: three.js shadow

我有一个jsfiddle包含一个固定的太阳和月亮以及一个绕太阳公转的行星地球。

以下是两个Lights(环境和点)和示例对象的代码。

        var light2 = new THREE.AmbientLight(0x444444);//... for lighting the Sun and other MeshBasicMaterial meshes.
        scene.add(light2);

        //... PointLight
        //  http://threejs.org/docs/#Reference/Lights/PointLight
        var light3 = new THREE.PointLight( 0xffffff, 10, 150000,1);
        light3.castShadow = true;
        light3.shadow.camera.near = 1;
        light3.shadow.camera.far = 5000;
        light3.shadow.camera.fov = 90;
        // light3.shadowCameraVisible = true;
        light3.shadow.bias = 0.001;
        scene.add( light3 );            

        // SPHERES

        var sphereGeom = new THREE.SphereGeometry( 40, 32, 16 );
var SunMaterial = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
        this.Sun01 = new THREE.Mesh( sphereGeom.clone(), SunMaterial );
        Sun01.position.set(-500, 0, 220);           
        scene.add( Sun01 );
        //Sun01.castShadow = false;
        //Sun01.receiveShadow = false;

        light3.position.set( Sun01.position.x, Sun01.position.y , Sun01.position.z);

var moonMaterial = new THREE.MeshPhongMaterial( { color: 0xaa00aa } );
        var Moon02 = new THREE.Mesh( sphereGeom.clone(), moonMaterial );                
        Moon02.scale.set( 0.5,0.5,0.5 );
        Moon02.position.set(-200, 0, 220);
        scene.add( Moon02 );
        Moon02.castShadow = true;
        Moon02.receiveShadow = false;

有两个问题。

首先遥远的固定卫星不会被PointLight照亮,即使它们在范围内。

其次,远处卫星的阴影出现在(太阳轨道)地球上,即使地球比那些固定的卫星更接近太阳。

请注意,内部固定月亮(名为Moon02,颜色为洋红色)确实被PointLight照亮,并且它会在地球上投下阴影。

以下是渲染器设置代码: -

renderer = new THREE.WebGLRenderer();
                renderer.setClearColor( 0x000022 );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );

                //... Enable Shadows
        renderer.shadowMap.enabled = true;//.shadowMapEnabled = true;
        //renderer.shadowMap.type    = THREE.BasicShadowMap;//
                //renderer.shadowMap.type    = THREE.PCFShadowMap
            renderer.shadowMap.type    = THREE.PCFSoftShadowMap;

我的问题=需要做些什么来(a)照亮外面的卫星,以及(b)确保外卫的阴影不会出现在(内部的,更接近太阳的)行星地球上。

1 个答案:

答案 0 :(得分:3)

简单地说,你把事情搞得太过分了。

从点光源计算阴影非常昂贵。实际上,THREE.js只为其添加了a few months ago的功能。我在文档中找不到任何可靠的东西,但似乎有一个硬编码限制,可以从点光源计算出阴影的距离。

解决方案很简单:减少对象之间的空间。当十几个物体足够时,绝对没有理由认为物体需要相距数千个单位。我解决了你的两个问题just by reducing all distances and scales by a factor of 10.我还调整了PointLight的强度,因为10非常苛刻哈哈。

// color, intensity, falloff radius, falloff amount
// if falloff radius is 0 then there is no falloff
var light3 = new THREE.PointLight( 0xffffff, 1, 0, 0);