与Three.js的现实照明(阳光)？

Question

我正在尝试使用Three.js创建一个小型的第一人称游戏,但我遇到了照明问题.基本上我想要模拟太阳并让它围绕着所有东西的投射光旋转.我现在正在使用THREE.DirectionalLight,它只照亮了一个方向,所以立方体的两侧保持黑/暗.

我是否必须使用多个灯才能点亮一切？或者我可以以某种方式反射地面/物体的光线？

Answer 1

我使用这两个灯组合制作了这个视频:http://www.youtube.com/watch？v = m68FDmU0wGw

            var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
            hemiLight.color.setHSV( 0.6, 0.75, 0.5 );
            hemiLight.groundColor.setHSV( 0.095, 0.5, 0.5 );
            hemiLight.position.set( 0, 500, 0 );
            scene.add( hemiLight );

            var dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
            dirLight.position.set( -1, 0.75, 1 );
            dirLight.position.multiplyScalar( 50);
            dirLight.name = "dirlight";
            // dirLight.shadowCameraVisible = true;

            scene.add( dirLight );

            dirLight.castShadow = true;
            dirLight.shadowMapWidth = dirLight.shadowMapHeight = 1024*2;

            var d = 300;

            dirLight.shadowCameraLeft = -d;
            dirLight.shadowCameraRight = d;
            dirLight.shadowCameraTop = d;
            dirLight.shadowCameraBottom = -d;

            dirLight.shadowCameraFar = 3500;
            dirLight.shadowBias = -0.0001;
            dirLight.shadowDarkness = 0.35;

Answer 2

是的,你必须使用多个灯来实现这一点,伪造反射光.计算实际反射光不是内置的(并且计算上非常复杂/昂贵).你有多种选择.

第二个定向灯,可以始终位于太阳的相反位置和方向.

半球光保持不变.半球照明获得了天空的颜色和地面颜色和强度,为您的照明增添了更多的深度.

//                                    sky color ground color intensity 
hemiLight = new THREE.HemisphereLight( 0x0000ff, 0x00ff00, 0.6 ); 

这是一个有效的例子http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html

你可以使用不同灯光的任意组合,但要注意性能折衷.

还值得一提的是通过在材质中将wrapAround属性设置为true来启用half-lambert着色.这样可以更好地降低黑色,从而减少光照.更多的中音和更少的黑色.