Aframe auto scale and auto centering loaded models

Question

I have been trying to make an app that takes models from google poly and puts them onto the scene in an iframe.

The initial problem was that models were too large or small so an optimum way was suggested to me by the aframe community which worked fine for a while but gave errors when scaling and rotation was being changed.

Here is the component I am using to make sure that models are properly scaled.

AFRAME.registerComponent('autoscale', {schema: {type: 'number', default: 1},
    init: function () {
        this.scale();this.el.addEventListener('object3dset', () => this.scale());},scale: function () {
        const el = this.el;
        const span = this.data;
        const mesh = el.getObject3D('mesh');
        if (!mesh) return;
        const bbox = new THREE.Box3().setFromObject(mesh);
        const scale = span / bbox.getSize().length();
        var sx = this.el.getAttribute('scale').x;
        var sy = this.el.getAttribute('scale').y;
        var sz = this.el.getAttribute('scale').z;

        var rx = this.el.getAttribute('rotation').x * (Math.PI / 180);
        var ry = this.el.getAttribute('rotation').y * (Math.PI / 180);
        var rz = this.el.getAttribute('rotation').z * (Math.PI / 180);
        mesh.rotation.set(rx,ry,rz);
        mesh.scale.set(scale*sx, scale*sy, scale*sz);

        var a = new THREE.Box3().setFromObject(this.el.object3D);
        var cx = (a.min.x + a.max.x)/2;
        var cy = (a.min.y + a.max.y)/2;
        var cz = (a.min.z + a.max.z)/2;
        var posx = this.el.object3D.position.x;
        var posy = this.el.object3D.position.y;
        var posz = this.el.object3D.position.z;
        console.log("boundingBox xyz: x: "+cx+", y: "+cy+" z: "+cz);
        console.log("box position xyz: x: "+posx+", y: "+posy+" z: "+posz);
        var translateX = posx - cx;
        var translateY = posy - cy;
        var translateZ = posz - cz;
        this.el.object3DMap.mesh.translateX(translateX/sx);
        this.el.object3DMap.mesh.translateY(translateY/sy);
        this.el.object3DMap.mesh.translateZ(translateZ/sz);
    }
});

There are 2 issues with the above approach:

When I scale the model from their attribute value like this: scale="2 10 2" with one being too large the center that is shown in the frame inspector messes up.
When I rotate model using attribute values the pivot goes off. I tried setting the rotation but no luck.

Any help will be appreciated on the code above.

ngokevin ngokevin · Accepted Answer · 2018-03-30T20:56:32

I think maybe you want to build a transformation matrix with the transformation order you want (maybe scale then rotate then position or something?). THREE.js: Can you force a different order of operations for three.js?

Aframe auto scale and auto centering loaded models

1 Answers