Skip to main content

Three.js

基础​

Three.js 是基于原生 WebGL 封装的 3D 图形库，用于在 Web 浏览器中创建交互式的 3D 场景和图形效果

Three.js 默认使用右手坐标系，因为这是 OpenGL 默认的坐标系

/**
 * 创建场景对象Scene
 */
const scene = new THREE.Scene();
/**
 * 创建网格模型
 */
const geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
const material = new THREE.MeshLambertMaterial({
  color: 0x0000ff,
}); // 材质对象Material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
/**
 * 光源设置
 */
// 点光源
const point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
// 环境光
const ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
/**
 * 相机设置
 */
const width = window.innerWidth; // 窗口宽度
const height = window.innerHeight; // 窗口高度
const k = width / height; // 窗口宽高比
const s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
// 创建相机对象
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); // 设置相机位置
camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)
/**
 * 创建渲染器对象
 */
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); // 设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
document.body.appendChild(renderer.domElement); // body元素中插入canvas对象
// 执行渲染操作
function render() {
  renderer.render(scene, camera); // 执行渲染操作
  // mesh.rotateY(0.01); // 每次绕y轴旋转0.01弧度
  requestAnimationFrame(render); // 请求再次执行渲染函数render
}
render();

从示例代码分别引出几个基础概念：

场景(Scene)​

场景是光源、相机和所有物体的父容器。场景的中心是点(0,0,0)，也称为坐标系的原点

相机(Camera)​

决定场景中哪些角度的内容会显示出来。有多种相机，比如基于透视投影的镜头（PerspectiveCamera），会模拟人的视觉效果（近大远小），从某个投射中心将物体投射到单一投影面上，是最常使用的投影模式

渲染器(Render)​

将相机中的内容渲染到浏览器页面中。在 web 应用里，场景会被渲染器渲染到一个 canvas 上

场景中的物体​

基类图形只有点、线、三角形，其余图形都是在此基础上通过顶点着色算法组合而成

几何体(Geometry)​

就是几何体，例如 球体、立方体、平面、以及自定义的几何体(汽车、动物、房子、数目等)

几何变换​

  • 平移
  • 缩放
  • 旋转

材质(Material)​

几何体的表面属性，包括颜色、光亮程度

纹理(Texture)​

可以简单理解为一种图像或一张图片，用来包裹到几何体表面上。一个材质可以引用一个或多个纹理

网格(Mesh)​

一种特定的几何体和材质绘制出的一个特定的几何体系。网格对象 Mesh 是 3D 计算机图形学中最常见的可见对象，包含几何体和材质。其他对象有 Point/Line/Group

光源(Light)​

不同种类的光

阴影​

动画​

  • AnimationMixer
  • tweenjs

模型加载​

  • gltf。现阶段主流的模型类型，可以包含模型、动画、几何图形、材质、灯光、相机，甚至整个场景。glb 是它的二进制形式，体积小很多，所以实际项目中尽量使用这种，不过 gltf 可读性更好
  • obj。一种简单的文本格式，可以包含顶点位置、纹理坐标、法线等信息。缺点是文件体积相对较大，不支持二进制数据存储，无法存储动画数据，不支持材质和纹理的自定义属性等
  • mtl。是一种与 obj 配套使用的材质文件格式。mtl 文件包含了 obj 模型所需的材质属性信息，如颜色、纹理、法线贴图等。在加载 obj 模型时，可以通过 OBJLoader 来解析 obj 文件，并通过 MTLLoader 来加载对应的 mtl 文件。MTLLoader 会解析 mtl 文件中的信息，并将材质属性应用于对应的物体

应用性能​

性能监测​

优化​

  • 合并几何体
  • 实例化
  • 视椎剔除
  • 模型优化，比如模型压缩等
  • 离屏渲染
  • ...

webGL​

如果使用 Three.js 开发项目需要自定义着色器的时候，肯定也是要学习底层 WebGL 和着色器 GLSL 知识

渲染管线​

  • 视椎体

着色器​

进阶​

粒子效果​

比如点云