如何在 Three.JS 中将两个 BufferGeometry 合并到一个 BufferGeometry 中？答案

【问题标题】：How to merge two BufferGeometries in one BufferGeometry in Three.JS?如何在 Three.JS 中将两个 BufferGeometry 合并到一个 BufferGeometry 中？
【发布时间】：2016-07-26 19:48:49
【问题描述】：

如何在 ThreeJS 中将两个缓冲区几何图形合并到一个 THREE.BufferGeometry 中？

var modelGeometry = null;

geometry = new THREE.CylinderGeometry( 10, 10, 10 );

if (modelGeometry == null)
{
    modelGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
    console.log(modelGeometry);
}

bufGeometry = new THREE.SphereBufferGeometry( 20 , 20, 20 );

var mesh = new THREE.Mesh( bufGeometry, material );

modelGeometry.merge(mesh.geometry, mesh.matrix);

对modelGeometry 没有任何作用。如何正确合并这些几何？

【问题讨论】：

我认为缓冲区几何的合并不能正常工作。尝试合并常规几何图形：THREE.CylinderGeometry 和 THREE.SphereGeometry。
BufferGeometry的合并功能好像有bug。
BufferGeometry.merge() 目前不支持 indexed-BufferGeometry，这是您在示例中使用的。 (three.js r.75)
有没有办法在没有 indexed-BufferGeometry 的情况下绘制这些图元？
BufferGeometry.toNonIndexed()。但我重申我的第一条评论。

标签： javascript merge three.js buffer-geometry

【解决方案1】：

在 BufferGeometry 上奇怪地调用 merge() 给了我一些错误，但有一个解决方法：

合并两个 Geometry 对象；
转换为 BufferGeometry；
添加到网格

这对我有用：

    var modelGeometry = new THREE.Geometry();

    cylGeometry = new THREE.CylinderGeometry( 10, 10, 10 );

    // if (modelGeometry == null)
    // {
    //     modelGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
    //     console.log(modelGeometry);
    // }

    modelGeometry.merge(cylGeometry);

    sphereGeometry = new THREE.SphereGeometry( 20 , 20, 20 );

    modelGeometry.merge(sphereGeometry);

    bufGeometry = new THREE.BufferGeometry().fromGeometry(modelGeometry);

    var mesh = new THREE.Mesh( bufGeometry, material );

    scene.add(mesh);

【讨论】：

这也是我的第一次尝试。但是有更多的几何图形来合并这个技巧不起作用 - 浏览器在加载脚本时崩溃了......我只需要合并 BufferGeometry。
@Evgy 为什么需要合并这些几何图形？如果只是为了让它们在同一个组中，您可以将它们添加到 Object3D，否则我不知道。
我需要在 GL 缓冲区中加载非常大的模型，由小原语创建。对于几何对象，浏览器会因数百个对象而崩溃。将模型加载到在具有许多单独 BufferGeometries 的许多网格上拆分的场景显示更快的速度和更少的内存使用，但我仍然需要优化代码，从几何合并的一个网格显示良好的速度，但还不够......我的希望只在网格上最后一个 BufferGeometry。
@Evgy Tricky。随着 merge() 退出游戏，它变得非常困难
这种方法非常适合我使用 5000 PlaneGeometry！

【解决方案2】：

我会彻夜跳舞。做到了！

sumPosArr = new Float32Array(poslen);
sumNormArr = new Float32Array(normlen);
sumUvArr = new Float32Array(uvlen);

var postotalarr = new Array();

sumPosCursor = 0;
sumNormCursor = 0;
sumUvCursor = 0;

for (a = 0; a < objects.length; a++ )
{
    var posAttArr = objects[a].geometry.getAttribute('position').array;

    for (b = 0; b < posAttArr.length; b++)
    {
        sumPosArr[b + sumPosCursor] = posAttArr[b];
    }

    sumPosCursor += posAttArr.length;


    var numAttArr = objects[a].geometry.getAttribute('normal').array;

    for (b = 0; b < numAttArr.length; b++)
    {
        sumNormArr[b + sumNormCursor] = numAttArr[b];
    }

    sumNormCursor += numAttArr.length;


    var uvAttArr = objects[a].geometry.getAttribute('uv').array;

    for (b = 0; b < uvAttArr.length; b++)
    {
        sumUvArr[b + sumUvCursor] = uvAttArr[b];
    }

    sumUvCursor += uvAttArr.length;

}

modelGeometry.addAttribute('position', new THREE.BufferAttribute(sumPosArr, 3 ));
modelGeometry.addAttribute('normal', new THREE.BufferAttribute(sumNormArr, 3 ));
modelGeometry.addAttribute('uv', new THREE.BufferAttribute(sumUvArr, 2 ));

【讨论】：

THREE.BufferGeometry 无法合并索引几何。