ThreeJS将GLTF模型与边界框大小进行匹配

基础概念

ThreeJS 是一个用于在网页上创建和显示3D图形的JavaScript库。GLTF (GL Transmission Format) 是一种高效的3D模型传输格式，常用于Web上的3D内容展示。

边界框 (Bounding Box) 是一个包围3D模型的最小立方体，用于简化碰撞检测、视锥剔除等操作。

类型与应用场景

AABB (Axis-Aligned Bounding Box)：与坐标轴对齐的边界框，计算简单，适用于大多数静态场景。
OBB (Oriented Bounding Box)：方向性边界框，可以更紧密地贴合复杂形状的模型，适用于动态或变形物体。

应用场景包括但不限于：

游戏中的角色和道具管理。
虚拟现实和增强现实中的交互对象。
数据可视化中的3D图表和模型展示。

实现步骤与代码示例

以下是一个简单的ThreeJS示例，展示如何加载GLTF模型并调整其边界框大小以匹配模型：

// 引入ThreeJS库
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载GLTF模型
const loader = new GLTFLoader();
loader.load('path/to/your/model.glb', function(gltf) {
    const model = gltf.scene;

    // 计算模型的边界框
    const box = new THREE.Box3().setFromObject(model);
    const center = new THREE.Vector3();
    box.getCenter(center);

    // 调整模型位置使其边界框中心与原点对齐
    model.position.sub(center);

    // 缩放模型以匹配边界框大小
    const size = new THREE.Vector3();
    box.getSize(size);
    const maxDim = Math.max(size.x, size.y, size.z);
    model.scale.set(1 / maxDim, 1 / maxDim, 1 / maxDim);

    // 将模型添加到场景中
    scene.add(model);
});

// 设置相机位置
camera.position.z = 5;

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();