Merge two geometries into one geometry from PLYLoaders

Question

I have two PLY files, and I want to merged into one, but I have a problem with de loaders method of the PLYLoader, how i can access to the Geometry of the two loaders simultaneously?

I loaded the two ply files and I define new geometry (BufferGeometry class) for the new shape, but the variables mesh1 and mesh2 are undefined when a I tried to access to the geometry properties.

Here is my code:

//  ...
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

The problem is you're not waiting for the loader to have loaded the meshes mesh1 and mesh2 before you're attempting to merge them.

We can refactor this to use Promises, which makes dealing with the async loading a lot easier.

(I've removed the code that generated meshes from the single geometries, as that wasn't apparently used.)

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();
  });