Vue项目中引入three.js并加载GLB模型流程与常见问题

一、基础流程

安装依赖

bash 复制代码

npm install three stats.js

准备资源
- 将GLB模型（如LittlestTokyo.glb）放入 public/models/gltf/ 目录。
- 将draco解码器相关文件放入 public/jsm/libs/draco/gltf/ 目录。
在Vue组件中引入three.js及相关插件

typescript 复制代码

import * as THREE from 'three'
import Stats from 'stats.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

初始化渲染器、场景、相机、控制器
- 创建WebGLRenderer并设置全屏。
- 创建Scene，设置背景色和环境贴图。
- 创建PerspectiveCamera，初始位置可设为(0,0,5)。
- 创建OrbitControls，设置target为(0,0,0)。
加载GLB模型
- 使用GLTFLoader和DRACOLoader加载模型。
- 加载完成后，自动居中模型，并根据包围盒调整相机距离，保证模型完整显示。
渲染循环
- 使用renderer.setAnimationLoop或requestAnimationFrame进行渲染。
窗口自适应
- 监听resize事件，动态调整渲染器和相机参数。

二、模型导入成功但不显示的常见原因与修复方法

1. 模型实际位置偏离相机视野

原因：模型原点不在(0,0,0)，或相机距离过近/过远。
修复：
- 通过Box3().setFromObject(model)获取包围盒，getCenter(center)后用model.position.sub(center)将模型居中。
- 根据包围盒最大边自动设置相机距离：

javascript 复制代码

const maxDim = Math.max(size.x, size.y, size.z)
const fov = camera.fov * (Math.PI / 180)
let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2))
cameraZ *= 2.0 // 适当拉远
camera.position.set(0, 0, cameraZ)
camera.near = cameraZ / 100
camera.far = cameraZ * 100
camera.updateProjectionMatrix()
controls.target.set(0, 0, 0)
controls.update()

2. 模型scale过小或过大

原因：模型原始尺寸与场景不匹配。
修复：
- 通过包围盒最大边自动缩放：

javascript 复制代码

model.scale.multiplyScalar(2.0 / maxDim)

markdown 复制代码

- 或手动调整`model.scale.set(x, y, z)`。

3. 材质或法线问题

原因：部分模型材质只渲染正面，或法线方向异常。
修复：
- 遍历所有Mesh，设置material.side = THREE.DoubleSide。

javascript 复制代码

model.traverse(child => {
  if ((child as THREE.Mesh).isMesh) {
    (child as THREE.Mesh).material.side = THREE.DoubleSide
  }
})

4. 灯光不足

原因：模型材质依赖光照，场景中无光源或光照太弱。
修复：
- 添加环境光和方向光：

javascript 复制代码

scene.add(new THREE.AmbientLight(0xffffff, 1))
const dirLight = new THREE.DirectionalLight(0xffffff, 1)
dirLight.position.set(10, 10, 10)
scene.add(dirLight)

5. 资源路径错误

原因：GLB或draco解码器路径不对，导致加载失败。
修复：
- 检查public目录下资源路径，浏览器直接访问/models/gltf/xxx.glb和/jsm/libs/draco/gltf/xxx.js能否下载。
- 控制台有404报错时，需修正路径。

6. 动画未播放

原因：模型有动画但未正确启动。
修复：
- 判断gltf.animations.length > 0后，创建AnimationMixer并play()。

7. 渲染区域未全屏

原因：canvas或父容器样式未设置100vw/100vh。
修复：
- 设置如下CSS：

css 复制代码

html, body, #container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

三、调试建议

控制台打印model、box、center等信息，辅助定位问题。
逐步排查：先保证模型能显示，再优化缩放、相机、灯光等细节。
遇到问题多看浏览器控制台报错，尤其是404、TypeError等。

如遇特殊问题，建议先用three.js官方GLTF示例测试模型，确认模型本身无误后再集成到项目中。