javascript - 改进 three.js 场景中的光照

Question

我正在使用 three.js 渲染实体模型，类似于 GitHub does for STL files 的方式.但是，我无法将照明设置为看起来不错。我现在拥有的是这样的:

问题是它只是从某些 Angular 看起来确实不错。从其他 Angular 看对比度很差(垂直的平面可能是完全相同的灰色阴影)。

我使用的代码如下:

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.copy(camera.position);
scene.add(light);

当相机移动时，光线也随之移动。

有什么改进方法吗？

Answer 1

您可以尝试通过以下方式改善渲染对象的光照:

尝试不同的 Material 类型:

不同的 Material 会反射不同的光。看来您可能正在使用基本 Material 。尝试使用 Lambert Material 。 Material 在您创建网格时定义。例如，首先定义你的 Material :

var material4 = new THREE.MeshLambertMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});

然后对您的对象进行网格划分:

var objectMesh = new THREE.Mesh(objectGeom, material4);

Lambert Material 的文档可在此处找到:http://threejs.org/docs/index.html#Reference/Materials/MeshLambertMaterial

添加额外的灯:

大多数物体在不同侧面的不同 Angular 使用多个光源看起来更好。使用以下内容添加新灯:

lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 0 ].position.set( 0, 200, 0 );
scene.add( lights[ 0 ] );

注意 lights[] 是一个可以包含多个灯的数组。

添加定向光助手:

在开发过程中，它有助于添加定向光助手以查看灯光的来源。例如:

directionalLightHelper[0] = new THREE.PointLightHelper(lights[0], 1);
scene.add( directionalLightHelper[0] );