javascript - ThreeJs 加载比 obj 文件中更多的顶点

Question

我有这个代码:

function render_obj(objPath){
  var loader = new THREE.OBJLoader();
  loader.load(
    objPath,
    function ( object ) {
      child = object.children[0];
      var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );      
      var material = new THREE.MeshBasicMaterial({wireframe: true});
      model = new THREE.Mesh(geometry, material);
      scene.add(model);
    },
    function ( xhr ) {
      console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    function ( error ) {
      console.log( 'An error happened' );
    }
  );
};

现在 man.obj 有 214 个顶点和 332 个面。当我通过执行以下操作检查面孔时:model.geometry.faces.length 我得到 332，这是正确的。当我执行 model.geometry.vertices.length 时，我得到 996，而我应该得到 214...

这是为什么？

Answer 1

您正在使用的加载程序正在创建称为“三 Angular 汤”的东西。这意味着 N 个三 Angular 形实际上是由 N * 3 个顶点定义的。三 Angular 形本身并不真正存在，它只是从顶点解释的。前三个形成一个三 Angular 形，接下来的三个以此类推。如果您有连续的平滑网格，则会重复很多顶点。

您可能感兴趣的是“索引”几何图形。在这种类型的几何图形中，您有一个实际的三 Angular 形缓冲区，用于保存顶点的索引。在连续平滑网格中，一个顶点可以被多个三 Angular 形共享。