A-Frame WebVR 试玩报告

发布于 2024-09-28 01:17:00 字数 12222 浏览 41 评论 0

什么叫真？你怎样给真下定义，如果你说真就是你能感觉到的东西，你能闻到的气味，你能尝到的味道，那么这个真只是你大脑作出反应的电子信号。 —— 《黑客帝国》

关于 VR 技术

VR 即 Virtual Reality 虚拟现实，大白话来讲，就是利用电脑创造一个全新的虚拟世界，通过欺骗你的感官（目前更多是视觉上），让你置身于一个与现实相似又完全虚拟的世界中，这就像是在《黑客帝国》中，主人公尼奥对这个看似真实的世界产生怀疑，在崔妮蒂的帮助下，最终与墨菲斯见面，并吃下了象征真相的红色药丸，在矩阵醒来后的尼奥发现，原来他一直生活在矩阵所创造的虚拟世界中。

一分钟 VR 简史

《Pygmalion's Spectacles》（《皮格马利翁的眼镜》）

虚拟现实这个概念最早来自于 Stanley G. Weinbaum 在 1935 年发表的科幻小说《皮格马利翁的眼镜》，被认为是探讨虚拟现实的第一部科幻作品，简短的故事中详细的描述了包括嗅觉、触觉和全息眼镜为基础的虚拟现实系统。

Sensorama

VR 的雏形，要追溯到 1962 年被称为虚拟现实之父 Morton Heilig 发明的 Sensorama，它的外观就像是一个笨重的街机盒子。 Morton Heilig 发明 Sensorama 的初衷是为了打造未来的电影，在当时那个年代拍摄 3D 电影并不容易，Morton Heilig 为了配合拍摄，又发明了 3D 摄像机和投影仪，为 Sensorama 拍摄了五部短片，以直升机、卡丁车、自行车和摩托车等骑行体验为主，Sensorama 播放在布鲁克林骑摩托车的短片时能够提供真实的 3D 影像，感受行车时的颠簸，周围环境的立体声、迎面吹来的风和气味，这在当时大部分人都还在使用黑白电视的时代，是多么令人震撼的，遗憾的是该项目未能获得资金的支持，因此 Sensorama 的研发工作止步不前，最终回看历史，其实它更像是现代的 4D 电影。

The Sword of Damocles（达摩克利斯之剑）

1968 年，Ivan Edward Sutherland 和他的学生 Bob Sproull 在麻省理工学院的林肯实验室创造了第一个虚拟现实及增强现实头戴式显示器系统，第一个显示应用是悬浮在空中的一个立方体，这款头戴显示器因为要跟踪用户的视线，需要通过机械臂移动，因此设备非常笨重，只能挂在天花板上减轻重量使用，被戏称为“达摩克利斯之剑”。

Sega VR（世嘉 VR） 1991 年世嘉宣布了 Sega VR，定价为 200 美元，从 1991 年到 1994 年，世嘉就在起 VR 设备上不断宣传，并且在 1993 年的夏季 CES 展会上提供 VR 的试玩，就在大家万分期待之时，1994 年世嘉表示停止该项目，给出的理由是虚拟现实效果过于逼真，同时佩戴耳机的用户有可能移动和伤害到自己，当然明白人都知道这是个借口，花了如此大力气的投入和探索最终却放弃了，原因或许是因为 SEGA VR 的游戏和软件太少了，在夏季 CES 展会上也只是公布了屈指可数的 4 款游戏：《Nuclear Rush》、《Iron Hammer》、《Matrix Runner》、《Outlaw Racing》。

Virtual Boy 1995 年，任天堂发布了 Virtual Boy，Virtual Boy 采用二极管和视差技术创造出游戏的 3D 效果，是任天堂在 N64 上市之前用来取代 Game Boy 的 32 位便携游戏机，由设计 Game Boy 的横井军平主导，最终发售 22 个游戏，全球销量 77 万台，造成其失败的原因很大程度是因为 Virtual Boy 只能提供红黑两色的游戏画面，760 克的重量需要支架支撑，玩家只能卷缩身体坐着玩，并且玩家在过程中会有强烈的眩晕感。

