我一直在尝试制作一个应用程序,该应用程序可以使用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”,其中一个太大,则框架检查器中显示的中心会混乱。
  • 当我使用属性值旋转模型时,枢轴将关闭。 我尝试设置轮换但没有运气。

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

#1楼 票数:0

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

  ask by sidd translate from so

未解决问题?本站智能推荐:

1回复

Aframe-reactgltf2模型已加载但为空

我正在Aframe-react应用程序中加载gltf2模型,在检查器中该模型看起来已加载但显示为空。 .gltf 1.0,.gltf 2.0和.glb格式会发生这种情况。 它们在在线模型查看器中看起来不错,但在Aframe React应用中却没有显示。 加载模型 和 渲染发生在
1回复

Aframe如何在加载GLTF模型后重置默认比例

我正在尝试制作一个应用程序,它以 GLTF 格式从 Google poly 添加模型。 我遇到了一些模型在添加到场景中时非常大的问题,我通过使用边界框最大值和最小值计算它们的大小并设置缩放量来解决这个问题。 现在,当我打开检查器并拖动以缩放对象时,将对象添加到场景后,即使进行少量拖动,对象也会变得非
3回复

Aframe:模型大小

当使用模型作为实体的来源时,比如 gltf,有没有办法知道原始大小? 由于scale属性适用于相对大小,因此将模型拟合到我们想要的大小似乎是一个尝试。 我尝试使用模型网格的geometry.getComputingBox()但它返回 null。 想知道是否有可用的组件可以让我们以绝对方式指定比例。
1回复

在运行时在Aframe中加载3D对象时如何访问网格?

运行时在Aframe中加载3D对象时,如何访问网格信息? 我已经加载了 3D 模型: 以下是我尝试获取网格信息的方式: 当我这样做时,我看到targetObj已加载,但是,网格信息是undefined 。
3回复

Aframe.js:有人可以给我一个示例来添加模型加载事件吗?

描述: 您好,我希望在Aframe中创建一个加载屏幕。 我在下面找到了关于对象加载的页面,但是我不知道如何使用它。 https://aframe.io/docs/0.8.0/core/asset-management-system.html#lt-a-asset-item-gt
1回复

Aframe模型的面孔未显示

我已将obj加载到框架中,但无法正确显示该面孔。 在Blender中,模型看起来正确,而在Windows 3DBuilder中,模型看起来正确。 就像在这篇文章( A-Frame .obj模型显示但坏了 )中一样,我试图将Three.js材料设置为双面。 不知道我实现的代码是否错误,或者这
1回复

Aframe/三个适合屏幕-计算缩放

我想在三/A帧中缩放相机,以便图像适合屏幕。 这是我正在使用的代码: 我已经到了需要计算缩放的部分,以便对象适合屏幕,即如果它的横向适合宽度,如果它适合高度的纵向。 我以为这是答案,但事实并非如此。 那是计算相机位置而不是缩放值。 我被困在你如何计算缩放值上。 有什么线索吗?
1回复

如何在一个框架中加载.glb模型?

我试图使用gltf-model组件在a-frame中加载.glb模型,但是我得到以下错误; components:gltf-model:warn Unexpected token g in JSON at position 0 基于这里的文档和这里的讨论,我相信我正确地做到了这一点。