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.艰难的道路

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

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