WebVR最佳实践探索

2017-04-20

前段时间研究了一下webVR，对使用a-frame开发webVR做了一个简要介绍和入门级的实例分享（《WebVR之A-Frame开发分享》）。这个分享是针对现有的a-frame API和对外的示例Demo开发的，但是在实际的开发过程中，遇到了很多新的需求和API Demo上都介绍不明确的地方。加上a-frame中文文档的缺失，现有相关中文分享也比较匮乏，在后面对外系统的webVR页面开发时遇到了很多问题，这里想和大家一起分享。也为a-frame和webVr的开发做点自己的微末贡献。

题目叫webVr最佳实践探索，不见得是最佳实践，所以加上探索二字。如果有更好的方法欢迎大家给予建议。

引入a-frame js文件

发现官网上提供的js文件，demo引入的js文件五花八门。而且a-frame官网提供的js版本更新快，api文档也在经常更新。那到底引入哪个js文件呢？他们之间的区别在哪里？

下面整理了下遇到的几款js：

aframe-vx.x.x.min.js：可通过https://aframe.io/releases/x.x.x/来引用，x.x.x表示最新稳定版本号，推荐使用。项目中我是下载放入本地引用的最新版aframe-v0.5.0.min.js。
aframe-master.min.js：master版本不稳定的包含新功能的a-frame版本，我的开发中一度用的是这个版本。尝鲜用~
aframe-animation-component.min.js：aframe-xxx-component.min.js是aframe的一些模块扩展js，例如常用的动画效果模块js。实际中未用到，但是可以参照下面网址：https://github.com/ngokevin/kframe/tree/master/components/animation
aframe-extras.xxx.min.js：A-Frame VR的附加组件和助手。常用到aframe-extras.loaders.min.js，来加载3d模型文件obj等。具体可参考网址：https://github.com/donmccurdy/aframe-extras

这里不讨论min和非min，大家都知道，是否压缩处理的区别

AFRAME.registerComponent的引入位置

按照一般的开发逻辑思维，会将对元素的事件监听绑定行为放在底部，在dom元素加载完进行绑定。但是在实际开发中遇到了问题。我的写法是这样：

<html>
<head>
......
<script src="/src/aframe-v0.5.0.min.js"></script>
</head>
<body>
<a-scene>
......
</a-scene>
<script type="text/javascript">
......
AFRAME.registerComponent('cursor-listener', {
           ......
});
</script>
</body>
</html>

然后运行后发现部分cursor-listener元素并没有绑定事件成功。后来研究发现，script引入的位置放在前面能避免这个问题。

<html>
<head>
......
<script src="/src/aframe-v0.5.0.min.js"></script>
<script type="text/javascript">
......
AFRAME.registerComponent('cursor-listener', {
           ......
});
</script>
</head>
<body>
<a-scene>
......
</a-scene>
</body>
</html>

我理解是a-frame是对内元素进行了语法解析，最后生成的canvas插入dom元素中。把事件监听绑定放在前面，按照从前往后解析的顺序，才会在解析时同时进行事件绑定。而放在后面的话，canvas生成正在进行中，事件绑定出现遗漏。

中文字体

在展示文字的过程中，发现不支持中文直接作为的value值直接展示。现有的aframe文字demo也全部用的英文。怎么解决？问吧：
http://stackoverflow.com/questions/42688290/aframehow-show-chinese-characters-in-aframe

直接上解决方法：

通过sdf font的方式，用herio制作中文字体，注意，只能制作成一张png，否则报错。具体步骤如下：

1、下载Hiero：nightlies/runnables/runnable-hiero.jar
2、运行herio：在hiero下载文件夹路径下运行
java -jar runnable-hiero.jar
3、编辑字体：可以看到Hiero里有下面一些操作项。在1中选择字体，如微软雅黑；选择渲染方式java；在3中添加需要用该字体展现的所有文字和符号，记住，遗漏的话这个字最后也无法展现在页面上哦；4里面是效果选择，双击内容会在5处生成相关项；在6处编辑字体的边距等格式；在7处注意保证pages是1，即最后只生成一张.png；最后在8处保存生成字体。

https://github.com/libgdx/libgdx/wiki/Distance-field-fonts

4、调用字体：字体生成后就是调用了，在中添加字体类，后面直接调用：

<a-assets>
......
<a-mixin id="text" text="align: left;width: 20; wrapCount:40;color: white;font: /asset/font/yahei.fnt;" ></a-mixin>
......
</a-assets>
......
<a-text mixin="text" text="wrap-count:60;value: 测试"></a-text>
......

加载优化

当这个demo里充斥了大量的图片时，加载优化就变得十分需要了。

1、图片处理：图片需要处理成web格式。这个大家都知道就不说了。
2、异步请求：在demo里有很多事件触发后才需要加载的图片。而我们如果直接写入中，不管是在内加载图片后面调用，还是在具体元素里写入路径引入图片，a-frame在加载时都会去下载这个图片，处理完后最后才会生成界面，造成不必要的等待和页面空白。这里我们使用js异步加载，即触发事件后再对src进行编辑写入。我们demo里有个照片墙，点击进入后才会展示十几张照片。这种优化能很大的提高用户体验。
3、为了代码简洁美观，推荐使用存放静态资源信息、等。

奇葩的video

现在a-frame官方提供的video demo和我找到的video demo就是简单的电影播放功能，甚至连play、pause控制方法都没有明确的示例。想要一个电影屏幕的点击播放和暂停的控制，按照官网的api来开发，发现报错或者不管用。

首先先介绍下需求：

展示墙上两个video的静态图片，这个直接用jpg就可以搞定。

绑定事件，点击后进入播放状态：

点击返回就回到上一界面。下次点开继续播放。

然后问题就出现了。如果把video的资源放入中，那么及时实际的dom元素里没引入，也会自动下载播放这个视频。如果将video放到触发事件后再加入，第一次播放正常了，点击返回后video还是没控制关闭，继续在播放。哭~

最后发现，video非常奇葩的把控制权放到了静态资源中。什么意思呢？就是需要在中引入video静态资源，实际中引入src为这个静态资源，但是js中事件触发控制的不是进行play()或者pause()，而是获取到这个静态资源进行play()或者pause()。这个和一般的使用方法有区别，导致出现前面控制不了的情况。

<a-assets>
    	<img id="magic-i" src="/asset/images/magic.jpg">
        <video id="magic-v" src="/asset/video/magic.mp4"></video>
......
</a-assets>
......
<a-videosphere mixin="video" autoplay="false"></a-videosphere>
......

js代码：

......
var videoSphere = document.querySelector('a-videosphere');
......
videoSphere.setAttribute('src', '#'+id+'-v');
document.querySelector('#'+id+'-v').play();
......

visible

我们的这个示例demo涉及到很多场景的切换，这里我使用的是对元素visible的设置。一个场景用一个大的包裹，通过控制这些父元素的隐藏展现来实现场景的切换。但是会遇到这么个问题：父元素隐藏，但是实际上鼠标在移动的过程中，隐藏的物体还是会触发事件，会遮挡实际应该展现的元素的事件触发。

有人认为尽量不使用visible，而是使用opacity来控制展现隐藏。但是在涉及父元素控制整个场景的隐藏时opacity不能控制里面的元素。所以我还是用的visible。同时为了避免前面说到的问题，隐藏元素会整个的挪动位置，展现时再把位置挪动回来。