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

Question

我导入了一个房屋模型作为.gltf。我想从这所房子中检索地板对象并将其转换为自己的 a 框架实体，以便以后可以引用它。我需要引用它以告诉 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)
})
}
});

这是帧传送控制实体：

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

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

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

编辑

查宁floor.setObject3D("Object3D", child)floor.setObject3D("mesh", child)修复了传送碰撞实体的问题。

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

我在 a 框架文档中尝试了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混音时，#floor不存在。由于我在文档中没有看到任何"刷新"方法，因此我可以想到两种处理此问题的方法：

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>