学习Three.js--简介+几何体
一、Three.js 简介
1.1 什么是 Three.js
Three.js 是一款基于原生 WebGL 封装的轻量级 JavaScript 3D 图形库，它对 WebGL 底层复杂的图形学逻辑做了高度封装，让开发者无需掌握 WebGL/着色器/线性代数知识，仅通过原生 JS 语法，就能在浏览器中轻松创建高性能的 3D 场景、模型、动画与交互效果。
1.2 核心价值
- 原生 WebGL 开发门槛极高，需要手动处理顶点着色器、片元着色器、矩阵变换等底层细节；
- Three.js 屏蔽所有底层复杂度，提供了语义化的 API，专注于「3D 业务实现」而非「图形学底层」；
- 核心能力：浏览器端纯前端实现 3D 可视化，适用于 3D 产品展示、元宇宙场景、数据可视化、小游戏、建筑漫游等场景。
1.3 前置学习要求
必备：HTML + CSS + JavaScript 基础（ES6 语法即可） 无需：不用懂 WebGL、不用会 3D 建模软件、不用懂线性代数，Three.js 内置所有所需工具
1.4 核心坐标系规则（必记）
Three.js 遵循 右手坐标系，贯穿所有开发环节，所有几何体/物体的位置/尺寸都基于此：
- X 轴 → 水平向右
- Y 轴 → 垂直向上
- Z 轴 → 垂直屏幕向外（相机默认看向 -Z 轴方向）
二、Three.js 三大核心基石（缺一不可，重中之重）
任何一个完整的 Three.js 3D 可视化效果，必须由「场景 + 相机 + 渲染器」三大核心组件构成，三者是 3D 世界的基础，没有例外，全部掌握才能看到最终的 3D 画面。
2.1 场景 (Scene) - 3D世界的「容器/舞台」
核心概念
THREE.Scene() 是一个无视觉形态的容器，可以理解成「3D世界的舞台」，所有的几何体、光源、相机、粒子、模型等3D内容，都需要添加到场景中才能被管理和渲染。
创建语法
// 创建空的3D场景
const scene = new THREE.Scene();
核心特性
- 场景本身不可见，仅做「收纳」作用；
- 支持通过
scene.add(物体/光源)方法，向场景中添加任意3D元素； - 支持通过
scene.remove(物体)方法，移除场景中的指定元素。
2.2 相机 (Camera) - 你的「眼睛/视角」
核心概念
THREE.Camera 是3D世界的观察者视角，你在浏览器屏幕上看到的所有内容，本质都是「相机拍摄到的场景画面」。相机决定了：从哪个角度、以什么视野、看场景中的哪些内容。
核心常用相机（99%开发场景只用这一种）
Three.js 有多种相机，新手只需掌握「透视相机 PerspectiveCamera」，该相机模拟人眼的视觉效果，实现「近大远小」的透视关系，最符合人类的视觉习惯。
创建语法
// 透视相机：new THREE.PerspectiveCamera(视角, 宽高比, 近裁剪面, 远裁剪面)
const camera = new THREE.PerspectiveCamera(
75, // 视角(fov)：越大看到范围越广，画面越广，默认75
window.innerWidth / window.innerHeight, // 宽高比：与画布一致，避免画面拉伸
0.1, // 近裁剪面：距离相机小于该值的物体，不渲染（看不见）
1000 // 远裁剪面：距离相机大于该值的物体，不渲染（看不见）
);
关键注意点
相机默认创建在场景的坐标原点 (0,0,0)，与场景中心重合，此时会和几何体重叠导致看不到内容，必须手动调整相机位置，最常用的就是调整Z轴让相机「后退」：
// 相机沿Z轴向后移动5个单位，即可看到场景中心的物体
camera.position.z = 5;
2.3 渲染器 (Renderer) - 画画的「画家/画笔」
核心概念
THREE.WebGLRenderer 是 Three.js 的渲染核心，可以理解成「画家」，核心作用是：把相机视角下的场景内容，绘制到浏览器的 canvas 画布上，我们最终在页面上看到的 3D 画面，就是渲染器的工作成果。
创建语法
// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染画布的尺寸（与浏览器窗口一致，满屏显示）
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器生成的canvas画布，添加到HTML页面中
document.body.appendChild(renderer.domElement);
2.4 三大核心联动 - 核心渲染指令（必写）
拥有了「场景、相机、渲染器」后，三者唯一的联动核心语法，就是执行渲染命令，让渲染器把相机拍到的场景，绘制到画布上，这行代码是所有Three.js程序的核心：
// 语法：渲染器.render(要渲染的场景, 拍摄的相机)
renderer.render(scene, camera);
三、物体形状：几何体 Geometry（完整参数+用法+注意事项）
场景是空的容器，想要在3D世界中看到「物体」，首先需要定义物体的形状和结构 → 这就是「几何体 Geometry」。 Three.js 中所有可见的3D物体，都是 「几何体(形状) + 材质(外观)」 的组合体，几何体是物体的「骨架」，材质是物体的「皮肤」。
核心通用说明
- 所有几何体的长度单位：无物理单位，默认约定
1 单位 = 1 米，可根据业务自定义缩放； - 所有几何体的分段数（Segments）：参数值越大，几何体的面数越多、顶点越多，形状越平滑，但会增加性能开销；常规开发中
16~64足够，远距离物体可使用更小的值； - 所有角度相关参数：单位均为 弧度，而非角度（
Math.PI = 180°、Math.PI*2 = 360°）； - 搭配规则：如果几何体使用
MeshStandardMaterial/MeshPhongMaterial/MeshLambertMaterial等受光照影响的材质，必须给场景添加光源，否则物体会显示纯黑色。
3.1 长方体 | BoxGeometry
用途
创建立方体、长方体，是最基础、最常用的几何体，适用于盒子、方块、墙体、立方体模型等场景。
创建语法
// 最简创建（长宽高为2的正方体）
const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
// 完整语法
const boxGeometry = new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);
完整参数说明
| 参数 | 类型 | 默认值 | 核心说明 |
|---|---|---|---|
width | number | 1 | X 轴方向的尺寸（长方体的长） |
height | number | 1 | Y 轴方向的尺寸（长方体的高） |
depth | number | 1 | Z 轴方向的尺寸（长方体的深） |
widthSegments | integer | 1 | X 轴方向的分段数，值越大侧面越平滑 |
heightSegments | integer | 1 | Y 轴方向的分段数 |
depthSegments | integer | 1 | Z 轴方向的分段数 |
3.2 圆柱体 | CylinderGeometry
用途
创建标准圆柱、空心圆柱、圆锥台、管道；特殊用法：顶部半径设为0 → 圆锥、扫描角度小于360° → 弧形柱体。
创建语法
// 最简创建（上下半径1，高度2，圆周32段的标准圆柱）
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
// 完整语法
const cylinderGeometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength);
完整参数说明
| 参数 | 类型 | 默认值 | 核心说明 |
|---|---|---|---|
radiusTop | number | 1 | 圆柱体顶部圆形的半径 |
radiusBottom | number | 1 | 圆柱体底部圆形的半径 |
height | number | 1 | 圆柱体的高度（沿 Y 轴方向） |
radialSegments | integer | 32 | 圆周方向的分段数，值越大圆柱越圆滑 |
heightSegments | integer | 1 | 高度方向的分段数 |
openEnded | boolean | false | 是否无顶面/底面，true=空心柱体，false=封闭柱体 |
thetaStart | number(弧度) | 0 | 圆柱的起始绘制角度（从X轴正方向开始） |
thetaLength | number(弧度) | Math.PI*2 | 圆柱的扫描角度，2π=完整圆柱，小于则为扇形柱 |
3.3 球体 | SphereGeometry
用途
创建完整球体、半球、球壳、扇形球等，适用于球体模型、星球、圆球物体等场景。
创建语法
// 最简创建（半径1，32段经线、32段纬线的标准球体）
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
// 完整语法
const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength);
完整参数说明
| 参数 | 类型 | 默认值 | 核心说明 |
|---|---|---|---|
radius | number | 1 | 球体的半径大小 |
widthSegments | integer | 32 | 经线数量（绕Y轴方向），值越大球体越圆滑 |
heightSegments | integer | 16 | 纬线数量（从上到下），值越大球体越圆滑 |
phiStart | number(弧度) | 0 | 球体的起始极角（从顶部开始） |
phiLength | number(弧度) | Math.PI | 球体的极角跨度，π=完整球体上下，小于则为部分球 |
thetaStart | number(弧度) | 0 | 球体的起始方位角 |
thetaLength | number(弧度) | Math.PI*2 | 球体的方位角跨度，2π=完整一圈，小于则为扇形球 |
优化建议：
widthSegments ≥32 、heightSegments ≥16即可保证球体足够平滑。
3.4 圆锥体 | ConeGeometry
用途
创建标准圆锥、扇形圆锥、尖塔等模型，是圆柱体的特殊形态（顶部半径固定为0）。
创建语法
// 最简创建（底面半径1，高度2，圆周32段的标准圆锥）
const coneGeometry = new THREE.ConeGeometry(1, 2, 32);
// 完整语法
const coneGeometry = new THREE.ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength);
完整参数说明
| 参数 | 类型 | 默认值 | 核心说明 |
|---|---|---|---|
radius | number | 1 | 圆锥底面圆形的半径 |
height | number | 1 | 圆锥的高度（沿 Y 轴方向） |
radialSegments | integer | 32 | 底面圆周的分段数，值越大圆锥越圆滑 |
heightSegments | integer | 1 | 圆锥高度方向的分段数 |
openEnded | boolean | false | 是否无底面，true=只有侧面，false=封闭底面 |
thetaStart | number(弧度) | 0 | 圆锥的起始绘制角度 |
thetaLength | number(弧度) | Math.PI*2 | 圆锥的扫描角度，小于2π则为扇形圆锥 |
3.5 矩形平面 | PlaneGeometry
用途
创建无限薄的2D矩形平面，适用于地面、墙面、UI背景、广告牌、画布等场景，是使用率极高的几何体。
创建语法
// 最简创建（宽5、高5的矩形平面）
const planeGeometry = new THREE.PlaneGeometry(5, 5);
// 完整语法
const planeGeometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
完整参数说明
| 参数 | 类型 | 默认值 | 核心说明 |
|---|---|---|---|
width | number | 1 | 平面在 X 轴方向的宽度 |
height | number | 1 | 平面在 Y 轴方向的高度 |
widthSegments | integer | 1 | X 轴方向的分段数 |
heightSegments | integer | 1 | Y 轴方向的分段数 |
关键注意：PlaneGeometry 默认创建在 XY 平面，如果需要作为「地面」使用，需要绕X轴旋转90°，让平面落在 XZ 平面：
plane.rotation.x = -Math.PI / 2;
3.6 圆形平面 | CircleGeometry
用途
创建无限薄的2D圆形平面、扇形平面，适用于圆形地面、雷达图、指示器、饼图、圆形画布等场景。
创建语法
// 最简创建（半径1，32段的标准圆形）
const circleGeometry = new THREE.CircleGeometry(1, 32);
// 完整语法
const circleGeometry = new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);
完整参数说明
| 参数 | 类型 | 默认值 | 核心说明 |
|---|---|---|---|
radius | number | 1 | 圆形的半径大小 |
segments | integer | 32 | 圆周方向的分段数，值越大圆形越圆滑 |
thetaStart | number(弧度) | 0 | 圆形的起始绘制角度（从X轴正方向开始） |
thetaLength | number(弧度) | Math.PI*2 | 圆形的扫描角度，2π=完整圆，小于则为扇形 |
实用技巧：创建1/4圆 →
thetaLength: Math.PI/2，创建半圆 →thetaLength: Math.PI。
四、几何体通用优化与注意事项（必看）
- 分段数的取舍：分段数越高，几何体越平滑，但顶点和面数越多，渲染性能越低。常规开发中，16~64段 是「平滑度+性能」的最优解，无需盲目调高；
- 几何体复用：同一个几何体可以绑定多个不同材质，生成多个不同外观的物体，能极大节省内存，优化性能；
- 尺寸缩放：如果需要调整已创建几何体的大小，无需重新创建，可通过物体的
scale属性缩放：cube.scale.set(2,2,2)（长宽深放大2倍）； - 位置调整：几何体默认创建在场景坐标原点，可通过物体的
position属性调整位置：cube.position.set(1,2,3)。
核心知识总结（必记）
- Three.js 三大核心：Scene(场景) + Camera(相机) + Renderer(渲染器)，缺一不可，核心渲染指令：
renderer.render(scene, camera)； - 右手坐标系规则：X右、Y上、Z外，相机默认看向 -Z 轴，必须调整相机位置才能看到物体；
- 几何体是物体的「骨架」，材质是物体的「皮肤」，二者组合成可渲染的3D物体；
- 所有几何体的分段数是「平滑度」和「性能」的权衡，按需设置即可；
- 受光照影响的材质，必须搭配光源使用，否则物体全黑。
