Aframe自动缩放和自动居中加载模型

Question

我一直在尝试制作一个应用程序，该应用程序可以使用Google Poly的模型并将其放在iframe中。

最初的问题是模型太大或太小，因此aframe社区向我建议了一种最佳方法，该方法可以工作一段时间，但在更改缩放比例和旋转度时会出错。

这是我用来确保模型正确缩放的组件。

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

上面的方法有两个问题：

• 当我从属性值像这样缩放模型时：scale =“ 2 10 2”，其中一个太大，则框架检查器中显示的中心会混乱。
• 当我使用属性值旋转模型时，枢轴将关闭。 我尝试设置轮换但没有运气。

任何帮助将不胜感激上面的代码。

Answer 1

我认为您可能想使用所需的转换顺序来构建转换矩阵（可能是缩放然后旋转然后定位还是其他？）。 THREE.js：您可以对Three.js强制执行不同的操作顺序吗？