aframe - 获取模型的边界框或中心

Question

我想知道是否有办法为通过 3dio.js 插入的模型获取边界框，或者计算它们的中心点？我希望将它们集中在原点上。

下图显示了两个相对于红框指示的场景原点的模型。

Answer 1

您可以像这样访问 3d.io 实体的 three.js 对象：

var threeElem = document.getElementById("custom-id").components['io3d-data3d'].data3dView.threeParent

然后你可以使用 three.js 中的原生边界框：

var bbox = new THREE.Box3().setFromObject(threeElem)

就像这样，您可以获得可用于确定原点的最小/最大界限。

我希望这能回答你的问题。让我知道！

编辑：对于家具，它可能是

var threeElem = document.getElementById("custom-id").components['io3d-furniture'].data3dView.threeParent

Answer 2

根据 Madlaina 的回答。我需要确保模型之前已加载

addModelToScene(type) {

    let scene = document.querySelector('a-scene');
    let model = document.createElement('a-entity');
    model.setAttribute('io3d-data3d', getModelKey(type) )    

    model.addEventListener('model-loaded', () => {
        // Access the three.js object of the 3d.io
        let threeElem = model.components['io3d-data3d'].data3dView.threeParent

        // create the bounding box
        let bbox = new THREE.Box3().setFromObject(threeElem)

        // Calculate the center-point offsets from the max and min points
        const offsetX = (bbox.max.x + bbox.min.x)/2
        const offsetY = (bbox.max.y + bbox.min.y)/2
        const offsetZ = (bbox.max.z + bbox.min.z)/2

        // apply the offset
        model.setAttribute('position', {x:-offsetX,y:-offsetY, z:-offsetZ})
    } );

    scene.appendChild(model);    

}

结果：