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

谁在黄金彼岸
14 阅读3分钟

一、基础流程

  1. 安装依赖
npm install three stats.js
  1. 准备资源
    • 将GLB模型（如LittlestTokyo.glb）放入 public/models/gltf/ 目录。
    • 将draco解码器相关文件放入 public/jsm/libs/draco/gltf/ 目录。
  2. 在Vue组件中引入three.js及相关插件
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'
  1. 初始化渲染器、场景、相机、控制器
    • 创建WebGLRenderer并设置全屏。
    • 创建Scene，设置背景色和环境贴图。
    • 创建PerspectiveCamera，初始位置可设为(0,0,5)。
    • 创建OrbitControls，设置target为(0,0,0)。
  2. 加载GLB模型
    • 使用GLTFLoader和DRACOLoader加载模型。
    • 加载完成后，自动居中模型，并根据包围盒调整相机距离，保证模型完整显示。
  3. 渲染循环
    • 使用renderer.setAnimationLoop或requestAnimationFrame进行渲染。
  4. 窗口自适应
    • 监听resize事件，动态调整渲染器和相机参数。

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

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

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

  • 原因：模型原始尺寸与场景不匹配。
  • 修复：
    • 通过包围盒最大边自动缩放：
model.scale.multiplyScalar(2.0 / maxDim)

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

3. 材质或法线问题

  • 原因：部分模型材质只渲染正面，或法线方向异常。
  • 修复：
    • 遍历所有Mesh，设置material.side = THREE.DoubleSide。
model.traverse(child => {
  if ((child as THREE.Mesh).isMesh) {
    (child as THREE.Mesh).material.side = THREE.DoubleSide
  }
})

4. 灯光不足

  • 原因：模型材质依赖光照，场景中无光源或光照太弱。
  • 修复：
    • 添加环境光和方向光：
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：
html, body, #container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

三、调试建议

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

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

avatar
文章
阅读
粉丝