通过tracking.js、陀螺仪和 three.js 实现裸眼3d效果

2023-11-03 11:13:22

体验地址：https://threejs-3d.vercel.app/

github地址：https://github.com/lqq-code/threejs-3d

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标准APIDeviceOrientation，用于检测移动设备的旋转方向和加速度。
在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后，可以达到最优雅的发布体验，只需将代码轻轻一推，项目就自动更新部署了。