js渲染3D库之Three.js

Posted on Views:

Three.js是一个基于JavaScript的3D图形库，主要用于在浏览器中创建和渲染3D场景。它底层通常使用WebGL，也可以使用WebGPU相关能力，让开发者不需要直接处理大量底层图形API细节。

1.Three.js能做什么？

  • 3D产品展示

    • 汽车
    • 手机
    • 家具
    • 珠宝
    • 工业设备

  • 3D可视化

    • 地球
    • 地图
    • 建筑模型
    • 数据可视化
    • 数字孪生

  • 游戏

    • 3D小游戏
    • 第一人称场景
    • 物理交互

  • 网页特效

    • 3D背景
    • 粒子效果
    • 鼠标交互
    • 滚动驱动动画

  • VR/AR

    • 配合WebXR实现浏览器中的XR体验

  • 3D编辑器

    • 在线模型查看器
    • 场景编辑器
    • 产品配置器

2.Three.js核心概念

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Scene
  │
  ├── Camera
  │
  ├── Light
  │
  └── Mesh
       ├── Geometry
       └── Material
       
Renderer
  │
  ↓
Canvas

Scene（场景）

可以理解为一个3D世界。模型、灯光、摄像机相关对象最终都会组织在Scene中。

Camera（摄像机）

决定你从什么角度观察3D世界。可以把它理解成现实世界里的摄影机。

Geometry（几何体）

定义物体的形状和顶点数据。Three.js内置了很多Geometry：

Material（材质）

决定物体看起来是什么样子。

可以控制：

  • 颜色
  • 金属感
  • 粗糙度
  • 透明度
  • 贴图
  • 发光等

Mesh（网格）

Light（灯光）

3D场景通常需要灯光才能产生真实的视觉效果。

常见灯光：

1
2
3
4
5
AmbientLight
DirectionalLight
PointLight
SpotLight
HemisphereLight

Renderer（渲染器）

负责把3D场景真正画到网页上。