本系列文章主要是记录了学习Threejs过程中的心得和总结，相关课程为法国一位老师的视频课Threejs-journey，链接和地址在文后，供大家一起学习参考~

搭建界面和画板容器

首先建立一个html文件，其中`<canvas class="webgl"></canvas>`主要作为接收threejs的画板;  并引入threejs库（有条件推荐使用Webpack引入）

基本流程

Threejs一个简单的场景分为以下的几个步骤：

- 01-创建场景 scene

- 02-创建物体对象

     - 几何

     - 材料

     - 网格

- 03-添加相机 camera

- 04-进行渲染

01-创建场景Scene

场景是最为基本和重要的部分，相当于是一个舞台，不论是创建的对象还是相机、坐标系，都需要添加到场景当中。

02-创建物体对象

创建的物体对象主要通过 创建几何、施加材料、划分网格；

最后网格对象mesh，理解为是这个物体实例，针对mesh对象可以进行变形、位置移动、旋转等操作

创建物体对象分为两种方式，一种是分开设定，另一种是合在一起创建, 但建立逻辑都是一样的：

03-创建相机

相机充当的是观察者的角色，通过设定相机视角，来改变观察的角度、位置等

04-进行渲染

当设定好场景之后需要对场景在`html`中的`canvas`等标签中进行渲染（渲染可以自定义标签，也可以通过threejs渲染器自行创建标签渲染）

经过渲染之后，就可以查看到建立的画板和物体对象了。

下一篇将介绍物体对象的操作方法~

参考资料

Threejs-journey课程链接

Threejs官网：

https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

github地址：

 https://github.com/mrdoob/three.js/tree/master