a-frame学习笔记

Posted 2020-08-02

A-frame

概观

A-Frame是在网络上创建3D和虚拟现实体验的开源框架。它由内置MozVR团队更迅速地原型WebVR经验，我们问自己“什么会在网络上的虚拟现实是什么样子？”。正如今天在网络上，我们点击链接从一个页面跳转到页面，有一天我们将通过门户网站步行从世界跳转到世界各地。并有世界之间，我们需要WebVR内容跳转。不幸的是，只有在世界WebGL的开发商屈指可数，但也有几百万的Web开发人员，网页设计师和3D艺术家。a-aframe使VR内容创作到每个人手中。

A-frame是一个实体组件系统基于three.js所使用DOM界面框架。在A-frame里一切都是实体，我们插入组件，可以随意撰写外观，行为和功能集成。

其项目依赖document-register-element

Document-register-element独立工作的W3C自定义元素规范的轻量级版本,有了它我们可以自定义我们的html标签

 

 

a-scene

封装了所有的webGL底层API实现的全景布局，比如VR模式，是根据检测navigator.getVRDisplays() （检测任何可用的VR设备连接到计算机）

一个场景是由a-scene创建的，是全景渲染的根对象，所有的元素都放在a-scene这个组件里

<a-scene> </a-scene>

 a-sky

每一个场景都需要一个背景，可以直接放置src为全景图片，或者直接渲染color值

<a-sky color="#cccccc" src="images/3video.jpg"></a-sky>

 

a-box  a-assets

通过<a-assets> 标记将纹理添加到我们的长方体、圆柱和球等原型上

盒子，创建形状，如框、多维数据集或墙壁。这是一个实体，它规定了几何与几何基元组框。

定义一个盒子的形状大小颜色值img可以以ID的形式引用它，然后渲染图片到这个形状上

<a-assets>
    <img id="texture" src="images/3video.jpg" >
</a-assets>
<!--定义一个盒子-->
<a-box src="#texture" color="#B76705" depth="2"height="2" width="4" position="0 0 -1.25"></a-box>

a-cylinder

圆柱体，它可用于创建管和曲面。

<!--添加一根柱子-->
<a-cylinder color="yellow" height="40" open-ended="true" radius="0.5" position="-40 0 -8"></a-cylinder>
<!-- Basic cylinder. -->
<a-cylinder color="crimson" height="8" radius="1.5" position="-40 0 8"></a-cylinder>
<!-- Hexagon. -->
<a-cylinder color="cyan" segments-radial="8"></a-cylinder>

<!-- Pac-man. -->
<a-cylinder color="yellow" theta-start="100" theta-length="280" side="double" position="-20 0 8"></a-cylinder>

<!-- Green pipe. -->
<a-cylinder color="green" open-ended="true"></a-cylinder>

a-sphere

创建一个球形

<a-assets>
    <img id="darktexture" src="images/5video.jpg" >
</a-assets>
<a-sphere src="#darktexture" segments-height=‘18‘ segments-width=‘36‘

 color="" radius="2" position="20 0 20"></a-sphere>

a-camera

规定相机组件与控件相关的组件的映射。

 <a-box look-at="#camera"></a-box>
    <a-camera id="camera"></a-camera>
<!--or-->
    <a-entity position="0 0 0">
        <a-camera></a-camera>
    </a-entity>

a-collada-model

a-collada-model从一个3D建模程序创建或从web下载COLLADA模型。这是一个实体，src指向模型的.dae文件

<a-scene>
    <a-assets>
        <a-asset-item id="tree" src="model/tree1.dae"></a-asset-item>
    </a-assets>
    <!-- Using the asset management system. -->

<a-collada-model src="#tree" position="1 0 -1"rotation="0 30 0" scale="1.4 1.4 1.4"></a-collada-model>

    <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
    <a-collada-model src="tree1.dae"></a-collada-model>
</a-scene>

 

A-cone

创建一个锥的形状。 这是一个实体，规定锥的几何与几何原始设置。设置渲染纹理

<a-assets>
    <img id="texture" src="images/icon.png">
</a-assets>

<!-- Basic cone. -->
<a-cone  color="pink" radius-bottom="2" radius-top="0.5"></a-cone>

<!-- Textured box. -->
<a-cone src="#texture"></a-cone>

可以单独这样定义一个锥形

<a-cone position="0 0 -20" rotation="35 45 30" height="10" radius-top="2"
        radius-bottom="10" color="#F3BA8D"></a-cone>