產品經理：你能不能在網頁裏實現裸眼3D

本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！

你們好，我是大帥老猿，不知道本身是什麼系程序猿，但可不能夠加入火箭隊呢？若是喜歡個人文章，能夠關注➕點贊，與我一同修行吧～

---

前言

最近產品經理在掘金社區的出鏡率很高，看來你們都很喜聞樂見工程師與產品經理的相愛相殺。

此次他讓我調研一下在網頁裏實現裸眼3D

這是故意爲難我把？

搞什麼調研影響我摸魚

如今的我想拿槍打他

拿弓箭射他

點火燒他

誒，若是我在3D場景中刻意加上一些框框，會不會看上去更立體呢？

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

如今咱們用一個很是簡單的立方體來試試看

立體感是稍微提高一點，但就這？那怕是交不了差的...

不過，你們發揮一下想象力，框框能夠不全是直的，這個B站防遮擋彈幕是否是也讓你產生了些裸眼3D的效果呢？

方案二：人臉識別

不行，誰都不能耽誤我摸魚。

此時我又想起另外一個方案，是否是能夠經過攝像頭實時檢測人臉在攝像頭畫面中的位置來模擬裸眼3D呢。我找到了tracking.js，這是一款在瀏覽器中能夠實時進行人臉檢測的庫。

github.com/eduardolund…

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);
複製代碼

還有幾點須要注意的事，requestPermission必須由用戶主動發起，也就是必須在用戶的行爲事件裏觸發，好比「click」，還有就是這個API的調用，必須在HTTPS協議訪問的網頁裏使用。

結語

至此，我能想到在網頁裏實現裸眼3D的幾種方法都在此文中，你還能想到別的方法嗎？請在評論區一塊兒討論吧。

本文配套視頻教程

Demo源碼

微信搜索並關注「大帥老猿」，回覆「eye3d」得到本文中的示例代碼