Getting the bounding box or centers of models

Question

I was wondering if there was a way to obtain the bounding box for the models that are inserted via 3dio.js, or otherwise calculate their center points? I'm looking to center them on the origin.

The images below show two models relative to the scene origin indicated by the red box.

Answer 1

You can access the three.js object of the 3d.io entity like this:

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

Then you can use the native bounding box from three.js:

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

Like that you get the min/max bounds which you can use to determine the origin.

I hope that answers your question. Let me know!

Edit: for furniture it would probably be

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

Answer 2

Based on Madlaina's answer. I needed to ensure the model was loaded before

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

}

The result: