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

Posted

技术标签:

【中文标题】从 PLYLoaders 将两个几何图形合并为一个几何图形【英文标题】:Merge two geometries into one geometry from PLYLoaders 【发布时间】:2019-01-18 23:35:16 【问题描述】:

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

我加载了两个 ply 文件并为新形状定义了新几何体(BufferGeometry 类),但变量 mesh1mesh2 未定义 当我尝试访问几何属性时。

这是我的代码:

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

【问题讨论】:

【参考方案1】:

问题是您没有等待loader 加载网格mesh1mesh2,然后再尝试合并它们。

我们可以将其重构为使用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();
  );

【讨论】:

这段代码应该在init函数里面吗?因为现在我无法渲染 “我无法渲染”是什么意思?你有错误吗?它在哪里并不重要,但您应该仅在加载所有内容后才开始渲染内容,即现在那里有 animate() 调用。 不,我没有收到任何错误,我试图表示我在场景或浏览器中看不到网格 那么我认为生成的网格或几何体有问题。您可以添加console.log()s 以查看geometries 对象和singleGeometry 对象是否正确。 我尝试先在.then 中打印一些元素,但没有显示任何内容,就像从未进入过那里:(

以上是关于从 PLYLoaders 将两个几何图形合并为一个几何图形的主要内容,如果未能解决你的问题,请参考以下文章

在ArangoDB中映射两个图形数据库

如何从两列数据制作一个 Power BI 饼图小部件/或将两个饼图合并为一个

如何将2条提升曲线的图形合并到Python中的单个图形中

如何使用 mongify 将两个表合并为一个

如何将不同数组中的两个匹配对象合并为一个对象?

NodeJS:使用读取它们获得的缓冲区将两个PDF文件合并为一个