I'm currently utilizing Threebox (a Mapbox plugin for Three.js) to display 3D models of buildings on a map, with the capability of interacting with the buildings by rotating and moving them. The rotation feature is accessible through a floating ring that allows users to rotate the model when clicked.
For instance:
https://i.sstatic.net/rBJuN.png
However, since my models vary in size, I am facing difficulty in determining the appropriate measurements for the ring. Ideally, it should look like the following:
https://i.sstatic.net/7gqQD.png
To create the ring, I use a TorusGeometry from Three.js as shown below:
let geom = new THREE.TorusGeometry(ringSize, 0.01, 30, 25);
let material = new THREE.MeshStandardMaterial({ color: 0xffc000, side: THREE.DoubleSide });
let mesh = new THREE.Mesh(geom, material);
My challenge lies in calculating the required ring size beforehand. For example, the radius for the house model mentioned earlier is approximately 0.7, but I am unable to accurately derive this value from any properties of the models. I suspect this discrepancy may be due to Threebox using meters as units while Three.js has its own map units.
The object provides some properties which I can access:
unitsPerMeter: 0.0600151
modelSize: { x: 13.9649, y: 11.4863, z: 9.1121 }
boundingBox.box: {
"min": {
"x": -6.982465131993985,
"y": -5.743162421920143,
"z": 0
},
"max": {
"x": 6.982465131993986,
"y": 5.743162421920143,
"z": 9.112114852394226
}
}
center: {
"x": -1.4794275894722282,
"y": 0.5752914186997362,
"z": -0.0858976981176804
}
I have attempted the following methods to determine the size:
let box = new THREE.Box3().setFromObject(object);
let size = new THREE.Vector3();
box.getSize(size);
console.log(size)
However, the output does not provide much assistance as the dimensions are significantly larger than the desired length of 0.7.