WebVR的初次尝试

虚拟现实 2016-03-04

前言

2016年被称为VR元年,各种头盔在展台上流光溢彩。WebVR并不是一个新鲜的东西,该技术使得开发者只需要利用JavaScript和WebGL等基础的Web技术即可创建VR场景。近日。Mozilla公布WebVR API标准草案。

OpenGL 与 WebGL

确切的说,OpenGL是一个接口规范,并不是一种编程语言,它是与硬件无关的图形API。WebGL是遵循OpenGL规范对绘图技术的一种实现。

Three.js

使用WebGL原生的API来写3D程序是一件非常痛苦的事情,幸好,有很多同行花业余时间写了一些WebGL开源框架,其中three.js就是非常优秀的一个。github: https://github.com/mrdoob/three.js

WebVR

但随着发展,对于虚拟现实的需求,一个以Three.js为基础的VR框架诞生了。

github:https://github.com/borismus/webvr-boilerplate

开始搭建

下载代码

从github上将webvr-boilerplate克隆下来:

git clone https://github.com/borismus/webvr-boilerplate.git

开启服务器

本地服务器apache,nginx都可以,甚至如果有python环境,cd到webvr-boilerplate目录也能创建服务器:

python -m SimpleHTTPServer 8888

不建服务器的话js将无法载入图片资源,js请求file:///E:/github/webvr-boilerplate/img/***.jpg是会失败的。

运行

网页打开主机服务器的端口,像我这样:http://localhost:8888/可以看到一个demo页面,一个正方体在绿色格子结构的方体内旋转。

webvr_default.png

自定义

替换背景图:这个比较简单,index.html看到代码loader.load('img/box.png', onTextureLoaded);将图片名称换掉就行,图片资源放img文件夹。 加几个图形投影:添加几行脚本语言创建一个球面投影表面,我们可以将一个全景场景进行渲染。把图片放到你的项目的img文件夹下面。地球投影图片来源:http://planetpixelemporium.com/planets.html 首页合适的地方添加:

var geometry = new THREE.SphereGeometry(2, 50, 50);
var material = new THREE.MeshBasicMaterial();
var earthMesh = new THREE.Mesh(geometry, material);
// Position earth mesh [to be fair, this should be Phobos or Deimos if I was really trying to pay homage to Andy Weir's scientific authenticity, but the Earth texturewas easier to find in 10 mins...]
earthMesh.position.z = 1;
earthMesh.position.x = 15;
earthMesh.position.y = 4;
// Add earth mesh to your three.js scene - I found it here http://planetpixelemporium.com/planets.html. Place the image in the img directory.
scene.add(earthMesh);
material.map = THREE.ImageUtils.loadTexture('./img/earthmap1k.jpg')

webvr_earth.png

webvr_plants.png

手机访问还能分成左右形式。

自行脑补,哈哈。


本文由 hongweipeng 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

赏个馒头吧