我正在使用three.js 渲染实体模型，类似于GitHub does for STL files。但是，我在设置照明以使其看起来不错时遇到了麻烦。我现在的样子是这样的：
问题是它只是从某些角度看起来确实不错。从其他角度看，对比度很差（垂直的平面可能是完全相同的灰色阴影）。
我用来实现这一点的代码如下：
light = new THREE.DirectionalLight(0xffffff, 1);
light.position.copy(camera.position);
scene.add(light);
当相机移动时，灯光也随之移动。
有什么改进的方法吗？
【问题讨论】：
标签： javascript graphics 3d three.js
您可以尝试以下一些方法来改善渲染对象的照明：
尝试不同的材料类型：
不同的材料会以不同的方式反射光线。看来您可能正在使用基本材质。尝试使用 Lambert 材料。材质是在您创建网格时定义的。例如，首先定义您的材料：
var material4 = new THREE.MeshLambertMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});
然后网格化你的对象：
var objectMesh = new THREE.Mesh(objectGeom, material4);
Lambert 材料的文档可在此处找到：http://threejs.org/docs/index.html#Reference/Materials/MeshLambertMaterial
添加额外的灯光：
大多数物体在不同侧面使用不同角度的多个光源看起来会更好。使用以下命令添加新灯：
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] );
【讨论】：
我自己更喜欢使用标准材料
standardMaterial = new THREE.MeshStandardMaterial( {
color: 0xffffff,
metalness: 0.5,
roughness: 0.5,
} );
并为渲染器启用 gammaOutput，这会使过亮区域看起来更好：
renderer.gammaInput = true;
renderer.gammaOutput = true;
从艺术的角度来看，最好让光线来自屏幕的左上角，所以给它一点偏移量。然后你可以启用阴影，所以对象总是在右下角投射阴影。
【讨论】：