学前预备

1. 官方文档/镜像

官方链接: https://threejs.org

官网镜像(v151): https://threejs-docs.netlify.app

2. 为什么要学 threejs

threejs

• 为了更高薪职业
• 因为对3D感兴趣
• 为35岁以后做准备 (职业规划)
• 大势所趋, 应用前景广泛, 智慧城市项目, 企业安全服务3D监控, 仓储服务等等
• 技术转型: 摆脱传统web开发, 进入3d世界, 图形学方向
• 更多就业方向: 建模师 (3dsMax, Maya, ZBrush, C4D, UE5, Blender, ...), 动画, 游戏, 特效师(影视飓风), 元宇宙, web3.0...

3. threejs 优势

封装了场景, 灯光, 阴影, 材质, 纹理, 三维算法等, 降低开发难度, 官网提供了几十种开发案例, 方便调试, 不用直接使用webgl语法进行开发. 但某些场景比如自定义着色器还是要用到 webgl.

总的来说就是使用threejs 可以轻松地实现网页3D应用

大家不用担心3D很复杂学不会

WebGL

WebGL（全写Web Graphics Library）是种3D绘图协议, 通过webgl 可以调用 OpenGL ES, OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三维图形 API 的子集, OpenGL 是渲染2D、3D矢量图形硬件的软件接口, 本质上是3D图形和模型库。Three.js是基于 webGL 封装的易于使用且轻量级的3D库

4. 课程重点

• 场景 包含了场景中所有的对象, 包括灯光, 网格, 物体, 流体等

• 相机 用于观察3D场景中的物体

• 几何体 Geometry 物体的形状

• 网格 基于三角形创造物体的类对象

• 材质 描述物体的材料

• 纹理 物体表面花纹贴图

• 动画

• 阴影

• 雾

• 物理仿真

• ...

5. 最简单的使用案例

直接用HTML来开发

1). cdn: bootcdn 搜索three

2). 从官网(threejs.org 或 github)下载到本地, 通过 script src 属性引入 build 文件夹中的文件

6. 搭建 react 开发环境

• 下载安装 nodejs 16.x

// 下载
http://nodejs.cn/download/

• 使用 umijs 搭建空白项目

npx create-umi@latest

• 克隆gitee项目 (vite)

git clone https://gitee.com/keman5/threejs-lessons