three.js入门知识点整理

---

一、资料库

提示：这里是所有学习资料的汇总

1. three.js基础

Three.js（官方document）: https://threejs.org/
threejs网上文档（简易版）：http://ourjs.com/wiki/view/three/1.%E4%BA%86%E8%A7%A3threejs
小破站的threejs学习视频(bruno simon)：threejs-learning-video

2. threejs和react框架结合：

React官网：https://reactjs.org/docs/getting-started.html
React Three Fiber（文档/电子书）: https://github.com/pmndrs/react-three-fiber
Drei（文档/电子书）: https://github.com/pmndrs/drei
react框架学习视频（尚硅谷）：基础知识

3. 案例视频

（youtube）基础版：建一个cube
（youtube）chair 涉及引入gltf模型：online-chair
(youtube) Earth：global-warming-earth
（youtube）Working with Shaders using React Three Fiber：案例

4. 3D模型下载

sketchfab：https://sketchfab.com/feed

---

二、名词概念

1. threejs：

three.js就是使用javascript 来写3D程序。

2. react框架：

React 使创建交互式 UI 变得轻而易举。克服原生js三大缺点：1. 操作繁杂，效率低；2. 重绘重排； 3. 没有组件化。

3. drei：

为 @react-three/fiber.准备的许多有用的帮助和齐全的功能。drei的索引中有很多工具，例如图形、摄像机等，我们不需要创建，而是直接引用材料。这使得代码效率快很多。

三、vscode安装插件

1. GLSL Lint

此扩展支持 GLS（OpenGL 着色语言）的 linting。它使用 OpenGL 和 OpenGL ES 着色器验证器 glslangValidator 支持的每个着色器类型都可以进行验证。

2. glsl-literal

为 JavaScript 模板文本添加 GLSL 语法突出显示。

3.glTF Tools

方便再vscode中查看gltf文件。