Math Obb

<!--
  说明：同一栋旋转过的建筑，用轴对齐包围盒与定向包围盒分别圈一次，体积差距一目了然
  核心逻辑：AABB 取 setFromObject，OBB 取几何体本地包围盒八个角点乘世界矩阵
  依赖：three.js 0.160.0、OrbitControls · jsDelivr CDN（ESM + importmap）
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定向包围盒</title>
<style>
  html,body{height:100%;margin:0;background:#0c1116}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:14px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600;font-variant-numeric:tabular-nums}
  .bar input[type=range]{width:150px;accent-color:#4f9ef8}
  .bar .sp{flex:1 1 auto}
  #stage{flex:1 1 auto;min-height:0;position:relative}
  #stage canvas{display:block}
  #hud{position:absolute;left:12px;bottom:12px;padding:8px 12px;border-radius:6px;
       background:rgba(13,19,26,.84);border:1px solid #223040;font-size:12px;line-height:1.8;
       color:#c8d2e0;pointer-events:none;font-variant-numeric:tabular-nums}
  #hud em{font-style:normal;color:#7fd1a6}
  #hud .aabb{color:#ffb86b}
  #hud .obb{color:#6fd3ff}
</style>
</head>
<body>
<div class="bar">
  <label>旋转 <input type="range" id="rot" min="0" max="90" step="1" value="38"></label>
  <span><b id="rotv">38</b> °</span>
  <span class="sp"></span>
  <span>拖拽旋转视角 · 橙色 AABB · 蓝色 OBB</span>
</div>
<div id="stage">
  <div id="hud">
    AABB 体积 <em class="aabb" id="va">—</em><br>
    OBB 体积 <em class="obb" id="vo">—</em><br>
    多算 <em id="extra">—</em>
  </div>
</div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  }
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const stage = document.getElementById('stage');
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(stage.clientWidth, stage.clientHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0c1116);

const camera = new THREE.PerspectiveCamera(42, stage.clientWidth / stage.clientHeight, 0.1, 200);
camera.position.set(14, 11, 15);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 2, 0);
controls.enableDamping = true;
controls.update();

scene.add(new THREE.HemisphereLight(0xbacfe8, 0x141a20, 1.5));
const sun = new THREE.DirectionalLight(0xffedd2, 2.1);
sun.position.set(-12, 18, 9);
scene.add(sun);

const grid = new THREE.GridHelper(40, 40, 0x1e2b39, 0x151f29);
scene.add(grid);

/* 长条形体块：尺寸不对称，旋转之后 AABB 才明显虚胖 */
const W = 5;
const H = 3;
const D = 9;
const geo = new THREE.BoxGeometry(W, H, D);
const building = new THREE.Mesh(
  geo,
  new THREE.MeshStandardMaterial({ color: 0x8899aa, roughness: 0.65, metalness: 0.15 })
);
building.position.y = H / 2;
scene.add(building);

/* 本地包围盒：几何体自身坐标系下的最小包围盒 */
geo.computeBoundingBox();
const localBox = geo.boundingBox.clone();

/* OBB：本地八个角点乘上世界矩阵即可，不必求特征向量（盒子本身是轴对齐的） */
const CORNERS = [
  [0, 0, 0], [1, 0, 0], [1, 0, 1], [0, 0, 1],
  [0, 1, 0], [1, 1, 0], [1, 1, 1], [0, 1, 1]
];
const EDGES = [
  [0, 1], [1, 2], [2, 3], [3, 0],
  [4, 5], [5, 6], [6, 7], [7, 4],
  [0, 4], [1, 5], [2, 6], [3, 7]
];

const obbGeo = new THREE.BufferGeometry();
obbGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(EDGES.length * 2 * 3), 3));
const obbLines = new THREE.LineSegments(
  obbGeo,
  new THREE.LineBasicMaterial({ color: 0x6fd3ff, transparent: true, opacity: 0.95 })
);
scene.add(obbLines);

const aabbBox = new THREE.Box3();
const aabbHelper = new THREE.Box3Helper(aabbBox, 0xffb86b);
scene.add(aabbHelper);

const v = new THREE.Vector3();

function updateBoxes() {
  building.updateMatrixWorld(true);

  aabbBox.setFromObject(building);
  aabbHelper.box.copy(aabbBox);

  const arr = obbGeo.attributes.position.array;
  const corners = CORNERS.map(function (c) {
    return new THREE.Vector3(
      c[0] ? localBox.max.x : localBox.min.x,
      c[1] ? localBox.max.y : localBox.min.y,
      c[2] ? localBox.max.z : localBox.min.z
    ).applyMatrix4(building.matrixWorld);
  });

  EDGES.forEach(function (e, i) {
    const a = corners[e[0]];
    const b = corners[e[1]];
    arr[i * 6] = a.x; arr[i * 6 + 1] = a.y; arr[i * 6 + 2] = a.z;
    arr[i * 6 + 3] = b.x; arr[i * 6 + 4] = b.y; arr[i * 6 + 5] = b.z;
  });
  obbGeo.attributes.position.needsUpdate = true;
  obbGeo.computeBoundingSphere();

  const aabbSize = aabbBox.getSize(v);
  const va = aabbSize.x * aabbSize.y * aabbSize.z;
  const vo = (localBox.max.x - localBox.min.x) *
             (localBox.max.y - localBox.min.y) *
             (localBox.max.z - localBox.min.z);

  document.getElementById('va').textContent = va.toFixed(1);
  document.getElementById('vo').textContent = vo.toFixed(1);
  document.getElementById('extra').textContent = ((va / vo - 1) * 100).toFixed(0) + ' %';
}

const rotEl = document.getElementById('rot');
const rotvEl = document.getElementById('rotv');
rotEl.addEventListener('input', function () {
  const deg = Number(rotEl.value);
  building.rotation.y = THREE.MathUtils.degToRad(deg);
  rotvEl.textContent = String(deg);
  updateBoxes();
});

building.rotation.y = THREE.MathUtils.degToRad(38);
updateBoxes();

renderer.setAnimationLoop(function () {
  controls.update();
  renderer.render(scene, camera);
});

window.addEventListener('resize', function () {
  const w = stage.clientWidth;
  const h = stage.clientHeight;
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  renderer.setSize(w, h);
});
</script>
</body>
</html>