A-FRAME初体验

89317160 2019-06-21

引言

简单介绍A-FRAME，A-FRAME自创一套类HTML的标签让开发者可以像写页面一样轻松构建自己的WebVR场景应用，其底层是基于强大的WebGL，支持跨平台，看官网的介绍，A-FRAME提供了基础的集合形状、3D建模、相机、动画、光影等等功能，而这些用户都可以直接通过类似HTML标签快速使用并构建自己的WebVR场景。

标签

<a-scene>

<a-scene>是全局的根对象整个3D应用的场景，所有实体都应该存在这个场景中,<a-scene>处理了three.js以及WebVR一些以下事情

  • 创建画布、渲染器以及渲染循环

  • 默认的照相机和光影效果

  • 创建WebVR Polyfill，VREffect

  • 调用WebVR API设置VR UI交互

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a-scene</title>
    <script type="text/javascript" src="./lib/aframe.js"></script>
</head>
<body>
    <a-scene>
    </a-scene>
</body>
</html>

<a-box>

<a-box>是一个方形几何图形，下面直接在<a-scene>直接添加一个方形实体（长、宽、高分别都是1，颜色是红色）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a-scene</title>
    <script type="text/javascript" src="./lib/aframe.js"></script>
</head>
<body>
    <a-scene>
        <a-box color="red" width="1" height="1" depth="1"></a-box>
    </a-scene>
</body>
</html>

在浏览器预览的时候，我们并没有直接看到添加的box，通过<ctrl>+<Shift>+i进入webvr-inspector查看整个场景的各个元素，红色方形并没有在初始化时候的视野范围内（黄色线标识的是三维视野边界）

A-FRAME初体验

