I have successfully imported a house model in .gltf format. I am now trying to extract the floor object from this model and turn it into its own individual a-frame entity for future reference. This is necessary so that I can designate the floor as the collisionEntity for the aframe-teleport-controls component.
Here is the current progress of my project:
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)
})
}
});
This is how the aframe-teleport-controls entity looks like:
<a-mixin id="teleport" teleport-controls="type: parabolic; cameraRig: #cameraRig; collisionEntities: #floor "></a-mixin>
The floor object has been successfully created (although not yet positioned correctly), but the teleport controls are unable to recognize it as a collision entity.
How can I specify the 3D model's floor as the collision entity?
EDIT
Changing
floor.setObject3D("Object3D", child)floor.setObject3D("mesh", child) resolved the issue with the teleport collision entities.
However, the newly created floor object does not have the correct rotation.
I attempted to use the function
entityEl.object3D.getWorldRotation();I also experimented with
THREE.SceneUtils.detach(child, parent, scene);Below is the updated code snippet:
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)
})
}
});