Is there a way to convert an object’s length into X coordinates? I have a box that dynamically expands with multiple spheres arranged from left to right inside it. My goal is to position the box in the center of the screen so that its center aligns perfectly with the center of the screen. The challenge lies in adjusting the positioning of the box so that it appears at the center minus half of its own width.
Below is the code snippet used to create the box:
for (var i=1; i<=hudItems.length; i++) {
var newSphere = document.createElement('a-sphere');
newSphere.setAttribute('radius', .3);
newSphere.setAttribute('color', '#ECECEC');
newSphere.setAttribute('position', hudEl.object3D.position.x+offSet*i + ' 0 0');
newSphere.setAttribute('src', hudItems[i-1].thumb);
newSphere.setAttribute('translate', "0 0.6 0");
var sphereShadow = document.createElement('a-image');
sphereShadow.setAttribute('src', 'radial-shadow-3.png');
sphereShadow.setAttribute('rotation', '-90 0 0');
sphereShadow.setAttribute('scale', '1 1 1');
newSphere.appendChild(sphereShadow);
hudEl.appendChild(newSphere);
}
sceneEl.appendChild(hudEl);
I am open to any suggestions or tips on how to achieve this desired positioning effect, as there might be a well-known method that I am not familiar with yet.
** Update:
I attempted using BoundingBoxHelper - previously, I was creating the HUD element like this:
<a-entity id="hud" position="-1.2 -2.39 -7" pivot="0 0 0" ></a-entity>
I even tried the following to visualize it:
<a-entity id="hud" geometry="primitive: box; width:2; height:2; depth:2" position="0 0 -7" pivot="0 0 0" ></a-entity>
The additional code I implemented is as follows:
var hud = document.querySelector('#hud').object3D;
var helper = new THREE.BoundingBoxHelper(hud, 0xff0000);
helper.update();
var min = helper.box.min;
var max = helper.box.max;
var newX = -1 * (max.x - min.x) / 2;
hudEl.setAttribute('position', newX + ' 0 0')
However, I encountered this error message: Uncaught TypeError: Cannot read property 'updateMatrixWorld' of undefined at $.setFromObject (three.js:7891) at $n.update (three.js:41123) at c. (tvr2.html:103) at TWEEN.Tween.update (tween.js:399)
It's worth noting that when I log the helper after creation/update, it does not contain a "box" property or geometry.