此时还看到camera的位置是在零点(0、0、0）的上方，只要调整camera的位置或者是调整正方形的位置，就可以初始化的时候显示正方形，设置<a-box>的position可以把方形移动到可视范围内，此外rotation可以设置方形的旋转角度

A-FRAME初体验

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a-scene</title>
    <script type="text/javascript" src="./lib/aframe.js"></script>
</head>
<body>
    <a-scene>
        <a-box position="0 2.24 -4.22" color="red" rotation="0 45 45" width="1" height="1" depth="1"></a-box>
    </a-scene>
</body>
</html>

A-FRAME初体验

89317160

89317160

相关推荐

一步步教你用 WebVR 实现虚拟现实游戏

在本教程中，我们将创建三维对象并为它们添加简单的交互。此外，你还可以学到如何在客户端和服务器之间建立简单的消息传递系统。我们将把目光放在最后一类程序上，并将专注于点击式冒险游戏。这是一种休闲类游戏，游戏的目标是通过选择场景中的三维对象来完成拼图。这意味着在

VThree虚拟现实 / 0评论 2019-11-19

分享12款令人瞠目结舌的WebVR演示和实验效果

不管你信不信， WebVR绝对是浏览器下一个让你激动的技术方向， 也许很快你就可以使用VR头显或者相关设备直接访问web内容和资源啦！在这篇资源分享帖中，我们将介绍很多基于浏览器的VR演示和游戏，帮助你更好的了解目前webVR实现的那些让你吓掉大牙的特效，

kfyzjd00 / 0评论 2017-10-26

分享12款令人瞠目结舌的WebVR演示和实验效果

不管你信不信， WebVR绝对是浏览器下一个让你激动的技术方向， 也许很快你就可以使用VR头显或者相关设备直接访问web内容和资源啦！在这篇资源分享帖中，我们将介绍很多基于浏览器的VR演示和游戏，帮助你更好的了解目前webVR实现的那些让你吓掉大牙的特效，

华为开发者社区 / 0评论 2017-10-26

JS或Jquery

VR 大潮来袭 --- 前端开发能做些什么去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 js 语言来开发。今天

Jensony / 0评论 2019-06-26

【webVR翻译】使用A-frame零基础一小时制作冬日雪人特效

A-frame是一款基于WebGL库three.js构建的WebVR框架，Web开发人员使用它可以很方便地创建虚拟现实场景。A-frame最大的优势在于它的扩展性很好。获得A-frame基础模板在开始之前，我们需要先获取A-frame基础场景模板，该模板包

苗疆三刀的随手记 / 0评论 2019-06-25

WebVR开发教程——交互事件（三）Cardboard与注视

Cardboard可以说是手机VR头显的元老了，狭义上指的是Google推出的一个带有双凸透镜的盒子，广义上则表示智能手机+盒子的VR体验平台。它的交互方式较为简单，利用了手机的陀螺仪，采用gaze注视行为来触发场景里的事件，比如用户在虚拟商店中注视一款商

83354297 / 0评论 2019-06-25

WebVR开发教程——交互事件（二）使用Gamepad API

上期 WebVR开发教程——交互事件（一）头显与手柄 从头显和手柄两个层面对VR交互事件进行介绍，前者使用的是WebVR API，而后者则需用到Gamepad API，本期将对Gamepad API展开介绍。Gamepad APIGamepad API是一

kfyzjd00 / 0评论 2019-06-25

WebVR开发教程——交互事件（一）头显与手柄

前两期主要介绍了开发WebVR应用的基本套路，不过开发出来的场景还只是“可远观而不可亵玩”，缺乏交互性，本期将带大家走进VR交互世界，看看WebVR事件是如何开发的。在可交互的VR世界里，用户不再只是个观察者，而是虚拟世界中一个生命，可以与虚拟世界进行通信

心语家园 / 0评论 2019-06-25

【WebVR教程翻译】一步一步教你如何制作A-frame动画效果

欢迎来到A-Frame课堂！这次我们将通过讲解一个codepen.io示例，学会如何使用这个框架制作各种动画。动画是所有伟大的3D创作的关键部分，它能第一时间抓住我们的视线，把场景鲜活地呈现出来。使用A-frame创建动画非常简单。先将<a-anim

87357660 / 0评论 2019-06-25

【WebVR教程翻译】超简单！用A-frame快速打造你的VR网站

A-frame是由three.js封装而来的一组库，使用它可以方便地构建跨平台Web VR应用。如果你对它毫无概念，还没有准备好继续往下读，可以先看看A-frame官方示例，了解了解这个它是工作的，以及它能用来做什么。实现这一效果，我们将会用到一些A-fr

华为开发者社区 / 0评论 2019-06-25

阿里云前端周刊 - 第 21 期

近日发布的 Windows 平台上的 Firefox 55 版本，成为首个支持新 WebVR 标准的桌面浏览器；Mozilla 希望能够以此推动 WebVR 的进一步发展。除此之外，Firefox 55 还支持包括 async generators 在内的

88427903 / 0评论 2019-06-21

VR技术在数据中心3D机房中的应用 （下）

前面给大家简单科普了一下VR的硬件设备以及VR在各个领域的应用，是不是觉得非常高大上？千言万语概括成一句话，VR能给用户带来前所未有的沉浸感和交互方式，让人足不出户就能够接触到外面的世界。世界那么大，我想去看看，可是我又懒，那该怎么办？相信很多人都跟我的朋

wangba / 0评论 2019-06-21

webVR全景图多种方案实现（pannellum，aframe，Krpano，three）

H5 上传功能就不说了，或下一篇文章说。H5 有几种方式实现呢？我没有深入的研究three，可能他的强大我没有用上吧。刚开始我用的是，node+three 竟然没有 CSS3DRenderer 安装包 ，只有2D的 并且引用three 也是报各种错误。放一

89317160 / 0评论 2018-11-08

解析WebVR的发展现状和三种实现形态

在现如今，随着目前互联网技术飞的发展和进步，WebVR领域的动作频频是最有趣的动态之一是亚马逊通过Sumerian开发者预览版正式入局。对于支持WebVR标准的浏览器来说，2017年的夏天是特别的时刻，比如Mozilla正式发布了Windows版 Fire

华为开发者社区 / 0评论 2018-02-26

扣丁学堂浅谈基于网页端的VR如何实现

在现如今，随着互联网科技飞速的发展和进步，未来可能基于web页面的VR实现将会进入我们的视野。因为越来越多的开源组织和机构都在开始支持基于web的VR实现，包括mozilla，也推出了基于webVR的许多解决方案。本文介绍的框架aframe便是众多webV

87357660 / 0评论 2017-12-07

谷歌白日梦进阶，让每个人都能玩转VR游戏的WebVR发布

今天，Google对Chrome 的WebVR功能作了更新，不仅增加了对Cardboard的支持，同时还为其所有在线VR Web内容构建了一个主页。心痒难耐的同学可以直接拉到文章第二部分，找到超低门槛点开网址就能玩的虚拟现实游戏链接。在谷歌的“白日梦”世界

limikospace / 0评论 2017-04-14

基于three.js编写的一个项目类示例代码

在开始之前，先对WebVR进行介绍，WebVR是一个实验性的Javascript API，允许HMD连接到web apps，同时能够接受这些设备的位置和动作信息。这让使用Javascript开发VR应用成为可能。而让我们能够立马进行预览与体验，移动设备上的

89317160 / 0评论 2018-01-05

Web前端中的增强现实（AR）开发技术

增强现实浪潮正滚滚而来，Web 浏览器作为人们最唾手可得的人机交互终端，正在大力发展 AR 技术。很多 Web 前端工程师也在寻求职业转型，于是我把我近半年的相关调研结果在此汇结成文。本文力求把目前前端方向的 AR 技术都罗列一遍，细节不赘述，只做概括和科

hjucook / 0评论 2018-05-25

VR浏览器，能否引爆新场景下的“入口之战“？

提及浏览器，可谓是一个古老的行业，伴随着互联网的发展延续至今。PC时代，微软凭借着IE的“免费+捆绑”策略保持了其长达10余年的垄断统治，一度占领着PC时代的入口。PC时代已经证明了浏览器商业化方向，作为一个高活跃度、强展现力的平台，浏览器在移动时代承载的

kfyzjd00 / 0评论 2016-12-20

微软已经开始为Edge浏览器研发WebVR技术

9月11日微软宣布在 Edge 浏览器上开始研发被称之为“网页图形的下一个前沿”--WebVR 技术，能够让“开发者为各种设备创建丰富的逼真沉浸式体验。”尽管目前已经有不少公司发布VR设备了，不过 WebVR 主要面向平台算法。不管你使用什么平台或者设

88427903 / 0评论 2016-09-12

分享6款优秀的 AR/VR 开源库

今天，为大家推荐几款优秀的 AR/VR 开源库，希望能对大家有所帮助~它适用于任何带有 webgl 和 webrtc 的手机，且运行速度非常快，在手机上也能高效运行，包括 Android、IOS 和 Windows phone 。好啦，今天的分享就是这些啦

VR产业分析和思考 / 0评论 2017-12-26