规范化three.js中的网格

Question

我正在从obj文件加载一个网格，然后尝试将其标准化。 但是，我得到了奇怪的结果。 以下是加载和居中网格的代码：

var manager = new THREE.LoadingManager();
var loader = new THREE.OBJLoader(manager);
loader.load('http://jamesdedge.com/threejs/bunny.obj', function(object) {
  object.traverse(function(child) {
    if(child instanceof THREE.Mesh)
    {
      var geometry = child.geometry;
      var verts = geometry.vertices;
      var ctr = new THREE.Vector3(0.0, 0.0, 0.0);


      for(i = 0; i < verts.length; ++i)
        ctr.add(verts[i]);

      ctr.divideScalar(verts.length);

      for(i = 0; i < verts.length; ++i)
        verts[i].sub(ctr);
    }
  });

  scene.add(object);
});

此代码应该将网格中心放在顶点位置的平均值上，但它似乎会导致奇怪的效果。 你可以在我的网站上看到它： http ： //jamesdedge.com/threejs/tjs_demo.html

我没有看到导致这种情况的原因，ctr变量给我一个有效的向量，从所有顶点减去一个向量只会重新定位它。

Answer 1

此模型中的许多顶点都是重复的（即，对象中多次包含相同的javascript对象），因此ctr会多次从这些顶点中删除。

解决这个问题的一种方法是在遍历函数的开头合并顶点，即

var geometry = child.geometry;
geometry.mergeVertices();

这也将使您的代码运行得更快，因为它必须处理更少的顶点。

Answer 2

您可以使用GeometryUtils.center（）将整个网格方便地置于场景中间的（0,0,0）。 无论如何，只要看看该函数的源代码https://github.com/mrdoob/three.js/blob/master/src/extras/GeometryUtils.js这应该会让你对如何克服你的问题有一个很好的了解。