我如何在 Three.js 中组合或合并几何图形？

Question

我怎样才能采用 2 个单独的缓冲区几何形状，并简单地将它们 merge/combine 合并为一个 BufferGeometry 在 three.js 中，它还可以携带所有蒙皮属性、uv、顶点、等等？

我一直在努力寻找解决方案，因为 three.js 中的默认工具似乎不起作用，或者它们会打乱几何体的某些部分。

Answer 1

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

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

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

我如何在 Three.js 中组合或合并几何图形？

How can I actually combine or merge geometries in Three.js?

javascript

merge

three.js

buffer-geometry