提高three.js场景中的灯光效果

我使用three.js渲染实体模型，类似于GitHub does for STL files。不过，我在设置照明时看起来很麻烦。我现在所拥有的是这样的：提高three.js场景中的灯光效果

的问题是，它只是看起来真的从某些角度好。从其他角度来看，存在较差的对比度（垂直的平面可以是完全相同的灰色阴影）。

我使用来实现，这是如下所述的代码：

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

和当相机移动时，与它的光移动。

任何想法如何改善？

2016-06-24 ian93

使用位置光而不是定向光？在不同的位置使用多种不同颜色的灯光？这些方法将保证非共面曲面之间的对比。 –

这里有一些事情你可以尝试提高/照明渲染的对象上：

尝试不同的材料类型：

不同的材料会有不同反射光。看起来您可能正在使用基本资料。尝试使用朗伯材料。材料在创建网格时定义。例如，先定义你的材料：

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

，然后网格物件：

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

添加额外的灯：

大多数物体看起来更好，多个光源从不同角度看不同nt边。使用以下内容添加新灯：

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]);

2016-06-24 19:14:55 samcervantes

我本人更喜欢使用标准材质

standardMaterial = new THREE.MeshStandardMaterial({ 
        color: 0xffffff, 
        metalness: 0.5, 
        roughness: 0.5, 
       });

，使gammaOutput渲染器，这使得overbright区域看起来要好得多：

 renderer.gammaInput = true; 
     renderer.gammaOutput = true;

从艺术观点来看，最好让光线来自屏幕的左上角，所以给它一点点偏移。那么您可以启用阴影，因此该对象总是向右下角投射阴影。

2016-06-26 14:31:02 Thomasn

回答