要在网页中加载和展示 GLB 模型文件，可以使用 Three.js 库，它是一个强大的 WebGL 库，支持多种 3D 模型格式，包括 GLB/GLTF。下面是一个完整的实现方案，包含模型加载、渲染和交互功能。 实现流程说明 准备工作 引入 Three.js 库及其 GLTF 加载器、轨道控制器等扩展 准备 HTML 结构，包括模型展示区、控制面板和信息展示区

实现流程说明

1. 准备工作

   • 引入Three.js库及其GLTF加载器、轨道控制器等扩展
   • 准备HTML结构，包括模型展示区、控制面板和信息展示区

2. 核心实现步骤

   • 初始化Three.js环境：创建场景、相机、渲染器和光源
   • 模型加载功能：使用GLTFLoader加载GLB模型文件
   • 模型处理：自动居中模型并调整相机位置以完整显示
   • 交互控制：通过OrbitControls实现旋转、缩放、平移等操作
   • 附加功能：实现自动旋转、线框模式、背景颜色调整等

3. 关键技术点

   • GLB模型加载：Three.js的GLTFLoader专门处理glTF/GLB格式
   • 模型定位：使用Box3计算模型边界并自动居中
   • 交互控制：OrbitControls提供直观的3D交互方式
   • 响应式设计：监听窗口大小变化，自动调整渲染尺寸

使用方法

1. 直接使用示例模型：点击"加载示例模型"区域的按钮
2. 上传本地模型：通过"上传GLB模型"区域选择本地的.glb或.gltf文件
3. 交互操作：
   • 左键拖动：旋转模型
   • 滚轮：缩放模型
   • 右键拖动：平移视图
   • 控制面板可实现自动旋转、重置视图等功能

这个实现支持大多数标准GLB模型，包含完整的错误处理和用户反馈，适合作为3D模型查看器的基础，可以根据需求进一步扩展功能。