在三个 JS 中以最小阴影照亮 glb 模型

Posted 2023-02-27

【中文标题】在三个 JS 中以最小阴影照亮 glb 模型

【英文标题】：Lighting glb models in Three JS with minimal shadows

【发布时间】：2021-12-30 16:54:09

【问题描述】：

不确定我的标题是否正确，但我被三个 JS 弄湿了。现在我有一个简单的 glb 模型，我想将它导入到我的场景中，但我无法获得正确的照明。下图就是我想要完成的。

但是当我将 glb 导入我的场景并添加一些照明时，这就是它的样子

模型很暗，我无法将它理想地点亮。我尝试过自上而下添加环境光、将点光作为子级添加到相机实例、半球光等，但我就是无法让它看起来正确。以下是当前照明的代码；我正在尝试通过使用点光源 atm 来实现外观。

var light = new THREE.PointLight( 0xffffff, 10 );
light.position.z = 10
camera.add(light)
var light2 = new THREE.PointLight( 0xffffff, 10 );
light2.position.set(0, -20, 30)
scene.add(light2)

如果有人能给我一些见解，什么是实现我想要的东西的正确方法，那就太好了。

【参考方案1】：

所以我做了一些挖掘，结果发现 Blender 包含这个叫做环境贴图的东西

https://discourse.threejs.org/t/exporting-blender-scene-lighting-issues/11887/8

所以我也必须在我的场景中重新创建环境。

像这样导入 RoomEnvironment 后：

import RoomEnvironment from 'three/examples/jsm/environments/RoomEnvironment';

我创建了房间环境：

const environment = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator( renderer );
scene.environment = pmremGenerator.fromScene( environment ).texture;

然后我将以下属性添加到我的场景对象中：

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
renderer.outputEncoding = THREE.sRGBEncoding;

之后，它就亮了！老实说，我现在真的不知道这些toneMapping 的东西是做什么的，但现在这解决了我的问题。

【讨论】：

很高兴你能成功。网上还有一些额外的源文件显示了在完整环境下加载 glTF 文件，例如gltf-test、gltf-vscode，当然还有Don's glTF Viewer。

@emackey 不知道这个。感谢分享:)