????本系列文章主要是記錄了學(xué)習(xí)Threejs過(guò)程中的心得和總結(jié)，相關(guān)課程為法國(guó)一位老師的視頻課Threejs-journey，鏈接和地址在文后，供大家一起學(xué)習(xí)參考~

搭建界面和畫(huà)板容器

首先建立一個(gè)html文件，其中`<canvas class="webgl"></canvas>`主要作為接收threejs的畫(huà)板; ?并引入threejs庫(kù)（有條件推薦使用Webpack引入）

基本流程

Threejs一個(gè)簡(jiǎn)單的場(chǎng)景分為以下的幾個(gè)步驟：

- 01-創(chuàng)建場(chǎng)景 scene

- 02-創(chuàng)建物體對(duì)象

?????- 幾何

?????- 材料

?????- 網(wǎng)格

- 03-添加相機(jī) camera

- 04-進(jìn)行渲染

01-創(chuàng)建場(chǎng)景Scene

場(chǎng)景是最為基本和重要的部分，相當(dāng)于是一個(gè)舞臺(tái)，不論是創(chuàng)建的對(duì)象還是相機(jī)、坐標(biāo)系，都需要添加到場(chǎng)景當(dāng)中。

02-創(chuàng)建物體對(duì)象

創(chuàng)建的物體對(duì)象主要通過(guò) 創(chuàng)建幾何、施加材料、劃分網(wǎng)格；

最后網(wǎng)格對(duì)象mesh，理解為是這個(gè)物體實(shí)例，針對(duì)mesh對(duì)象可以進(jìn)行變形、位置移動(dòng)、旋轉(zhuǎn)等操作

創(chuàng)建物體對(duì)象分為兩種方式，一種是分開(kāi)設(shè)定，另一種是合在一起創(chuàng)建, 但建立邏輯都是一樣的：

03-創(chuàng)建相機(jī)

相機(jī)充當(dāng)?shù)氖怯^察者的角色，通過(guò)設(shè)定相機(jī)視角，來(lái)改變觀察的角度、位置等

04-進(jìn)行渲染

當(dāng)設(shè)定好場(chǎng)景之后需要對(duì)場(chǎng)景在`html`中的`canvas`等標(biāo)簽中進(jìn)行渲染（渲染可以自定義標(biāo)簽，也可以通過(guò)threejs渲染器自行創(chuàng)建標(biāo)簽渲染）

經(jīng)過(guò)渲染之后，就可以查看到建立的畫(huà)板和物體對(duì)象了。

下一篇將介紹物體對(duì)象的操作方法~

參考資料

Threejs-journey課程鏈接

Threejs官網(wǎng)：

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

github地址：

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