BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Mozilla开源了VR框架A-Frame

| 作者 Abel Avram 关注 7 他的粉丝 ,译者 谢丽 关注 9 他的粉丝 发布于 2015年12月24日. 估计阅读时间: 4 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

Mozilla创建并开源了A-Frame,这是一个用于在桌面浏览器、智能手机和Oculus Rift上创建VR场景的框架。

A-Frame是一个在浏览器中创建VR体验的开源框架。该框架由Mozilla的MozVR团队创建和开发。A-Frame使用了一个在游戏开发中经常使用的“实体-组件(Entity-component)”系统,其中,实体是放置在场景中的对象,而组件是与那些实体相关的属性。实体使用HTML标签定义,而组件则基于一种类似CSS语法的HTML属性。实体需要置入一个场景,其中包含了VR中需要渲染的一切内容。

下面的示例代码描绘了一个边长为1米的红盒子实体(立方体):

<a-scene>
   <a-entity geometry="primitive: box; width: 1" material="color: red"></a-entity>
</a-scene>

目前,geometry组件支持下列primitiveboxcirclecylinderplaneringspheretorustorusKnot。其他组件包括:cameralightsoundfogmaterialscale,等等。实体可以关联多个组件创建更复杂的场景,像下面的示例代码这样:

<a-entity geometry="primitive: cube; depth: 1; height: 1; width: 1"
          material="color: pink"
          light="intensity: 2"
          position="-1 5 0"
          sound="src: dangerzone.mp3; volume: 2">
</a-entity>

为了简化开发人员的工作,Mozilla封装了一些实体-组件元素,创建了若干语法更简单易用的原语。如下所示,这行代码描绘了与上文相同的正方体:

<a-cube width="1" color="red"></a-cube>

预定义的原语包括:a-cameraa-cylindera-planea-spherea-lighta-skya-imagea-video,等等。a-model让开发人员可以在场景中加载OBJ或DAE 3D模型资产。

动画是虚拟现实渲染的重要组成部分。A-Frame内部使用基于Web动画规范的tween.js。下面的这段代码实现了一个男人的旋转模型:

<a-entity id="model" position="0 0 -2">
   <a-animation attribute="rotation" from="0 -30 0" to="0 330 0" dur="15000" easing="linear" repeat="inifite"></a-animation>
   <a-model position="-.35 0 .55" rotation="0 -20 0" scale="1.5 1.5 1.5" src="../_models/man/man.dae"></a-model>
</a-entity>

A-Frame可以用于主流的桌面浏览器中,场景受鼠标或键盘控制,也可以用于智能手机和Oculus Rift头戴设备上。有个问题是,某些特定的场景在部分Android设备上不能正常渲染,但这个问题很快就会被修复。Mozilla创建了若干展示这项技术的演示程序。感兴趣的读者可以从GitHub上下载A-Frame的源代码

查看英文原文:Mozilla Has Created A-Frame, a VR Framework

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT