Three.js 去除接缝

【问题标题】：Three.js removing seamsThree.js 去除接缝
【发布时间】：2013-12-25 00:30:52
【问题描述】：

是否可以去除两个网格连接的接缝（颈部下方）？

这是我加载模型的方式：

var model = new THREE.Object3D();
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/one.js", function(geometry, material){
    var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
    model.add( mesh );
} );    
jsonLoader.load( "models/two.js", function(geometry, material){
    var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial());
    model.add( mesh );
    model.scale.set(4,4,4);
    model.position.y = -3.5;
    scene.add(model);
} );

【问题讨论】：

没有。这取决于您的三角形以及它们的排列方式。如果你没有平滑的表面，渲染器肯定不会为你平滑它。

标签： three.js

【解决方案1】：

看起来面法线在两个网格的边界处非常不同，它们相遇的地方。这就是为什么边界处的照明看起来非常不同，从而呈现出类似接缝的外观。我相信如果你调整你的模型，使边缘颈部的法线指向相同的方向，这样灯光就会得到平滑的过渡。请允许我用一张画得不好的图片来演示：

Three.js 将根据法线的方向对第一个示例进行着色，使光线看起来像一个尖角。第二个应该是平滑的。

如何实现这一点取决于用于创建网格的建模软件。如果您使用 Three.js 为您自动生成法线（法线未包含在模型数据中），我不确定如何轻松修复它（可能合并几何，组合共享顶点，然后让 three.js 重新生成那么法线就可以工作了）。

【讨论】：