使用Three.js进行逼真的照明(阳光)？
我正在尝试使用Three.js创建一个小的第一人称游戏，但我在照明方面遇到了问题。基本上，我想要模拟太阳，让它旋转，投射光线到任何东西上。我现在使用的是THREE.DirectionalLight，它只会照亮一个方向，所以立方体的边会保持黑色/黑暗。
我必须使用多个灯才能照亮所有东西吗？或者我可以以某种方式反射地面/物体上的光线？
回答 3
Stack Overflow用户
发布于 2013-03-18 23:00:13
是的，你必须使用多个灯光来实现这一点，伪装反射的光。计算真实的反射光不是内置的(并且在计算上非常复杂/昂贵)。您有多种选择。
第二个方向光，可以总是在相反的位置和方向的太阳。
一种保持不变的半球光。半球照明获得了天空颜色和地面颜色和强度，并为您的照明增加了一个不错的额外深度。
// 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，可以启用半lambert着色。这为黑色提供了一个更好的衰减，从而产生不那么强烈的照明。更多的中间色调和更少的黑色。
Stack Overflow用户
发布于 2013-03-21 01:45:36
我使用了这两种灯光的组合来制作这个视频：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;Stack Overflow用户
发布于 2022-02-11 17:18:54
你可以使用scene.environment来完成这项工作，这里已经有了一个很好的示例：
https://gltf-viewer.donmccurdy.com/
在这里查看gltf-viewer的代码，它在阳光下做得很好。
https://github.com/donmccurdy/three-gltf-viewer/blob/main/src/viewer.js
请注意vairable环境，它们使用venice_sunset_1k.hdr作为默认背景。
更详细地说，他们使用背景作为他们的环境，但他们没有‘显示’他们，你可以使用下面的代码
this.pmremGenerator = new PMREMGenerator( this.renderer );
this.pmremGenerator.compileEquirectangularShader();
var rgbe_loader = new RGBELoader();
var that = this;
rgbe_loader.setDataType(UnsignedByteType).load("/environment/venice_sunset_2k.hdr", function(texture) {
var envMap = that.pmremGenerator.fromEquirectangular(texture).texture;
that.scene.environment = envMap;
texture.dispose();
that.pmremGenerator.dispose();
});可以在https://polyhaven.com/a/venice_sunset中找到hdr文件的位置
https://stackoverflow.com/questions/15478093
复制相似问题