如何在 Three.js 中实际组合或合并几何？

Question

如何获取 2 个单独的缓冲区几何图形，然后在 three.js 中简单地将它们合并/组合成一个 BufferGeometry，它还可以继承所有蒙皮属性、uv、顶点等？

我一直在尝试寻找解决方案，因为 three.js 中的默认工具似乎无法正常工作，或者它们会扰乱几何图形的某些部分。

Answer 1

纵观 three.js 的历史，默认几何类一直在发生变化，导致在使用旋转它们的工具和实用程序方面存在差异和问题。此时，最新的几何是BufferGeometry 类。当大多数人看到BufferGeometry.merge() 或BufferGeometryUtils.mergeBufferGeometries() 功能时，通常他们想做的只是将两个模型合二为一。这可能有点戏剧性，但我可以自豪地说，我创建了一个函数，它将获取几何体的所有属性，无论是皮肤权重、顶点位置、uvs 等，并将它们应用到输出合并几何体中。

警告：请记住，如果几何体不是为蒙皮网格设计的，您可能必须更改属性数组以删除不需要的属性。

MergeGeometry(geo1, geo2) {
        var attributes = ["normal", "position", "skinIndex", "skinWeight"];
        var dataLengths = [3, 3, 4, 4];
        var geo = new THREE.BufferGeometry();
        for (var attIndex = 0; attIndex < attributes.length; attIndex++) {
            var currentAttribute = attributes[attIndex];
            var geo1Att = geo1.getAttribute(currentAttribute);
            var geo2Att = geo2.getAttribute(currentAttribute);
            var currentArray = null;
            if (currentAttribute == "skinIndex") currentArray = new Uint16Array(geo1Att.array.length + geo2Att.array.length)
            else currentArray = new Float32Array(geo1Att.array.length + geo2Att.array.length)
            var innerCount = 0;
            geo1Att.array.map((item) => {
                currentArray[innerCount] = item;
                innerCount++;
            });
            geo2Att.array.map((item) => {
                currentArray[innerCount] = item;
                innerCount++;
            });
            geo1Att.array = currentArray;
            geo1Att.count = currentArray.length / dataLengths[attIndex];
            geo.setAttribute(currentAttribute, geo1Att);
        }
        return geo;
    }