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

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

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

three.js

  • 是一款webGL框架

  • 以简单、直观的方式封装了3D图形编程中常用的对象

  • 是一个跨浏览器的脚本,使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。

1、创建场景

三要素:场景 + 相机 + 渲染器

构造函数

  1. PerspectiveCamera(fov, aspect, near, far) - 透视摄像机
  2. Fov – 在显示器上看到的场景的范围,它的值是角度单位
  3. Aspect – 物体的宽除以它的高的值,比如电影图像比例
  4. Near – 近截面
  5. Far – 远截面

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

照相机类型:正投影相机OrthographicCamera 和 透视投影相机PerspectiveCamera
透视投影相机模式一般用来模拟人眼所看到的景象,它是3D场景的渲染中使用得最普遍的投影模式

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

2、渲染器

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

3、添加正方体

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

之所以要移动相机,是因为默认情况下,任何物体和相机的坐标都是(0,0,0)点。那也就是说,我们的相机和物体(网格)位置重合了,我们的相机在物体的里面。
而默认情况下,材质使用单面渲染。当相机在物体里面时,你可能什么都看不到,我们移动相机是为了将相机移出物体内部。

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

4、设置灯光

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

5、让正方体转动起来

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

requestAnimationFrame它是浏览器自带的一个函数,跟three.js没有关系。他的用法和setTimeout非常类似,都是过几秒去执行回调函数。
setTimeout可以自己设定间隔的时间,而requestAnimationFrame是1/60的时间间隔去执行。当页面被切换requestAnimationFrame会被暂停调用,以节省性能和电量的消耗。

通过陀螺仪实现3d效果

W3C标准APIDeviceOrientation,用于检测移动设备的旋转方向和加速度。
IOS设备上,这个API需要主动申请用户权限。

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

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>

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

部署:Vercel

  • Github授权给vercel后,可以达到最优雅的发布体验,只需将代码轻轻一推,项目就自动更新部署了。

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

上一篇:算法——回溯算法 (Back Tracking) (转)


下一篇:《 Real-Time Compressive Tracking 》的个人理解