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着色。这样可以更好地降低黑色，从而减少光照。更多的中音和更少的黑色。

与Three.js的现实照明（阳光）？

2 个答案: