目前有不少框架可以让我们很方便的做 webvr 应用。
几个例子
我们先看看 webVR 能做什么：
全景图片
我们使用相机在同一地点，多个角度下拍摄多张照片，通过图片拼接处理，再裁剪开。图片拼接可以通过 Photoshop 的 Photomerge 来实现(File > Automate > Photomerge)。
还可以用手机的全景模式拍摄图片，然后用 Photoshop 制作出来。下面就详细介绍下这个全景图片的制作。
全景图片制作
用 Google 照一张全景图(panorama)，这是一张泰国帕南海滩的照片。
在 Photoshop 中新建一个 2048 * 1024 尺寸或者类似比例的图片，作为全景图片的最终尺寸。把素材导入到里面去。
image.png调整图片的宽度铺满整个画布，图片上下两侧留空。素材中的地平线保持在图片的中心位置。
我们使用 Photoshop 的自动填充让上下两块铺满，但是又不改变图片的比例。
先选中素材的所有像素(Command + 左键 点击图层)。然后反选像素(Select > Inverse)，再增加几像素的选中区域(Select > Modify > Expand > Expand by 5 px)。
选择自动填充(Edit > Fill > Contents: Content-Aware)。如果空白区域太大的话会导致把天填充到海里去，所以我们可以一段一段来。
对于不满意的位置，可以选中，右键，再自动填充。
image.png上面是效果图。
然后我们要处理在旋转一周后左右不能对应上的问题。复制左侧一部分内容，粘贴到右侧，左右反转一下(选中右侧，Edit > Transform > Flip Horizontal)，然后添加一个渐变色的图层蒙版。
image.png处理后的图片过度自然多了。
最后，我们把图片放到 a-frame 的 a-sky 中就可以了。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>A-Frame Panorama</title>
<script src="../aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky src="./phra-nang-beach-1.jpg" rotation="0 0 0"></a-sky>
</a-scene>
</body>
</html>
虽然比不上东方明珠的效果，但是也有一定的效果了。