首页手记产品经理：你能不能在网页里实现裸眼3D

产品经理：你能不能在网页里实现裸眼3D

标签：

Html5 JavaScript

前言

大家都很喜闻乐见工程师与产品经理的相爱相杀。

这次产品经理让我调研一下在网页里实现裸眼3D

这是故意为难我把？

搞什么调研影响我摸鱼

现在的我想拿枪打他

拿弓箭射他

点火烧他

诶，如果我在3D场景中刻意加上一些框框，会不会看上去更立体呢？

方案一：造个框框，再打破它

现在我们用一个非常简单的立方体来试试看

立体感是稍微提升一点，但就这？那怕是交不了差的…

不过，大家发挥一下想象力，框框可以不全是直的，这个B站防遮挡弹幕是不是也让你产生了些裸眼3D的效果呢？

方案二：人脸识别

不行，谁都不能耽误我摸鱼。此时我又想起另一个方案，是不是可以通过摄像头实时检测人脸在摄像头画面中的位置来模拟裸眼3D呢。我找到了tracking.js，这是一款在浏览器中可以实时进行人脸检测的库。

https://github.com/eduardolundgren/tracking.js

var tracker = new tracking.ObjectTracker('face');
  tracker.setInitialScale(4);
  tracker.setStepSize(2);
  tracker.setEdgesDensity(0.1);

  tracking.track('#video', tracker, { camera: true });

  tracker.on('track', function(event) {
    context.clearRect(0, 0, canvas.width, canvas.height);

    event.data.forEach(function(rect) {
      context.strokeStyle = '#a64ceb';
      context.strokeRect(rect.x, rect.y, rect.width, rect.height);
      context.font = '11px Helvetica';
      context.fillStyle = "#fff";
      context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
      context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
    });
  });

我们可以看到，画面中呈现了人脸在摄像头视角画布中的坐标，我们拿这个坐标可以怎么玩呢？

接着把它接到threejs中，我们仍然拿这个立方体来试试看

实际体验还有点意思，但录屏的感受不太明显，请自行下载demo源码试试看吧

方案三：陀螺仪

W3C标准APIDeviceOrientation，用于检测移动设备的旋转方向和加速度。通过这个API，我们可以获取到三个基础属性：

alpha（设备平放时，水平旋转的角度）
beta（设备平放时，绕横向X轴旋转的角度）
gamma（设备平放时，绕纵向Y轴旋转的角度）

这个API的使用非常简单，通过给window添加一个监听

function capture_orientation (event) { 
    var alpha = event.alpha; 
    var beta = event.beta; 
    var gamma = event.gamma; 
    console.log('Orientation - Alpha: '+alpha+', Beta: '+beta+', Gamma: '+gamma); 
}

window.addEventListener('deviceorientation', capture_orientation, false);

现在我们把这个加入到咱们的立方体演示中，在加入的过程中，这里需要注意的是，在IOS设备上，这个API需要主动申请用户权限。

window.DeviceOrientationEvent.requestPermission()
    .then(state => {
        switch (state) {
            case "granted":
                //在这里建立监听
                window.addEventListener('deviceorientation', capture_orientation, false);
                break;
            case "denied":
                alert("你拒绝了使用陀螺仪");
                break;
            case "prompt":
                alert("其他行为");
                break;
        }
});

这返回的是一个promise，所以你也可以这么写

var permissionState = await window.DeviceOrientationEvent.requestPermission();
if(permissionState=="granted")window.addEventListener('deviceorientation', capture_orientation, false);