A-FRAME初体验
引言
简单介绍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>
相关推荐
VThree虚拟现实 2019-11-19
kfyzjd00 2017-10-26
华为开发者社区 2017-10-26
Jensony 2019-06-26
苗疆三刀的随手记 2019-06-25
83354297 2019-06-25
kfyzjd00 2019-06-25
心语家园 2019-06-25
87357660 2019-06-25
华为开发者社区 2019-06-25
88427903 2019-06-21
wangba 2019-06-21
89317160 2018-11-08
华为开发者社区 2018-02-26
87357660 2017-12-07
limikospace 2017-04-14
89317160 2018-01-05
hjucook 2018-05-25
kfyzjd00 2016-12-20