WebVR大潮来袭时,前端开发能做些什么
作者 | YoneChen
来源 | https://www.jianshu.com/p/c9c03e14ba9d
WebVR即web + VR的体验方式,我们可以戴着头显享受沉浸式的网页,新的API标准让我们可以使用js语言来开发。本文将介绍如何快速开发一个WebVR网页,在此之前,我们有必要了解WebVR的体验方式。
WebVR体验模式
一、WebVR体验模式
体验WebVR的方式
WebVR的体验方式可以分为VR模式和裸眼模式
1、VR模式
01.Mobile VR
如使用cardboard眼镜来体验手机浏览器的webVR网页,浏览器将根据水平陀螺仪的参数来获取用户的头部倾斜和转动的朝向,并告知页面需要渲染哪一个朝向的场景。
02.PC VR
通过佩戴Oculus Rift的分离式头显浏览连接在PC主机端的网页,现支持WebVR API的浏览器主要是火狐的 Firefox Nightly和设置VR enabled的谷歌chrome beta。
2、裸眼模式
除了VR模式下的体验方式,这里还考虑了裸眼下的体验浏览网页的方式,在PC端如果探测的用户选择进入VR模式,应让用户可以使用鼠标拖拽场景,而在智能手机上则应让用户可以使用touchmove或旋转倾斜手机的方式来改变场景视角。
WebVR的概念大概就如此,这次我们将采用cardboard + mobile的方式来测试我们的WebVR场景,现在踏上我们的开发之旅。
二、准备工作
测试工具:智能手机 + cardboard式头显 + chrome beta 60+(需开启WebVR选项)
如果你练就了裸眼就能将手机双屏画面看成单屏的能力也可以省下头显。
技术和框架:three.js for WebGL
Three.js是构建3d场景的框架,它封装了WebGL函数,简化了创建场景的代码成本,利用three.js我们可以更优雅地创建出三维场景和三维动画,这里我使用的是0.86版本。
如果想了解纯WebGL开发WebVR应用以及WebVR具体环境配置,可以参考 webvr教程--深度剖析。
需要引入的js插件:
1.three.min.js
2.webvr-polyfill.js 由于WebVR API还没被各大主流浏览器支持,因此需要引入它来解决兼容性问题。
三、3D场景构建
首先我们创建一个HTML文件
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"> <title>webVR-helloworld</title> <style type="text/css"> * { margin: 0; padding: 0; } html,body { height: 100%; overflow: hidden; }
</style>
</head>
<body>
</body>
<script src="./vendor/three.min.js"></script>
<script src="./vendor/webvr-polyfill.js"></script>
<script></script>
</html>
接下来编写js脚本,开始创建我们的3d场景。
1.创建场景
Three.js中的scene场景是绘制我们3d对象的整个容器
var scene = new THREE.Scene();
2.添加相机
Three.js的相机
Three.js中的camera相机代表用户的眼睛,我们通过设置FOV确定视野范围,
//定义一个60°的视角,视线范围在1到1000的透视相机
var camera = new THREE. new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
scene.add(camera);
3.添加渲染器
Three.js的渲染器用来渲染camera所看到的画面
//初始化渲染器 antialias参数为ture表示开启抗锯齿策略
var renderer = new THREE.WebGLRenderer({ antialias: true } );
//设置渲染器渲染尺寸
renderer.setSize(window.innerWidth,window.innerHeight);
//设置渲染背景为白色
renderer.setClearColor(0xeeeeee);
//将渲染场景的canvas放入body标签里
document.body.appendChild(renderer.domElement);
4.添加一个立方体网格
// 创建立方体
var geometry = new THREE.CubeGeometry( 10,10,10);
var material = new THREE.MeshLambertMaterial( { color: 0xef6500,needsUpdate: true,opacity:1,transparent:true} );
var cube = new THREE.Mesh( geometry, material );
cube.position.set(0,100,-50);
cube.rotation.set(Math.PI/6,Math.PI/4,0);
scene.add(cube);
5.启动动画
动画渲染的原理:渲染器的持续调用绘制方法,方法里动态改变物体的属性。
旧版的three.js需要手动调用requestAnimationFrame()方法递归的方式来渲染动画,新版three.js已经封装了该属性,因此只需要通过渲染器renderer.animate(callback)
。
renderer.animate(callback)。
function update() { //让立方体旋转 cube.rotation.y += 0.01; //渲染器渲染场景,等同于给相机按下快门 renderer.render(scene, camera);
}
renderer.animate(update);//启动动画
基本的3d场景
至此,我们已经绘制了一个简单的3d场景并且让它动了起来,接下来,我们需要让我们的场景可以支持WebVR模式。
四、WebVR场景开发
WebVR网页开发的基本原理是通过WebVR API获取VR动态数据(VR Display frameData),渲染器根据VR数据来分别绘制左右屏场景,具体步骤如下:
使用
navigator.getVRDisplays
获取vr设备示例WebVR网页分屏
这里需要通过按钮来控制当前的渲染模式:
当点击按钮时,根据
display.isPresenting
判断当前是否是使用vr设备下进行渲染,如果false,进入2,否则true进入3当前非VR模式,点击按钮进入VR模式,此时调用
display.requestPresent()
,display.isPresenting
被设置为true,触发window的vrdisplaypresentchange
事件当前为VR模式,点击按钮退出模式,此时调用
display.exitPresent()
,display.isPresenting
被设置为false,触发window的vrdisplaypresentchange
事件
我们可以在vrdisplaypresentchange
事件中根据isPresenting
的值来改变按钮的UI,而three.js将根据isPresenting
的值来决定是常规渲染还是vr模式渲染,在vr模式下,three.js将创建两个camera进行渲染。
五、代码优化
最后,将WebVR应用写成ES6 class,后面开发流程将按如下图结构来规范代码:
WebVRApp类
第一步,构造函数先初始化VR场景、相机和渲染器;
第二步,在渲染之前调用start方法,在start方法里我们为场景创建3d物体;
最后,调起renderer.animate(this.update)
开启动画渲染,update方法里我们可动态操作物体属性,具体代码如下:
demo示例
完整代码:github.com/YoneChen/WebVR-helloworld。
六、结语
目前,国外的谷歌、火狐、Facebook和国内百度已推出支持WebVR浏览器的版本,微软也宣布将推出自己的VR浏览器,随着后期5g网络极速时代的到来以及HMD头显的价格和平台的成熟,WebVR的体验方式将是革命性的,用户通过WebVR浏览网上商店,线上教学可进行“面对面”师生交流等,基于这种种应用场景,我们可以找到一个更好的动力去学习WebVR。
七、参考链接
responisve WebVR: 探讨WebVR在不同头显(HMD)的适配方案
MolizaVR example: 火狐WebVR示例
webvr-boilerplate: A starting point for web-based VR experiences that work on all VR headsets.
how to build webvr: How to Build VR on the Web Today
WebVR大潮来袭时,前端开发能做些什么相关推荐
- 前端开发工程师做些什么?
1.web前端开发工程师是做什么的 要与网站打交道 2.成为一名web前端开发工程师需要具备的条件 1.兴趣2.敲代码 3.web前端开发工程师需要学习什么 1)软件(代码的辅助工具) 浏览器:浏览器 ...
- 拿4k的前端开发都会做些什么?
对于刚刚入门的小白来说,你起码得是一个合格的初级前端工程师,不然有哪家公司愿意给你offer,初级的前端工程师拿4K的工资不稀奇,如果你是中高级前端工程师还拿着4K的薪资这就有点说不过去了.那么,什么 ...
- Web前端开发主要做什么
Web前端开发主要做什么?朗沃小刘小编今天来谈谈web前端开发主要做什么?web前端工程师,做的工作与网站前/后台系统的页面相关,使用到的主要技术包括:HTML.CSS.JavaScript.现代we ...
- web前端开发主要做什么?应该学些什么?
web前端开发主要做什么?当我们要生产一款APP,UI设计是展现在我们眼前的界面.图标.交互等内容,而它的各项功能的实现是后端工程师的代码开发,可是这两个部分没有在开发的时候办法直接对应,此时web前 ...
- 入行web前端开发可以做什么工作
迷茫和烦恼几乎是人人都有,作为一名初级程序员来说,可能是因为工资低.家庭无背景.发展前景有限等等的现实原因影响了心态.特别是在找工作四处碰壁后,可能会发出行业饱和这样的感慨,再加上最近中美贸易摩擦下, ...
- 前端开发是做什么的?工作职责
想要了解前端从业者的工作职责,需要从一个完整网站应用产生流程入手,一个网站应用从无到有的过程大致如下 : 1)产品经理与甲方反复沟通交流,逐步确定产品需求完成设计草图: 2)产品经理根据需求和草图进行 ...
- 前端开发是做什么的?工作职责有哪些?
我们介绍Web网站工作流程的时候提到,前端开发,主要的职责就是将数据以好看的样式呈现出来.说白了,就是开发网页程序,如下图所示: 那在讲解web前端开发之前,我们先需要对web前端开发有一个整体的认知 ...
- Web前端开发是做什么的?学Web前端有前途吗?
尚学堂导读 某学员: "前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,HTML5.JS 的流行,让 ...
- 前端开发如何做新手引导
通常,在产品发布新版本或者有新功能上线时,都会开发一个新手引导功能来引导用户了解应用的功能.在前端开发中,如何快速地开发新手引导功能呢,下面介绍几个开箱即用的新手引导组件库. 1,Intro.js I ...
最新文章
- php把excel变成数组,PHP excel读取excel文件转换为数组
- 一个Bug能有多大影响:亏损30亿、致6人死亡、甚至差点毁灭世界...
- stl中的list学习笔记
- ***程序一般的启动方式
- 我不曾忘记的初心-冒险努力正是你缺少的!
- mysql 实验论证 innodb表级锁与行级锁
- 编译器编译报错时aka是什么意思?(also known as)
- Redis分布式锁实现方式
- 蓝桥杯 试题 入门训练 Fibonacci数列——9行代码AC
- python日期时间_Python日期时间
- SparkSql性能测试案例
- Carrot2 - Wikipedia, the free encyclopedia
- Spring Boot工程结构推荐
- 在python中安装包出现Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None))
- 数据库知识整理 - 并发控制(封锁、两段锁协议、意向锁)
- Unfinished
- wpscan扫描的简单介绍(对WordPress的扫描CMS)
- 网络营销---春节营销案例
- java中单根_java之 单根继承与集合
- Cadence allegro 17.4 PCB DRC检查
热门文章
- 充分且必要条件 充分不必要条件 必要不充分条件 不充分不必要条件 解释
- Element中Upload上传组件的http-request方法
- 无法连接到代理服务器--解决方法
- 利用DIALS软件进行晶体结构解析流程(一)
- 智慧疫情防控平台(图形化编程mind+)
- ces展,体感,机器人_2011年最佳CES(消费电子展)
- Matlab编程技巧:通过脚本获取/修改Simulink信号线参数
- 计算机英语听力敎材,计算机英语教程(第5版)(十一五规划教材)(附光盘)
- MySQL启动1053错误之解决方法
- ServiceComb/CSE常见问题处理(1812)