在 THREE.js 中绘制 3d 边界框

Question

我能够使用 three.js 示例中的 OBB.js 来获取中心、halfSize 和旋转值。如果我们知道中心、halfSize 和旋转矩阵，我们如何计算边界框的8 个角 并在对象周围绘制框，如下所示：

{
 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
}

Answer 1

像这样：

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.126.0/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/three@0.126.0/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>

在 THREE.js 中绘制 3d 边界框

Draw 3d Bounding Box in THREE.js

javascript

3d

bounding-box

orientation

three.js