引言

简单介绍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查看整个场景的各个元素，红色方形并没有在初始化时候的视野范围内（黄色线标识的是三维视野边界）

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

<!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初体验相关推荐

  1. 树莓派2代B model 上手初体验，不用显示器，Python GPIO 点亮一颗LED

    开题:[好东西,值得研究!] 标题:树莓派2代B model 上手初体验,不用显示器,Python GPIO 点亮一颗LED [知识普及] 1,树莓派各版本对比: 2,树莓派2代BModel 主板,图 ...

  2. 激光雷达初体验 == 思岚A1M8 + Ubuntu 18.04 + ROS melodic + hector_slam

    一.开箱图 型号 RPLIDAR A1 配料 激光雷达一台 + usb 转接板一块 + 转接线一条 二.文档和SDK下载 (官网链接) RPILIDAR A1M8 简介与规格书 Datasheet R ...

  3. [OpenGL ES 01]OpenGL ES之初体验

    [OpenGL ES 01]OpenGL ES之初体验 罗朝辉 (http://blog.csdn.net/kesalin) 本文遵循"署名-非商业用途-保持一致"创作公用协议 一 ...

  4. 苹果电脑安装python3密码_mac系统安装Python3初体验

    前沿 对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...

  5. MapReduce编程初体验

    需求:在给定的文本文件中统计输出每一个单词出现的总次数 第一步: 准备一个aaa.txt文本文档 第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...

  6. 小程序 缩放_缩放流星应用程序的初体验

    小程序 缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...

  7. wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验

    wxWidgets刚開始学习的人导引全文件夹   PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...

  8. 用鸿蒙跑了个 “hello world”！鸿蒙开发初体验

    点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源 | https://my.oschina.net/u ...

  9. Windows Embedded Standard开发初体验(二)

    支持Silverlight的Windows Embedded Standard 好了,完成安装之后,我们就可以来做Windows Embedded Standard的第一个操作系统镜像了.在开始菜单中 ...

  10. 深度探索Hyperledger技术与应用之超级账本初体验（附部署代码）

    2019独角兽企业重金招聘Python工程师标准>>> 本章零基础地介绍了如何快速体验超级账本搭建的区块链网络,我们先绕过了比较复杂的初始化配置,用官方提供的fabric-sampl ...

最新文章

  1. 【MongoDB】chunk too big to move的解决方案
  2. win10 看不到其它计算机,w10网上邻居搜索不到其它电脑怎么办
  3. aspose授权亲测可用配套代码
  4. 连接器篇（一） 低频系列
  5. 【STM32】 keil新建工程模板
  6. 用友企业互联网服务产品闪亮2016中国互联网大会
  7. eBPF bpftrace 实现个UNIX socket抓包试试
  8. 单片机和微型计算机异同,微机与单片机有什么主要的区别？
  9. 流程图函数’怎么画_程序员必备画图技能之——流程图
  10. vue + el-menu 实现菜单栏无限多层级分类
  11. WSUS:数据库从WID 换成 SQLExpress
  12. 正交试验法生成测试用例工具PICT
  13. TensorFlow之saved_model使用笔记
  14. DirectX示例翻译和解析StateManager Sample
  15. 红罐王老吉品牌定位战略
  16. 怎么在服务器里设置账号,云服务器怎么设置账号安全
  17. swagger初体验
  18. 快递物流查询，教你自动查询并识别所有快递是否签收、退回
  19. 分页存储概念清晰梳理（页面、页表、页表项、页面大小、页内地址等概念）
  20. 用仿ActionScript的语法来编写html5——第七篇，自定义按钮

热门文章

  1. sql server insert values 多值 与oracle 的不同
  2. 【C++】函数指针的嵌套
  3. 存储过程编写经验和优化措施
  4. 【转载】python学习之 字符串前'r'的用法
  5. 折线分割平面(hdoj 2050,动态规划递推)
  6. 块存储、文件存储、对象存储这三者和分布式文件存储系统的本质区别
  7. hive(让我凌乱的一天)
  8. Arista将Spine-Leaf路由/交换产品进行芯片升级
  9. template might not exist or might not be accessible by any of the configured Template Resolvers
  10. 2015年6月9日_诗词学习