javascript - 从 A 形框架中导入的模型创建对象

Question

我将房屋模型导入为 .gltf。我想从这座房子中检索地板对象并将其转换为自己的框架实体，以便我稍后可以引用它。我需要引用它才能告诉 aframe-teleport-controls组件应该使用地板作为collisionEntity。

这是我到目前为止所拥有的:

AFRAME.registerComponent('floor-test', {
    schema: {
        floorname: {type: 'string', default: "floor"},
    },
    init: function () {
        this.el.addEventListener("model-loaded", (e) => {
            let child = this.el.object3D.getObjectByName(this.data.floorname, true);

            let floor = document.createElement("a-entity");
            floor.setObject3D("Object3D", child)
            floor.setAttribute("id", "floor")
            this.el.appendChild(floor)
        })
    }
});

这是 aframe-teleport-controls 实体:

<a-mixin id="teleport" teleport-controls="type: parabolic; cameraRig: #cameraRig; collisionEntities: #floor "></a-mixin>

正在创建对象(尚未处于正确位置)，但传送控件无法将其识别为碰撞实体。

如何将 3D 模型中的地板设置为碰撞实体？

编辑

将 floor.setObject3D("Object3D", child) 更改为 floor.setObject3D("mesh", child) 修复了传送碰撞实体的问题。

但是正在创建的地板对象没有正确的旋转。

我尝试了 a-frame docs 中的函数 entityEl.object3D.getWorldRotation(); ，但它返回“0 0 0”而不是“0 180 0”。

我还尝试使用THREE.SceneUtils.detach(child,parent, scene);但子对象没有出现在场景中。

这是当前代码

AFRAME.registerComponent('floor-test', {
    schema: {
        floorname: {type: 'string', default: "floor"},
    },
    init: function () {
        this.el.addEventListener("model-loaded", (e)=> {
            let parent = this.el.object3D;
            let child = parent.getObjectByName(this.data.floorname, true);

            let floor = document.createElement("a-entity");
            floor.setObject3D("mesh", child)
            floor.setAttribute("id", "floor")
            floor.setAttribute("rotation", child.getWorldRotation())

            this.el.appendChild(floor)
        })
    }
});

Answer 1

我认为时间安排有问题。当teleport-controls附加到teleport mixin时，#floor不存在。因为我在 documentation 中没有看到任何“刷新”方法，我可以想到两种处理这个问题的方法:

1) 如果世界是非程序化的，请在地板所在的位置添加一个隐形框，并将其设为您的#floor。

2)更合法一点，尝试在模型加载完成后添加teleport-controls:

this.el.addEventListener("model-loaded", (e) => {
        let child = this.el.object3D.getObjectByName(this.data.floorname, true);

        let floor = document.createElement("a-entity");
        floor.setObject3D("Object3D", child)
        floor.setAttribute("id", "floor")
        this.el.appendChild(floor)
        let teleportEntity = document.querySelector("#teleport");
        teleportEntity.setAtrribute("type", "parabolic");
        teleportEntity.setAttribute("cameraRig", "#cameraRig");
        teleportEntity.setAttribute("collisionEntities", "#floor");
    })

<a-mixin id="teleport"></a-mixin>