AFrame：向当前对象添加新的 Object3D 时的位置偏移单位

Question

我正在尝试将 Object3D 添加到我的 gltf 模型并将其放置在模型上方。我正在按照以下方式进行操作：

this.el.addEventListener('model-loaded', () => {

            this.bar = new MyCustomObject3D();

            const size = new THREE.Vector3();
            let box = new THREE.Box3().setFromObject(this.el.object3D);
            box.getSize(size)
            let height = size.y + 1;

            this.bar.position.set(0, height, 0);
            this.el.setObject3D("bar", this.bar);
            // same result: 
            // this.el.object3D.add(this.bar); 
        })

height 是 2，如果我将具有此位置的元素放入根（即场景）中，它将正确放置在模型正上方。但是当我将它添加到 Object3D 时，它被放置在模型下方某处，高度为 ~0.5。只有将高度乘以 25，我才能达到正确的位置。那么如何计算将新 Object3D 放置在模型上方而不将其乘以随机数所需的确切偏移量呢？

更新：

添加reproducible example。请注意我必须传递给 GLTF 模型的宽度和高度。

Answer 1

将对象放置在模型上方的一种方法是抓住其边界框，然后将对象放置在其上方。

总的来说，这很简单 - 就像您所做的那样：

let box = new THREE.Box3().setFromObject(this.el.object3D);
box.getSize(size)
let height = size.y + 1;
this.bar.position.set(0, height, 0);

但在这种情况下 - 边界框已关闭。走开。最小值太低，最大值在中间某处。这是为什么？（tldr：检查一下 here）

负责人是：剥皮。该模型由其骨骼转换 - 这是一种发生在 GPU（顶点着色器）上的顶点位移形式，与几何体无关 (source)。

这是一些视觉辅助工具 - 带有电枢的模型：并且没有应用电枢：

现在我们明白为什么盒子没有了——它对应于底部的图片！所以我们需要重新创建骨骼对几何体的作用：

1.硬路线

你需要带一个THREE.Box3。
遍历模型的每个几何点
将骨骼变换应用于每个点（已完成 here - 但在 a-frame 1.0.4 中不可用）
展开 THREE.Box3

2。简单的路线
在研究这个问题时，我创建了一个效用函数 THREE.Box3Utils.fromSkinnedMesh(mesh, box3); - box3 将在调用该函数时 成为模型的边界框 。该函数是 this repo 的一部分。它用于 this example.

AFrame：向当前对象添加新的 Object3D 时的位置偏移单位

AFrame: position offset units when adding new Object3D to the current one

javascript

aframe