你在使用哪种编程语言?快来投票,亲手选出你心目中的编程语言之王 了解详情
写点什么

Mozilla 开源了 VR 框架 A-Frame

2015 年 12 月 23 日

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>
{1}

为了简化开发人员的工作,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

2015 年 12 月 23 日 18:006420
用户头像

发布了 1008 篇内容, 共 319.2 次阅读, 收获喜欢 289 次。

关注

评论

发布
暂无评论
发现更多内容

String拼接出现null?你看到的分析可是错的

Java王路飞

Java 程序员 架构 面试 string

有关微服务容器化,这份阿里大牛亲码的微服务容器化全栈实录是我见过讲的最详细的了!

Java王路飞

Java 程序员 架构 容器 微服务

11 个步骤完美排查服务器 是否已经被入侵(全程干货,建议收藏)

Machine Gun

Linux 网络安全 信息安全 渗透测试

区块链,让付费的知识真正“物超所值”

CECBC区块链专委会

区块链的现实之痛与解决之道(区块链的爱与恨)

CECBC区块链专委会

Fedora 34成哑巴了?

DisonTangor

fedora

打破思维定式(七)

Changing Lin

5月日更

数据库学习笔记

lenka

5月日更

Arction图表控件LightningChart JS从2.2.1版到3.0.0版迁移指南

Geek_bacee5

数据可视化 LightningChart.NET Arction 图表控件 LightningChart

BIP研发课堂:领域、单据类型、交易类型

paraboy1

手把手 Golang 实现静态图像与视频流人脸识别

天黑黑

go 音视频 人脸识别

C++解析一些特殊符号tab、换行符号

良知犹存

c++

区块链赋能产业,构建良好的数字经济生态

CECBC区块链专委会

你敢信?四面字节就拿了32*16薪的offer,这份阿里内部面试小抄到底又有多强?

神奇小汤圆

Java 程序员 架构 面试 计算机

一萌妹子的面试经历,美团四面三小时,成功拿到Java岗offer

Crud的程序员

Java spring 架构 java程序员

阿里高并发速成笔记2021最新版强势来袭!(基础+数据库+缓存+消息队列+分布式服务+维护+实战全都有)

程序员小毕

Java 程序员 架构 面试 高并发

阿里三面:你连HashMap都不会还敢问我要23K?我:0.0

北游学Java

Java hashmap 大厂面试

如何选择fil矿机厂商?fil挖矿哪家靠谱?

投资矿机v:IPFS1234

如何选择fil矿机厂商 fil挖矿哪家靠谱

来了,Anolis OS 8.2 正式版首发!100% 兼容 CentOS 8

阿里云基础软件团队

教你两招,轻松搞定html页面导出为pdf文件

麦洛

Java PDF wkhtmltopdf html2canvas

双非本科,聊聊我是怎么学习编程的。

Guide哥

Java 学习 编程

社工技巧 | 一些社工入门技巧介绍

Thrash

阿里出品还是香,这份Redis笔记”从头到尾,全是精华

Java架构师迁哥

Newtonsoft.Json的使用整理

happlyfox

json netcore 5月日更

客户营销:4P理论

石云升

创业 营销 职场经验 5月日更

码农是如何百炼成钢的?6面阿里、5面字节、4面腾讯,终斩腾讯Offer

Java架构师迁哥

Arction高性能图表控件LightningChart关于交易图表问题解答

Geek_bacee5

数据可视化 LightningChart.NET Arction 图表控件 LightningChart

阿里开源的“高并发设计笔记”就这水平!?我反正是跪着看完的

Java架构师迁哥

filecoin挖矿平台哪个好?filecoin矿机最佳配置推荐?

v:IPFS456

IPFS挖矿怎么提现 IPFS挖矿可靠吗 filecoin矿机哪家好? filecoin挖矿平台哪个好? filecoin矿机最佳配置?

阿里技术官:这样带你学Spring全家桶,其实没你想的那么难

Crud的程序员

Java spring 程序员 架构

不要盲目跟风:中小企业运营自媒体需三思而后行

石头IT视角

围绕“三个问题”开展的网易云音乐数据基础建设

围绕“三个问题”开展的网易云音乐数据基础建设

Mozilla开源了VR框架A-Frame-InfoQ