A-frame Study Notes

A-frame Overview

A-frame is an open source framework for creating 3D and VR experiences on the Web. It is more rapidly prototyping Webvr experience by the built-in MOZVR team, and we ask ourselves "what will virtual reality be like on the Web?" ”。 As today on the Web, we click on the link from a page to jump to the page, one day we will walk through the portal from the world to jump to all over the world. And there are worlds between which we need to WEBVR content jumps. Unfortunately, only a handful of the world's WebGL developers, but there are also millions of of web developers, web designers and 3D artists. A-aframe enables VR content to be created in everyone's hands.

A-frame is an entity component system based on the DOM interface framework used by Three.js . In A-frame everything is an entity, we plug in components and can compose appearance, behavior and functional integration at will.

Its project relies on document-register-element

Document-register-element independent work The lightweight version of the custom element specification, with which we can customize our HTML tags

  A-scene

Encapsulates all the panorama layouts implemented by the WebGL underlying API , such as VR mode, based on the detection Navigator.getvrdisplays () (detects any available VR devices connected to the computer)

A scene is created by A-scene , which is the root object of the panorama rendering, and all elements are placed in the a-scene component .

<a-scene> </a-scene>

A-sky

Each scene requires a background, can be placed directly src as a panorama picture, or directly render color values

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

A-box a-assets

Add textures to our cuboid, cylinder, and ball prototypes with <a-assets> markers

box, create shapes, such as boxes, cubes, or walls. This is an entity that specifies the geometry and Geometry primitive group box.

Defines the shape-size color value of a box img can refer to it as an ID , and then render the picture to this shape

<a-assets>

</a-assets>
<!--define a box--
<a-box src= "#texture" color= "#B76705" depth= "2" height= "2" width= "4" position= "0 0-1.25" ></a-box>

A-cylinder

Cylinder, which can be used to create tubes and surfaces.

<!--Add a pillar--
<a-cylinder color= "Yellow" height= "All" 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= "8" theta-length= "280" side= "double" position= " -20 0" ></ A-cylinder>

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

A-sphere

Create a spherical

<a-assets>

</a-assets>
<a-sphere src= "#darktexture" segments-height= ' segments-width= ' 36 '

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

A-camera

Specifies the mapping of components associated with the control of the camera component.

<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 create from a 3D Modeling program or download the Collada model from the Web . This is an entity thatsrc points to the model of the . Dae file

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

Creates a cone shape. This is an entity that specifies the geometry of the cone and the original geometry setting. Set rendering Textures

<a-assets>

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

You can define a cone like this alone

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

A-frame Study Notes