Three.js: 奇怪的渲染结果

Question

如何修复循环周围的反射？

我的对象得到了一些奇怪的结果。我希望图片能说明问题。

Three.js 结果

预期结果

loader.load( "model.js", function(geometry){
    geometry.computeVertexNormals();

    var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {
      color: 0xffffff,
      specular: 0xffffff,
      shininess: 65,
      metal: true,
      envMap: cubeCamera.renderTarget
    }));
    scene.add(mesh);
    });

我已经使用 three.js json 导出器从 blender 导出了模型。该模型有顶点、面和 UV。

Answer 1

嗯，这个不好解释，但基本上是因为你用的是三角多边形，你的拓扑不好。如果我没记错的话，它通常被称为 "pinching"。
当为 Three.js 建模时，它基本上是为游戏引擎建模，并且需要遵循所有相同的规则。

您可以尝试获得更好反映的事情：

减少多边形的数量，因为您的多边形似乎比需要的多得多。
尝试使用四边形并最小化三边形以获得更清晰的拓扑。
设置平滑组

一个简单的解决方法是使用形状正确的简单平面，并切出孔，因为它的侧面似乎无论如何都看不到。（我在这里专门谈论大平板）。我提出这个建议是因为我发现当所有顶点都是平坦的并且在同一个平滑组中时，使用 MeshPhongMaterial 时的反射通常不会受到使用 ngons 和 tris 的不利影响。

Three.js: 奇怪的渲染结果

Three.js: Weird render result

javascript

three.js

blender