In an attempt to obtain a bounding box for an obj-model in A-frame, I came across two helpful links on stackoverflow that I will reference here: How to get bounding box information from a 3D object in A-frame? Any way to get a bounding box from a three.js Object3D? Despite trying the code snippets provided in those links,
AFRAME.registerComponent('bounding-box', {
init: function(){
var el = this.el;
var obj = el.getObject3D('mesh');
console.log(obj);
var bbox = new THREE.Box3().setFromObject(obj);
console.log(bbox.min, bbox.max);
}
})
I received "undefined" from console.log(obj);, so I attempted the approach mentioned in one of the links,
AFRAME.registerComponent('bounding-box', {
init: function(){
var el = this.el;
console.log(el);
el.setAttribute('obj-model', {obj: 'obj5/1026/1026outside.obj'});
var obj = el.getObject3D('mesh');
console.log(obj);
var bbox = new THREE.Box3().setFromObject(obj);
console.log(bbox.min, bbox.max);
}
})
However, I still didn't achieve the desired outcome. Sometimes placing the code just before the closing tag worked and displayed the correct bounding box information.
<script>
var el = document.querySelector('#b-model');
console.log(el);
var obj = el.getObject3D('mesh');
console.log(obj);
var bbox = new THREE.Box3().setFromObject(obj);
console.log(bbox.min, bbox.max);
</script>
</body>
I suspect it has something to do with the loading sequence issue, but I am struggling to comprehend the discussion in this post:
How to load 3D object at runtime in A-frame?
I have tried various methods similar to the ones mentioned above without success. Perhaps my use of el.setAttribute is incorrect? I also attempted using three.objLoader as suggested by Felix, yet I encountered the same problem. I understand that registering a component ensures it only executes after the entity is initialized, which leaves me puzzled. Can someone provide guidance on how to accomplish this task by registering a component rather than using standalone JavaScript at the end? Thank you in advance!