体验地址：threejs-3d.vercel.app/
github地址：github.com/lqq-code/th…
three.js
-
是一款webGL框架
-
以简单、直观的方式封装了3D图形编程中常用的对象
-
是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。
1、创建场景
三要素：场景 + 相机 + 渲染器
构造函数
- PerspectiveCamera(fov, aspect, near, far) - 透视摄像机
- Fov – 在显示器上看到的场景的范围，它的值是角度单位
- Aspect – 物体的宽除以它的高的值，比如电影图像比例
- Near – 近截面
- Far – 远截面
照相机类型：正投影相机
OrthographicCamera和 透视投影相机PerspectiveCamera透视投影相机模式一般用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式
2、渲染器
3、添加正方体
之所以要移动相机，是因为默认情况下，任何物体和相机的坐标都是(0,0,0)点。那也就是说，我们的相机和物体(网格)位置重合了，我们的相机在物体的里面。 而默认情况下，材质使用单面渲染。当相机在物体里面时，你可能什么都看不到，我们移动相机是为了将相机移出物体内部。
4、设置灯光
5、让正方体转动起来
requestAnimationFrame它是浏览器自带的一个函数，跟three.js没有关系。他的用法和setTimeout非常类似，都是过几秒去执行回调函数。 setTimeout可以自己设定间隔的时间，而requestAnimationFrame是1/60的时间间隔去执行。当页面被切换requestAnimationFrame会被暂停调用，以节省性能和电量的消耗。
通过陀螺仪实现3d效果
W3C标准API
DeviceOrientation，用于检测移动设备的旋转方向和加速度。 在IOS设备上，这个API需要主动申请用户权限。
Tips: 1）
requestPermission必须由用户主动发起，也就是必须在用户的行为事件里触发，比如click、touchend。 2）这个API的调用，必须在HTTPS协议访问的网页里使用。
通过人脸识别实现3d效果
tracking.js
- 一个独立的 JavaScript 库，主要实现了颜色和人（人脸、五官等）的跟踪检测。
- 可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发 JavaScript 事件，然后对人脸进行采集。
1、追踪器：对象追踪器
- face
- eye
- mouth
引入训练分类器
<script src="tracking.js/build/data/face.js"></script>
<script src="tracking.js/build/data/eye.js"></script>
<script src="tracking.js/build/data/mouth.js"></script>
部署：Vercel
- Github授权给vercel后，可以达到最优雅的发布体验，只需将代码轻轻一推，项目就自动更新部署了。
