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.

Madlaina Kalunder · Accepted Answer · 2017-08-16T05:34:36.173

6

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

edited Aug 16 '17 at 05:34

answered Aug 15 '17 at 14:30

Madlaina Kalunder

641
6
16

1

Works great thanks, just a little typo. `Data3dView` should be `data3dView`. This was what I had originally tried but it didn't work because the model hadn't yet loaded. This was addressed by listening for the `model-loaded` event. I'll add my solution as an answer below for reference for others. – Neil Docherty Aug 16 '17 at 05:23

score 4 · Answer 2 · answered Aug 16 '17 at 05:43

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:

cool! glad it works! and I'll definitely use this in my own drafts — Madlaina Kalunder, Aug 19 '17 at 20:04

Getting the bounding box or centers of models

2 Answers2