A-FRAME初体验

时间 2019-12-05

标签 frame 体验繁體版

原文原文链接

引言

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

标签

<a-scene>

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

建立画布、渲染器以及渲染循环java
默认的照相机和光影效果web
建立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，颜色是红色）spa

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

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

<!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>

相关文章

相关标签/搜索

全栈初体验

C++11下的初体验

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<