CODEWITHSUNDEEP
aframe3d.io
Neil Docherty
Neil Docherty

Reputation: 555

Getting the bounding box or centers of models

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.

3D-Model_1

3D-Model_2

Upvotes: 6

Views: 1163

Answers (2)

Neil Docherty
Neil Docherty

Reputation: 555

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: Centered 3D-Model

Upvotes: 4

Madlaina Kalunder
Madlaina Kalunder

Reputation: 661

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

Upvotes: 6

Related Questions