从 PLYLoaders 将两个几何图形合并为一个几何图形

Question

我有两个 PLY 文件，我想合并为一个，但是我对 PLYLoader 的 de loader 方法有问题，如何同时访问两个 loader 的 Geometry？

我加载了两个 ply 文件并为新形状定义了新几何体（BufferGeometry 类），但变量 mesh1 和 mesh2 未定义 当我尝试访问几何属性时。

这是我的代码：

//  ...
var mesh1, material1;
var mesh2, material2;
var singleGeometry, material, mesh;
// ...

init();
animate();

singleGeometry = BufferGeometry();

function init() {
  //   ...
  singleGeometry = new THREE.BufferGeometry();
  //  ...

  var loader = new THREE.PLYLoader();
  loader.load("path/ply1.ply", function(geometry) {
    geometry.computeVertexNormals();
    material = new THREE.MeshStandardMaterial({ color: 0x0055ff, flatShading: true });
    mesh1 = new THREE.Mesh(geometry, material);

    mesh1.position.y = -0.2;
    mesh1.position.z = 0.3;
    mesh1.rotation.x = -Math.PI / 2;
    mesh1.scale.multiplyScalar(0.01);
    mesh1.castShadow = true;
    mesh1.receiveShadow = true;
  });
  loader.load("path/ply2.ply", function(geometry) {
    geometry.computeVertexNormals();
    material = new THREE.MeshStandardMaterial({ color: 0x0055ff, flatShading: true });
    mesh2 = new THREE.Mesh(geometry, material);

    mesh2.position.x = -0.2;
    mesh2.position.y = -0.02;
    mesh2.position.z = -0.2;
    mesh2.scale.multiplyScalar(0.0006);
    mesh2.castShadow = true;
    mesh2.receiveShadow = true;
  });

  var loader = new THREE.PLYLoader();
  loader.load("ply/Paso_1_mandible.ply", function(geometry) {
    geometry.computeVertexNormals();
    material = new THREE.MeshStandardMaterial({ color: 0x0055ff, flatShading: true });
    mesh1 = new THREE.Mesh(geometry, material);

    mesh1.position.y = -0.2;
    mesh1.position.z = 0.3;
    mesh1.rotation.x = -Math.PI / 2;
    mesh1.scale.multiplyScalar(0.01);
    mesh1.castShadow = true;
    mesh1.receiveShadow = true;
  });
  loader.load("ply/Lucy100k.ply", function(geometry) {
    geometry.computeVertexNormals();
    material = new THREE.MeshStandardMaterial({ color: 0x0055ff, flatShading: true });
    mesh2 = new THREE.Mesh(geometry, material);

    mesh2.position.x = -0.2;
    mesh2.position.y = -0.02;
    mesh2.position.z = -0.2;
    mesh2.scale.multiplyScalar(0.0006);
    mesh2.castShadow = true;
    mesh2.receiveShadow = true;
  });
  singleGeometry.mergeBufferGeometries([mesh1.geometry, mesh2.geometry]);
  material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
  mesh = new THREE.Mesh(singleGeometry, material);
  scene.add(mesh);
}

Answer 1

问题是您没有等待loader 加载网格mesh1 和mesh2，然后再尝试合并它们。

我们可以将其重构为使用Promises，这使得处理异步加载变得更加容易。

（我已经删除了从单个几何图形生成网格的代码，因为它显然没有被使用。）

var plyLoader = new THREE.PLYLoader();
function loadAsset(path) {
  return new Promise(resolve => {
    plyLoader.load(path, resolve);
  });
}

var singleGeometry, material, mesh;

Promise.all([
  loadAsset("ply/Paso_1_mandible.ply"),
  loadAsset("ply/Lucy100k.ply"),
])
  .then(geometries => {
    geometries.forEach(geometry => geometry.computeVertexNormals());
    var singleGeometry = new THREE.BufferGeometry();
    singleGeometry.mergeBufferGeometries(geometries);
    material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
    mesh = new THREE.Mesh(singleGeometry, material);
    scene.add(mesh);
  })
  .then(() => {
    animate();
  });