Three.js的基础概念

Shirley~~2026-10-09 15:23

一个js的API,通过调用浏览器的GPU显卡来画图的接口，来实现丰富的交互过程。但是因为webGL的语法很复杂，需要会很多的GLSL(着色器语言)，所以通过对这些语言封装的three.js应用而生。

一个开源的轻量级的3D库。Three.js 封装了 WebGL 的细节，提供了一个简单易用的对象模型。通过 Three.js，你可以使用直观的"场景"、"相机"、"材质"和"灯光"等概念来构建 3D 应用，而无需从零开始编写复杂的图形渲染管线。

这一节学习世界坐标系和局部坐标系，世界坐标是唯一的、不可变的；局部坐标是每个 Object3D 自己的一套，随父级一起动。两者之间靠 matrixWorld 转换。

复制代码

const axesHelper = new THREE.AxesHelper(30);//参数表示坐标轴线条的长度
scene.add(axesHelper);

复制代码

// 参数 1：网格的总长度和宽度
// 参数 2：网格细分的次数（每边有多少个格子）
const gridHelper = new THREE.GridHelper(50, 10);
scene.add(gridHelper);

通过光照、光照的方向以及灯光布局的方式让物体变的有阴影。

光源包含环境光和平行光。环境光是一种均匀照亮场景中的光，用来充当补光的作用；平行光模拟的是主光源，用来使物体产生阴影和棱角的。

环境光：

复制代码

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(ambientLight)

平面光

复制代码

const sunLight = new THREE.DirectionalLight(0xffffff, 1.5);
sunLight.position.set(10,20,10)
sunLight.castShadow = true;