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: Can you force a different order of operations for three.js?