Reputation: 207
I was able to use the OBB.js in three.js examples to obtain center, halfSize, and rotation values. How do we calculate 8 corners of bounding box and draw the box around the object if we know the center, halfSize, and rotation matrix as follows:
{
center: Vector3
x: 4.453294992446899
y: 7.885950803756714
z: 0.4816467687487602
halfSize: Vector3
x: 0.19511961936950684
y: 0.2595798969268799
z: 0.34599775820970535
rotation: Matrix3
elements: Array(9)
0: 1
1: 0
2: 0
3: 0
4: 1
5: 0
6: 0
7: 0
8: 1
}
Upvotes: 1
Views: 1388
Reputation: 17576
Something like this:
body{
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 5, 20);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper());
let halfSize = new THREE.Vector3( 0.19511961936950684, 0.2595798969268799, 0.34599775820970535);
let rotMat = new THREE.Matrix3().identity();
let rot = new THREE.Matrix4().identity().setFromMatrix3(rotMat);
let g = new THREE.SphereGeometry(1, 36, 18);
g.scale(halfSize.x, halfSize.y, halfSize.z);
let obj = new THREE.Mesh(g, new THREE.MeshNormalMaterial());
obj.position.set( 4.453294992446899, 7.885950803756714, 0.4816467687487602);
obj.rotation.setFromRotationMatrix(rot);
obj.updateMatrixWorld();
scene.add(obj);
let gH = new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3(1, 1, 1),
new THREE.Vector3(1, 1, -1),
new THREE.Vector3(1, -1, -1),
new THREE.Vector3(1, -1, 1),
new THREE.Vector3(-1, 1, 1),
new THREE.Vector3(-1, 1, -1),
new THREE.Vector3(-1, -1, -1),
new THREE.Vector3(-1, -1, 1)
]);
gH.setIndex([
0, 1, 1, 2, 2, 3, 3, 0,
4, 5, 5, 6, 6, 7, 7, 4,
0, 4, 1, 5, 2, 6, 3, 7
])
let mH = new THREE.LineBasicMaterial({color: "yellow"});
let oH = new THREE.LineSegments(gH, mH);
oH.scale.copy(halfSize);
oH.position.copy(obj.position);
oH.rotation.setFromRotationMatrix(rot);
scene.add(oH);
renderer.setAnimationLoop( _ => {
renderer.render(scene, camera);
});
</script>
Upvotes: 1