【ThreeJs】【辅助库】Three.js 项目里常见的辅助库组合

原创于 2025-09-11 11:00:39 发布 · 395 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ThreeJs #dat #stats #cannon-es

ThreeJs 专栏收录该内容

14 篇文章

订阅专栏

🎨 Three.js 常用辅助库全解析

在使用 Three.js 开发 3D 项目时，光靠核心库往往不够。为了更好地 调试参数、监控性能、实现物理效果，我们通常会借助一些辅助库。本文总结了 Three.js 开发中最常用的几个库，帮你快速构建一个高效的开发环境。

1. 📦 核心库

three

作用：3D 场景搭建的核心，提供 场景、相机、灯光、几何体、材质、纹理、动画、渲染器 等。
安装：
```
npm install three
```
在 Vue3 中使用：
```
import * as THREE from 'three'
```

@types/three

作用：为 Three.js 提供 TypeScript 类型声明，支持类型推导、IDE 提示。
安装：
```
npm install -D @types/three
```

2. 🎛️ 参数调试面板

dat.gui

作用：快速创建 UI 控制面板，动态调节参数。
典型用法：
- 调整灯光颜色、强度
- 改变模型的位置、缩放、旋转
- 切换渲染模式

示例：

import * as dat from 'dat.gui'

const gui = new dat.GUI()
const params = { rotationSpeed: 0.01, color: '#ff0000' }

gui.add(params, 'rotationSpeed', 0, 0.1)
gui.addColor(params, 'color')

@types/dat.gui
dat.gui 的 TS 类型声明，写 Vue3 + TS 项目必备。

3. 📊 性能监控

stats.js

作用：性能监控工具，显示 FPS、渲染耗时，方便排查性能瓶颈。
典型用法：
- 优化几何体数量
- 检查是否因为阴影/光照过多导致掉帧

示例：

import Stats from 'stats.js'

const stats = new Stats()
stats.showPanel(0) // 0: FPS
document.body.appendChild(stats.dom)

function animate() {
  stats.begin()
  // ...渲染逻辑
  stats.end()
  requestAnimationFrame(animate)
}
animate()

@types/stats.js
stats.js 的 TS 类型声明。

4. ⚡ 物理引擎

cannon-es

作用：为 Three.js 场景提供 物理效果（重力、碰撞、摩擦力、刚体等）。
为什么要用：Three.js 本身没有物理引擎，物体不会自动掉落、碰撞，必须用外部库实现。
典型用法：
- 模拟小球下落并与地面反弹
- 盒子堆叠、推倒效果
- 射击/拖拽物体的惯性

示例：

import * as CANNON from 'cannon-es'

// 创建物理世界
const world = new CANNON.World()
world.gravity.set(0, -9.82, 0)

// 刚体小球
const sphereBody = new CANNON.Body({
  mass: 1,
  shape: new CANNON.Sphere(1)
})
sphereBody.position.set(0, 10, 0)
world.addBody(sphereBody)

5. 🔧 推荐组合

在 Vue3 + Three.js 项目里，它们经常组合使用：

库名	作用	场景
three	核心功能	必备
@types/three	TS 类型支持	写 Vue3 + TS 项目必备
dat.gui	参数调试	实时调节参数
stats.js	性能监控	查看 FPS，优化性能
cannon-es	物理引擎	碰撞、重力、刚体

6. 🚀 实战目录建议

在 Vue3 项目中可以这样组织：

src/
├── three/
│   ├── core/            # Three.js 核心初始化（场景、相机、渲染器）
│   ├── controls/        # OrbitControls、dat.gui 配置
│   ├── physics/         # cannon-es 物理相关
│   ├── utils/           # 工具函数（坐标轴、网格辅助等）
│   └── stats/           # 性能监控