Obtaining a bounding box or model centers

Question

I was wondering if there is a way to get a bounding box for models inserted through 3dio.js, or else calculate their center points? I am looking to focus them on origin.

The figures below show two models relative to the beginning of the scene, indicated by a red box.

Answer 1

You can access the three.js object of the 3d.io object as follows:

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

Then you can use your own bounding rectangle from three.js:

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

This way you get min / max boundaries that you can use to determine the origin.

I hope that answers your question. Let me know!

: , ,

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

Answer 2

. ,

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

}

: