产品经理:你能不能在网页里实现裸眼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的几种方法都在此文中,你还能想到别的方法吗?请在评论区一起讨论吧。


相关文章
|
前端开发 程序员
几个前端人员不能错过的网站
今天给大家分享几个前端人员不能错过的技术网站,可以帮助大家在学习和工作的过程中更好的解决问题。这些网站也都是我平时经常用的,在上面可以学习交流甚至写代码,很是方便。
几个前端人员不能错过的网站
|
移动开发 前端开发
公司产品移动端网页-前端网页设计技术精美网站源码HTML+CSS+JS
公司产品移动端网页-前端网页设计技术精美网站源码HTML+CSS+JS
147 0
公司产品移动端网页-前端网页设计技术精美网站源码HTML+CSS+JS
|
数据采集 Web App开发 数据挖掘
我爬取了人人都是产品经理6574篇文章,发现产品竟然在看这些
作为互联网界的两个对立的物种,产品汪与程序猿似乎就像一对天生的死对头;但是在产品开发链条上紧密合作的双方,只有通力合作,才能更好地推动项目发展。那么产品经理平日里面都在看那些文章呢?我们程序猿该如何投其所好呢?我爬取了人人都是产品经理(http://www.woshipm.com)产品经理栏目下的所有文章,看看产品经理都喜欢看什么。
1820 0
|
移动开发 前端开发 JavaScript
前端工程师一般喜欢逛什么网站,都学哪些重要的内容?
作为前端开发,要学的技术栈真的很多,除了最基础的 HTML/CSS/JavaScript,还包括 HTML5、CSS3、ES6,还要学习目前流行的 JavaScript 框架
|
Web App开发 前端开发 iOS开发
从YouTube改版看“移动优先”——8个移动优先网站设计案例赏析
2011年,Luke Wroblewski大神提出了移动优先的设计理念。在当时看来这无疑是一个打破行业常规的新型设计原则。而在移动互联网大行其道的今天,谁遵守移动优先的设计理念,设计出最好的移动端网站,谁就能赢得用户和商机。
1201 0
|
Web App开发 前端开发 开发工具
网页设计师和网页前端开发我该选择哪一个
在互联网历史中,网页设计师和网页开发人员这两个不同的行业分工一直都扮演着不可或缺的角色。谁是主角,谁是配角的争论就如鸡和蛋谁先谁后的争论一样,喋喋不休却没有意义。
1533 0
《社交网站界面设计(原书第2版)》——2.11 提问
本节书摘来自华章计算机《社交网站界面设计(原书第2版)》一书中的第2章,第2.11节,作者:(美)克里斯蒂安·克鲁姆里什(Christian Crumlish),艾琳·马洛恩(Erin Malone)著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
983 0