Oculus Rift VR 这个词在近两年火热起来也正是因为 Oculus Rift，92 年生的 Palmer Freeman Luckey 对任何事物皆有好奇其心的人，喜欢收藏各类 VR 设备，并且是 Meat to be seen 技术论坛的版主，Palmer 对市面上 VR 的低对比度、高延迟和低视野感到失望，他希望制作一个能跟踪玩家头部转动的 360 度全景，并以极低的延迟显示画面的 VR 头戴设备。

同样作为 Meat to be seen 技术论坛成员之一的 FPS 之父卡约翰·卡马克，看到此项目非常感兴趣，要求给予一台原型机，并对《DOOM3》进行 VR 适配，在 2012 年 E3 展出此设备，获得了 E3 最佳外设奖，一时间获得各大媒体的关注，随后在 Kickstarter 发起众筹，短时间内就获得超过 9500 人支持，总资金达 243 万美金。

在 2014 年 7 月，Oculus Rift 被 Facebook 以 20 亿美元收购后，各个厂家似乎又看到另一片蓝海，大量的涌入这个市场，HTC 的 HTC Vive，索尼的 PlayStation VR，各类的手机 VR 等等。

关于 A-Frame

历史讲完回到正题，Mozilla 认为目前的 WebVR 发展太困难了，为了使其更加快速、方便、愉快的打造 3D/VR 场景，2015 年 12 月 16 日 Mozilla 旗下的 MozVR 团队，在经过长时间的试验，并且从一些 3D/VR 工具（例如：JanusVR、GLAM、SceneVR）中汲取经验，公布了 JavaScript 开源框架 A-Frame。

A-Frame 使用 Web 开发者熟悉的 HTML 标签来创建 WebVR 场景，使得非 WebGL 开发者无需学习强大而又复杂的 WebGL API 来创建 VR 场景，降低了初学者学习的门槛，并且 A-Frame 一个最大的优势在于跨平台性，目前版本已迭代到 v0.3.0，支持 VR 头戴设备 Oculus Rift 和 HTC Vive 以及非 VR 设备的 PC 端和 Mobile 端（可开启 VR 模式，利用 Google Cardboard、Gear VR 等设备观看）。

简单概括 A-Frame 特点如下：

结合 three.js 和 WebGL 的力量
通过自定义标签创建 WebVR，标签具有可读性
具有跨平台性，支持 PC 端、Mobile 端以及头戴设备 Oculus Rift 和 HTC Vive
减少开发成本，降低初学者与牛人之间学习曲线
底层模块化和可扩展性

A-Frame 功能

A-Frame 为开发者提供了许多的功能模块，例如在官网 Docs 里 Primitives 提供了基础的几何形状（盒子、球面、圆柱、平面等）、可导入 3D 建模工具制作或从网上下载的 Collada 模型、定义背景的天空、定义用户从哪个角度观看场景的相机、动画、光影、全景视频等功能，通过标签开发者就可以轻松的创建 WebVR 场景，更多功能可以到官网查看。

A-Frame 实例

这里以官网的一个例子作为基础讲讲怎么使用 A-Frame。

1、创建场景

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <script src="aframe-v0.3.0.js"></script>
    </head>
    <body>
        <a-scene>

        </a-scene>
    </body>
</html>

<a-scene> 是一个全局的根对象，所有实体都存在于这个场景中， <a-scene> 处理了所有 three.js 和 WebVR boilerplate 需要做的事：

创建画布，渲染器以及渲染循环
默认的相机和光影
创建 WebVR Polyfill，VREffect
添加用户界面进入 VR，调用 WebVR API

2、创建天空

<a-scene>
    <a-assets>
        <img id="lake" src="lake.jpg">
    </a-assets>
    <a-sky src="#lake"></a-sky>
</a-scene>

<a-sky> 允许为场景设置纯色背景或是一张 360 度全景图片， <a-assets> 则是预加载 WebVR 页面所需的资源。

