10、three.js其它相关案例（粒子系统、模型克隆、obj文件加载等）

源码地址：

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

提取码：erk2

1、旋转动画requestAnimationFrame周期渲染

（1）、使用setTimeout() 函数旋转物体

此时打开浏览器，就可以看到一直在旋转的立方体。

（2）使用requestAnimationFrame()方法旋转立方体

此时打开浏览器可以看到一直在旋转的立方体：

2、three.js设置物体透明度和添加辅助坐标系

浏览器中可以看到透明物体和哪个辅助坐标系。

3、模型对象克隆复制

（1）模型克隆

注意问题：模型克隆可以使用for循环或者clone()方法：

此时打浏览器就可以看到被克隆的对象了

（2）、模型复制

打开浏览器就可以看到复制好的模型了——》

4、Three.js创建纹理贴图和canvas画布

（1）three.js创建纹理贴图

打开浏览器可以看到平面上就有一个纹理贴图了——》

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

5、Three.js相机自适应渲染

（1）正投影相机自适应

打开浏览器访问此页面，移动浏览器窗口的时候，内容会自适应——》

（2）透视投影相机自适应

6、Three.js精灵模型对象

首先打开three.js官网，然后点击文档——》在搜索里面输入sprite，然后点击那个链接查看文档——》

注意问题：精灵模型只需要设置材质，不需要设置几何体。渲染效果，无论相机如何让变化，始终平行于矩形区域（那个面始终面向屏幕）。

7、three.js粒子系统案例

（1）PM2.5可视化

浏览器显示结果：

（2）精灵模型实现树林效果

打开浏览器，就可以看到很多很多树木了。

（3）下雨效果模拟

浏览器效果：

8、three.js动画相关

（1）Three.js实现点击按钮开始和暂停动画

此时点击暂停或者继续就可以控制动画运动。

（2）按钮设置时间点

点击一次时间递增，那个动画就会往前面移一个动作。

（3）、滚动条拖动

效果——》

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

（1）three.js加载obj文件

（2）three.js加载obj和mtl