📦 GLTFLoader 模型加载

学习如何加载和处理 3D 模型

⚠️ 注意：本示例使用程序化生成的模型演示 GLTFLoader 的使用方式。实际项目中，你需要加载真实的 .glb 或 .gltf 文件。

📊 模型信息

模型名称: 机器人

网格数量: 0

顶点数量: 0

包围盒大小: 0

🎮 操作说明

• 鼠标拖拽：旋转视角
• 鼠标滚轮：缩放
• 右键拖拽：平移
• GUI 面板：控制模型

💡 GLTFLoader 使用

// 创建加载器
const loader = new THREE.GLTFLoader();

// 加载模型
loader.load(
    'model.glb',
    (gltf) => {
        // 成功回调
        scene.add(gltf.scene);
    },
    (progress) => {
        // 进度回调
        const percent =
            (progress.loaded / progress.total) * 100;
        console.log(`进度: ${percent}%`);
    },
    (error) => {
        // 错误回调
        console.error('加载失败:', error);
    }
);
        

🔧 模型处理技巧

• 自动居中：计算包围盒中心
• 自动缩放：根据包围盒大小缩放
• 遍历处理：使用 traverse() 处理所有子对象
• 启用阴影：设置 castShadow 和 receiveShadow

📝 代码示例

// 自动居中和缩放
const box = new THREE.Box3()
    .setFromObject(model);
const center = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3());

// 居中
model.position.sub(center);

// 缩放到 2 单位
const maxDim = Math.max(size.x, size.y, size.z);
model.scale.setScalar(2 / maxDim);
        