源碼地址：

鏈接：https://pan.baidu.com/s/1TLr47VCMqqU7ALAqLuoKzQ?

提取碼：erk2

1、旋轉動畫requestAnimationFrame周期渲染

（1）、使用setTimeout() 函數(shù)旋轉物體

此時打開瀏覽器，就可以看到一直在旋轉的立方體。

（2）使用requestAnimationFrame()方法旋轉立方體

此時打開瀏覽器可以看到一直在旋轉的立方體：

2、three.js設置物體透明度和添加輔助坐標系

瀏覽器中可以看到透明物體和哪個輔助坐標系。

3、模型對象克隆復制

（1）模型克隆

注意問題：模型克隆可以使用for循環(huán)或者clone()方法：

此時打瀏覽器就可以看到被克隆的對象了

（2）、模型復制

打開瀏覽器就可以看到復制好的模型了——》

4、Three.js創(chuàng)建紋理貼圖和canvas畫布

（1）three.js創(chuàng)建紋理貼圖

打開瀏覽器可以看到平面上就有一個紋理貼圖了——》

（2）three.js通過canvas畫布添加文字信息——》

5、Three.js相機自適應渲染

（1）正投影相機自適應

打開瀏覽器訪問此頁面，移動瀏覽器窗口的時候，內容會自適應——》

（2）透視投影相機自適應

6、Three.js精靈模型對象

首先打開three.js官網，然后點擊文檔——》在搜索里面輸入sprite，然后點擊那個鏈接查看文檔——》

注意問題：精靈模型只需要設置材質，不需要設置幾何體。渲染效果，無論相機如何讓變化，始終平行于矩形區(qū)域（那個面始終面向屏幕）。

7、three.js粒子系統(tǒng)案例

（1）PM2.5可視化

瀏覽器顯示結果：

（2）精靈模型實現(xiàn)樹林效果

打開瀏覽器，就可以看到很多很多樹木了。

（3）下雨效果模擬

瀏覽器效果：

8、three.js動畫相關

（1）Three.js實現(xiàn)點擊按鈕開始和暫停動畫

此時點擊暫?；蛘呃^續(xù)就可以控制動畫運動。

（2）按鈕設置時間點

點擊一次時間遞增，那個動畫就會往前面移一個動作。

（3）、滾動條拖動

效果——》

9、three.js加載obj和mtl文件

（1）three.js加載obj文件

（2）three.js加載obj和mtl