点击查看 DEMO

3、创建相机

<a-scene>
    <a-entity position="0 0 3.8">
        <a-camera></a-camera>
    </a-entity>
</a-scene>

<a-camera> 定义了用户从哪个角度观看场景，改变 <a-camera> 的 position 需要将其置于 <a-entity> 中，直接在 <a-camera> 设置不会生效。

4、创建球面、立方体、圆柱、平面

<a-scene>
    <!-- 球面 -->
    <a-sphere position="0 1.25 -1" radius="1.25" color="#ef2d5e"></a-sphere>
    <!-- 立方体 -->
    <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depath="1" color="#4cc3d9"></a-box>
    <!-- 圆柱 -->
    <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#ffc65d"></a-cylinder>
    <!-- 平面 -->
    <a-plane rotation="-90 0 0" width="4" height="4" color="#7bc8a4"></a-plane>
</a-scene>

position 定位实体 x、y、z 轴的位置
rotation 调整实体 x、y、z 轴的旋转角度
color 改变实体的颜色
depth 景深
width 、 height 设置实体的宽高
radius 圆角半径
数值是以“米”为单位

点击查看 DEMO

5、添加动画

<a-scene>
    <a-sphere position="0 1.25 -1" radius="1.25" color="#ef2d5e">
        <!-- 缩放 -->
        <a-animation attribute="scale" from="1 1 1" to="1.2 1.2 1.2" repeat="indefinite" direction="alternate" dur="2000"></a-animation>
    </a-sphere>
    <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depath="1" color="#4cc3d9">
        <!-- 旋转 -->
        <a-animation attribute="rotation" from="0 45 0" to="0 360 0" repeat="indefinite" direction="alternate"></a-animation>
    </a-box>
    <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#ffc65d">
        <!-- 改变高度 -->
        <a-animation attribute="height" from="1.5" to="0" repeat="indefinite" direction="alternate"></a-animation>
    </a-cylinder>
</a-scene>

需要为某个实体添加动画则将 <a-animation> 置于标签之内，这里我给球 scale 缩放，立方体 rotation 360 度 Y 轴旋转，圆柱改变 height ，并且无限次轮流反向播放动画。

attribute 定义要执行的动画属性
from 动画的起始
to 动画的结束
repeat 定义了要循环的次数，可以是一个数字或 indefinite 表示无限循环
dur 动画的时长
direction 动画轮流反向播放

A-Frame 的动画属性与 CSS3 animation 非常相似，还有填充模式 fill 、延时 delay 、速度曲线 easing 等等。

点击查看 DEMO

6、创建光标 通过给相机增加一个光标 cursor ，让我们可以通过点击和注视与实体互动。

<a-scene>
    <a-box cursor-listener position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depath="1" color="#4cc3d9">
        <a-animation attribute="rotation" from="0 45 0" to="0 360 0" repeat="indefinite" direction="alternate"></a-animation>
    </a-box>
    <a-entity position="0 0 3.8">
        <a-camera>
            <!-- 创建光标 -->
            <a-cursor color="#000"></a-cursor>
        </a-camera>
    </a-entity>
</a-scene>

// 添加光标监听器
AFRAME.registerComponent("cursor-listener", {
    init: function() {
        var COLORS = ["#6c8cbf", "#e4f0ff", "#6c70e1"];
        // 点击随机改变立方体颜色
        this.el.addEventListener("click", function() {
            var randomIndex = Math.floor(Math.random() * COLORS.length);
            this.setAttribute("color", COLORS[randomIndex]);
        });
    }
});

点击查看 DEMO

A-Frame 社区

一个框架是否能持续发展，很大程度看社区的活跃状态，A-Frame 目前在 Github 上已经超过 3500 个 star，Mozilla 鼓励开发者们加入 1400 人的 A-Frame Slack 聊天组，并在社区中分享自己的作品，在 A-Frame Twitter 里，每周都会精选出优秀的 A-Frame 作品供开发者们参考学习。