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

简介: 最近产品经理在掘金社区的出镜率很高,看来大家都很喜闻乐见工程师与产品经理的相爱相杀。这次他让我调研一下在网页里实现裸眼3D这是故意为难我把?搞什么调研影响我摸鱼现在的我想拿枪打他拿弓箭射他点火烧他诶,如果我在3D场景中刻意加上一些框框,会不会看上去更立体呢?

方案一:造个框框,再打破它


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


image.png


image.png


立体感是稍微提升一点,但就这?那怕是交不了差的...


不过,大家发挥一下想象力,框框可以不全是直的,这个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);
    });
  });


image.png


我们可以看到,画面中呈现了人脸在摄像头视角画布中的坐标,有了这个坐标数据,我们就可以做很多事情了。


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


image.png


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


方案三:陀螺仪


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


  • alpha(设备平放时,水平旋转的角度)


image.png


  • beta(设备平放时,绕横向X轴旋转的角度)


image.png


  • gamma(设备平放时,绕纵向Y轴旋转的角度)


image.png


这个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的几种方法都在此文中,你还能想到别的方法吗?请在评论区一起讨论吧。


相关文章
|
移动开发 前端开发 JavaScript
前端工程师一般喜欢逛什么网站,都学哪些重要的内容?
作为前端开发,要学的技术栈真的很多,除了最基础的 HTML/CSS/JavaScript,还包括 HTML5、CSS3、ES6,还要学习目前流行的 JavaScript 框架
|
Web App开发 前端开发 iOS开发
|
Web App开发 前端开发 开发工具
网页设计师和网页前端开发我该选择哪一个
在互联网历史中,网页设计师和网页开发人员这两个不同的行业分工一直都扮演着不可或缺的角色。谁是主角,谁是配角的争论就如鸡和蛋谁先谁后的争论一样,喋喋不休却没有意义。
1532 0
《社交网站界面设计(原书第2版)》——2.11 提问
本节书摘来自华章计算机《社交网站界面设计(原书第2版)》一书中的第2章,第2.11节,作者:(美)克里斯蒂安·克鲁姆里什(Christian Crumlish),艾琳·马洛恩(Erin Malone)著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
982 0
|
Web App开发
金牌体验师探班360浏览器 图多乐趣更多
本文讲的是 :  金牌体验师探班360浏览器 图多乐趣更多  , 2015年10月16日,位于北京市朝阳区酒仙桥的360总部来了一批特殊的年轻人,由360手机浏览器主办的首届金牌体验师品牌开放日在这里举办,十余名由360手机浏览器团队从全国各地挑选的金牌体验师将在这里度过奇妙的一天,体验参观360公司、360食堂、产品互动、员工生活区以及体验实习区,节目之丰富,根本停不下来。
1475 0