diff --git a/404.html b/404.html index 49a5a63f6..2455c7382 100644 --- a/404.html +++ b/404.html @@ -26,8 +26,8 @@ data-title="{title} | A-Frame" data-is-spa="false" data-ga-id="UA-111391431-24" - data-aframe-version="1.4.0" - data-docs-version="1.4.0"> + data-aframe-version="1.5.0" + data-docs-version="1.5.0"> A-Frame @@ -147,7 +147,7 @@

+ data-aframe-version="1.5.0" + data-docs-version="1.5.0"> A-Frame @@ -458,7 +458,7 @@

Examples

+ + + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-cylinder.html b/docs/1.5.0/primitives/a-cylinder.html new file mode 100644 index 000000000..8eb39e662 --- /dev/null +++ b/docs/1.5.0/primitives/a-cylinder.html @@ -0,0 +1,1434 @@ + + + + + + + + + + + + + + + + + + <a-cylinder> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-cylinder> +

+ + + + + + +

The cylinder primitive is used to create tubes and curved surfaces.

+

Examples

The cylinder primitive is versatile and can be used to create different kinds of shapes:

+
<!-- Basic cylinder. -->
<a-cylinder color="crimson" height="3" radius="1.5"></a-cylinder>

<!-- Hexagon. -->
<a-cylinder color="cyan" segments-radial="6"></a-cylinder>

<!-- Pac-man. -->
<a-cylinder color="yellow" theta-start="50" theta-length="280" side="double"></a-cylinder>

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

In degrees, thetaStart defines where to start the arc and thetaLength defines where the arc ends.

+

Also, we can create a tube by making the cylinder open-ended, which removes the top and bottom surfaces of the cylinder such that the inside is visible. Then, we need a double-sided material to render properly:

+
<a-cylinder color="cyan" material="side: double" open-ended="true" rotation="90 0 0"></a-cylinder>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
colormaterial.color#FFF
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightgeometry.height1
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
open-endedgeometry.openEndedfalse
radiusgeometry.radius1
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
segments-heightgeometry.segmentsHeight18
segments-radialgeometry.segmentsRadial36
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
theta-lengthgeometry.thetaLength360
theta-startgeometry.thetaStart0
widthmaterial.width512
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-dodecahedron.html b/docs/1.5.0/primitives/a-dodecahedron.html new file mode 100644 index 000000000..46d7e7ce4 --- /dev/null +++ b/docs/1.5.0/primitives/a-dodecahedron.html @@ -0,0 +1,1434 @@ + + + + + + + + + + + + + + + + + + <a-dodecahedron> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-dodecahedron> +

+ + + + + + +

Example

<a-dodecahedron color="#FF926B" radius="5"></a-dodecahedron>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
colormaterial.color#FFF
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightmaterial.height256
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
open-endedgeometry.openEndedfalse
radius-bottomgeometry.radiusBottom1
radius-topgeometry.radiusTop0.8
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
segments-heightgeometry.segmentsHeight18
segments-radialgeometry.segmentsRadial36
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
theta-lengthgeometry.thetaLength360
theta-startgeometry.thetaStart0
widthmaterial.width512
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-gltf-model.html b/docs/1.5.0/primitives/a-gltf-model.html new file mode 100644 index 000000000..ab15af0eb --- /dev/null +++ b/docs/1.5.0/primitives/a-gltf-model.html @@ -0,0 +1,1281 @@ + + + + + + + + + + + + + + + + + + <a-gltf-model> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-gltf-model> +

+ + + + + + +

The glTF model primitive displays a 3D glTF model created from a 3D +modeling program or downloaded from the web.

+

Example

<a-scene>
  <a-assets>
    <a-asset-item id="tree" src="tree.gltf"></a-asset-item>
  </a-assets>

  <!-- Using the asset management system. -->
  <a-gltf-model src="#tree"></a-gltf-model>

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

Attribute

+ + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
srcgltf-model.srcnull
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-icosahedron.html b/docs/1.5.0/primitives/a-icosahedron.html new file mode 100644 index 000000000..670eb4cc5 --- /dev/null +++ b/docs/1.5.0/primitives/a-icosahedron.html @@ -0,0 +1,1409 @@ + + + + + + + + + + + + + + + + + + <a-icosahedron> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-icosahedron> +

+ + + + + + +

Example

<a-icosahedron color="#FF926B" radius="5"></a-icosahedron>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
colormaterial.color#FFF
detailgeometry.detail0
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightmaterial.height256
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
radiusgeometry.radius1
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
widthmaterial.width512
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-image.html b/docs/1.5.0/primitives/a-image.html new file mode 100644 index 000000000..ba55ea486 --- /dev/null +++ b/docs/1.5.0/primitives/a-image.html @@ -0,0 +1,1354 @@ + + + + + + + + + + + + + + + + + + <a-image> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-image> +

+ + + + + + +

The image primitive shows an image on a flat plane.

+

Example

<a-scene>
  <a-assets>
    <img id="my-image" src="image.png">
  </a-assets>

  <!-- Using the asset management system. -->
  <a-image src="#my-image"></a-image>

  <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
  <a-image src="another-image.png"></a-image>
</a-scene>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
colormaterial.color#FFF
heightgeometry.height1
metalnessmaterial.metalness0
opacitymaterial.opacity1
repeatmaterial.repeatNone
roughnessmaterial.roughness0.5
segments-heightgeometry.segmentsHeight1
segments-widthgeometry.segmentsWidth1
shadermaterial.shaderflat
sidematerial.sidefront
srcmaterial.srcNone
transparentmaterial.transparenttrue
widthgeometry.width1
+

Fine-Tuning

Ensuring that the image is not distorted by stretching requires us to appropriately set the width and height preserving the original aspect ratio of the image. This properties are set in meters, don’t confuse with pixels.

+

For example, a 2:1 image:

+
<a-image src="#logo" width="3" height="1.5"></a-image>
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-light.html b/docs/1.5.0/primitives/a-light.html new file mode 100644 index 000000000..8b0fd67cb --- /dev/null +++ b/docs/1.5.0/primitives/a-light.html @@ -0,0 +1,1338 @@ + + + + + + + + + + + + + + + + + + <a-light> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-light> +

+ + + + + + +

A light changes the lighting and shading of the scene.

+

Examples

<!-- Red directional light shining from the top left. -->
<a-light color="red" position="-1 1 0"></a-light>

<!-- Blue point light, 5 meters in the air. -->
<a-light type="point" color="blue" position="0 5 0"></a-light>

<!-- Dim ambient lighting. -->
<a-light type="ambient" color="#222"></a-light>

<!-- Probe light using the #pisa environment map -->
<a-assets>
	<a-cubemap id="pisa">
	<img src="https://threejs.org/examples/textures/cube/pisa/px.png">
	<img src="https://threejs.org/examples/textures/cube/pisa/nx.png">
	<img src="https://threejs.org/examples/textures/cube/pisa/py.png">
	<img src="https://threejs.org/examples/textures/cube/pisa/ny.png">
	<img src="https://threejs.org/examples/textures/cube/pisa/pz.png">
	<img src="https://threejs.org/examples/textures/cube/pisa/nz.png">
	</a-cubemap>
</a-assets>

<a-light type="probe" envMap="#pisa"></a-light>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
anglelight.angle60
colorlight.color#fff
decaylight.decay1
distancelight.distance0.0
envmaplight.envMapnull
ground-colorlight.groundColor#fff
intensitylight.intensity1.0
penumbralight.penumbra0.0
typelight.typedirectional
targetlight.targetnull
+

Differences with the Default Lighting

When we add a light, A-Frame will remove the default lighting setup (i.e., one +directional light from the top-left, and one small ambient light).

+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-link.html b/docs/1.5.0/primitives/a-link.html new file mode 100644 index 000000000..8cdf2e232 --- /dev/null +++ b/docs/1.5.0/primitives/a-link.html @@ -0,0 +1,1278 @@ + + + + + + + + + + + + + + + + + + <a-link> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-link> +

+ + + + + + +

The link primitive provides a compact API to define links that resembles +the traditional <a> tag.

+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
hreflink.href
titlelink.title
srclink.src
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-obj-model.html b/docs/1.5.0/primitives/a-obj-model.html new file mode 100644 index 000000000..d09047842 --- /dev/null +++ b/docs/1.5.0/primitives/a-obj-model.html @@ -0,0 +1,1304 @@ + + + + + + + + + + + + + + + + + + <a-obj-model> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-obj-model> +

+ + + + + + +
+

We recommend glTF for distributing assets in production over the web. Check +out using the glTF model primitive. You can +either instead export to COLLADA and use the +converter or try out the OBJ +converter.

+
+

The .OBJ model primitive displays a 3D Wavefront model.

+

Example

<a-scene>
  <a-assets>
    <a-asset-item id="crate-obj" src="crate.obj"></a-asset-item>
    <a-asset-item id="crate-mtl" src="crate.mtl"></a-asset-item>
  </a-assets>

  <!-- Using the asset management system. -->
  <a-obj-model src="#crate-obj" mtl="#crate-mtl"></a-obj-model>

  <!-- Defining the URL inline. Not recommended but may be more comfortable. -->
  <a-obj-model src="crate.obj" mtl="crate.mtl"></a-obj-model>
</a-scene>
+

Attribute

+ + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
mtlobj-model.mtlnull
srcobj-model.objnull
+

Troubleshooting

See Introduction → 3D Models → Troubleshooting.

+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-octahedron.html b/docs/1.5.0/primitives/a-octahedron.html new file mode 100644 index 000000000..f64865b44 --- /dev/null +++ b/docs/1.5.0/primitives/a-octahedron.html @@ -0,0 +1,1409 @@ + + + + + + + + + + + + + + + + + + <a-octahedron> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-octahedron> +

+ + + + + + +

Example

<a-octahedron color="#FF926B" radius="5"></a-octahedron>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
colormaterial.color#FFF
detailgeometry.detail0
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightmaterial.height256
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
radiusgeometry.radius1
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
widthmaterial.width512
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-plane.html b/docs/1.5.0/primitives/a-plane.html new file mode 100644 index 000000000..52d448a12 --- /dev/null +++ b/docs/1.5.0/primitives/a-plane.html @@ -0,0 +1,1425 @@ + + + + + + + + + + + + + + + + + + <a-plane> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-plane> +

+ + + + + + +

The plane primitive creates flat surfaces using the geometry +component with the type set to plane.

+

Example

<a-scene>
  <a-assets>
    <img id="ground" src="ground.jpg">
  </a-assets>

  <!-- Basic plane. -->
  <a-plane color="#CCC" height="20" width="20"></a-plane>

  <!-- Textured plane parallel to ground. -->
  <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
</a-scene>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
colormaterial.color#FFF
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightgeometry.height1
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
segments-heightgeometry.segmentsHeight1
segments-widthgeometry.segmentsWidth1
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
widthgeometry.width1
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+

Parallelizing to the Ground

To make a plane parallel to the ground or make a plane the ground itself, +rotate it around the X-axis:

+
<a-plane rotation="-90 0 0"></a-plane>
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-ring.html b/docs/1.5.0/primitives/a-ring.html new file mode 100644 index 000000000..de531b73c --- /dev/null +++ b/docs/1.5.0/primitives/a-ring.html @@ -0,0 +1,1430 @@ + + + + + + + + + + + + + + + + + + <a-ring> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-ring> +

+ + + + + + +

The ring primitive creates a ring or disc shape.

+

Example

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

<!-- Basic ring. -->
<a-ring color="teal" radius-inner="1" radius-outer="2"></a-ring>

<!-- Textured ring. -->
<a-ring src="#texture"></a-ring>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
colormaterial.color#FFF
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightmaterial.height256
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
radius-innergeometry.radiusInner0.8
radius-outergeometry.radiusOuter1.2
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
segments-phigeometry.segmentsPhi10
segments-thetageometry.segmentsTheta32
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
theta-lengthgeometry.thetaLength360
theta-startgeometry.thetaStart0
widthmaterial.width512
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-sky.html b/docs/1.5.0/primitives/a-sky.html new file mode 100644 index 000000000..e497fb5d2 --- /dev/null +++ b/docs/1.5.0/primitives/a-sky.html @@ -0,0 +1,1398 @@ + + + + + + + + + + + + + + + + + + <a-sky> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-sky> +

+ + + + + + +

The sky primitive adds a background color or 360° image to a scene. A sky +is a large sphere with a color or texture mapped to the inside.

+

Example

An equirectangular image as a background:

+
<a-scene>
  <a-assets>
    <img id="sky" src="sky.png">
  </a-assets>
  <a-sky src="#sky"></a-sky>
</a-scene>
+

A plain color as a background:

+
<a-sky color="#6EBAA7"></a-sky>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
colormaterial.color#FFF
metalnessmaterial.metalness0
opacitymaterial.opacity1
phi-lengthgeometry.phiLength360
phi-startgeometry.phiStart0
radiusgeometry.radius500
repeatmaterial.repeatNone
roughnessmaterial.roughness0.5
segments-heightgeometry.segmentsHeight32
segments-widthgeometry.segmentsWidth64
shadermaterial.shaderflat
sidematerial.sideback
srcmaterial.srcNone
theta-lengthgeometry.thetaLength180
theta-startgeometry.thetaStart0
transparentmaterial.transparentfalse
+

Equirectangular Image

To be seamless, images should be +equirectangular. We +can find some sample equirectangular images on +Flickr. To take an +equirectangular photo, check out this 360-degree photography +guide.

+ + + +
+ + +
+ + + +
+ +
+ + + + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-sound.html b/docs/1.5.0/primitives/a-sound.html new file mode 100644 index 000000000..07469cc63 --- /dev/null +++ b/docs/1.5.0/primitives/a-sound.html @@ -0,0 +1,1300 @@ + + + + + + + + + + + + + + + + + + <a-sound> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-sound> +

+ + + + + + +

The sound primitive wraps the sound component.

+

Example

<a-scene>
  <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
</a-scene>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
autoplaysound.autoplayfalse
loopsound.loopfalse
onsound.onnull
srcsound.srcnull
volumesound.volume1
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-sphere.html b/docs/1.5.0/primitives/a-sphere.html new file mode 100644 index 000000000..6f529135e --- /dev/null +++ b/docs/1.5.0/primitives/a-sphere.html @@ -0,0 +1,1435 @@ + + + + + + + + + + + + + + + + + + <a-sphere> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-sphere> +

+ + + + + + +

The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

+

Example

<a-sphere color="yellow" radius="5"></a-sphere>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
colormaterial.color#FFF
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightmaterial.height256
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
phi-lengthgeometry.phiLength360
phi-startgeometry.phiStart0
radiusgeometry.radius1
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
segments-heightgeometry.segmentsHeight18
segments-widthgeometry.segmentsWidth36
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
theta-lengthgeometry.thetaLength180
theta-startgeometry.thetaStart0
widthmaterial.width512
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-tetrahedron.html b/docs/1.5.0/primitives/a-tetrahedron.html new file mode 100644 index 000000000..be0f3d006 --- /dev/null +++ b/docs/1.5.0/primitives/a-tetrahedron.html @@ -0,0 +1,1409 @@ + + + + + + + + + + + + + + + + + + <a-tetrahedron> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-tetrahedron> +

+ + + + + + +

Example

<a-tetrahedron color="#FF926B" radius="5"></a-tetrahedron>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
colormaterial.color#FFF
detailgeometry.detail0
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightmaterial.height256
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
radiusgeometry.radius1
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
widthmaterial.width512
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-text.html b/docs/1.5.0/primitives/a-text.html new file mode 100644 index 000000000..c0315a880 --- /dev/null +++ b/docs/1.5.0/primitives/a-text.html @@ -0,0 +1,1371 @@ + + + + + + + + + + + + + + + + + + <a-text> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-text> +

+ + + + + + +

Wraps the text component.

+

Example

<a-text value="Hello, World!"></a-text>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent Mapping
aligntext.align
alpha-testtext.alphaTest
anchortext.anchor
baselinetext.baseline
colortext.color
fonttext.font
font-imagetext.fontImage
heighttext.height
letter-spacingtext.letterSpacing
line-heighttext.lineHeight
opacitytext.opacity
shadertext.shader
sidetext.side
tab-sizetext.tabSize
transparenttext.transparent
valuetext.value
white-spacetext.whiteSpace
widthtext.width
wrap-counttext.wrapCount
wrap-pixelstext.wrapPixels
z-offsettext.zOffset
+

Limitations

To interact with the text via raycaster or cursor, we need to add geometry like a plane to the text.

+
<a-text value="Now Interactable" geometry="primitive:plane"></a-text>
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-torus-knot.html b/docs/1.5.0/primitives/a-torus-knot.html new file mode 100644 index 000000000..bca62bc85 --- /dev/null +++ b/docs/1.5.0/primitives/a-torus-knot.html @@ -0,0 +1,1431 @@ + + + + + + + + + + + + + + + + + + <a-torus-knot> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-torus-knot> +

+ + + + + + +

The torus knot primitive creates pretzel shapes using the geometry +component with the type set to torusKnot.

+

Example

<a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
colormaterial.color#FFF
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightmaterial.height256
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
pgeometry.p2
qgeometry.q3
radiusgeometry.radius1
radius-tubulargeometry.radiusTubular0.2
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
segments-radialgeometry.segmentsRadial8
segments-tubulargeometry.segmentsTubular100
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
widthmaterial.width512
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-torus.html b/docs/1.5.0/primitives/a-torus.html new file mode 100644 index 000000000..eba8e24d4 --- /dev/null +++ b/docs/1.5.0/primitives/a-torus.html @@ -0,0 +1,1426 @@ + + + + + + + + + + + + + + + + + + <a-torus> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-torus> +

+ + + + + + +

The torus primitive creates donut or tube shapes using the geometry +component with the type set to torus.

+

Example

<a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
arcgeometry.arc360
colormaterial.color#FFF
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightmaterial.height256
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
radiusgeometry.radius1
radius-tubulargeometry.radiusTubular0.2
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
segments-radialgeometry.segmentsRadial36
segments-tubulargeometry.segmentsTubular32
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
widthmaterial.width512
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-triangle.html b/docs/1.5.0/primitives/a-triangle.html new file mode 100644 index 000000000..7f3934b75 --- /dev/null +++ b/docs/1.5.0/primitives/a-triangle.html @@ -0,0 +1,1429 @@ + + + + + + + + + + + + + + + + + + <a-triangle> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-triangle> +

+ + + + + + +

The triangle primitive creates triangle surfaces using the geometry +component with the type set to triangle.

+

Example

<a-scene>
  <a-assets>
    <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
  </a-assets>

  <!-- Basic triangle. -->
  <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

  <!-- Textured triangle parallel to ground. -->
  <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
</a-scene>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
colormaterial.color#FFF
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
env-mapmaterial.envMapNone
fogmaterial.fogtrue
heightmaterial.height256
metalnessmaterial.metalness0
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
vertex-ageometry.vertexA0 0.5 0
vertex-bgeometry.vertexB-0.5 -0.5 0
vertex-cgeometry.vertexC0.5 -0.5 0
widthmaterial.width512
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2
+

Parallelizing to the Ground

To make a triangle parallel to the ground, rotate it around the X-axis:

+
<a-triangle rotation="-90 0 0"></a-triangle>
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-video.html b/docs/1.5.0/primitives/a-video.html new file mode 100644 index 000000000..26a5b0e49 --- /dev/null +++ b/docs/1.5.0/primitives/a-video.html @@ -0,0 +1,1372 @@ + + + + + + + + + + + + + + + + + + <a-video> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-video> +

+ + + + + + +

The video primitive plays a video as a texture on a flat plane.

+

Example

<a-scene>
  <a-assets>
    <video id="penguin-sledding" autoplay loop="true" src="penguin-sledding.mp4"></video>
  </a-assets>

  <!-- Using the asset management system. -->
  <a-video src="#penguin-sledding" width="16" height="9" position="0 0 -20"></a-video>

  <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
  <a-video src="airbending.mp4"></a-video>
</a-scene>
+

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
colormaterial.color#FFF
heightgeometry.height1.75
metalnessmaterial.metalness0
opacitymaterial.opacity1
repeatmaterial.repeatNone
roughnessmaterial.roughness0.5
segments-heightgeometry.segmentsHeight1
segments-widthgeometry.segmentsWidth1
shadermaterial.shaderflat
sidematerial.sidefront
srcmaterial.srcNone
transparentmaterial.transparentfalse
widthgeometry.width3
+

Caveats

iOS has a lot of restrictions on playing videos in the browser. To play an inline video texture, we must:

+
    +
  • Set the <meta name="apple-mobile-web-app-capable" content="yes"> meta tag. A-Frame will inject this if missing.
    • +
  • Set the webkit-playsinline and playsinline attribute to the video element. A-Frame will add this to all videos if missing).
    • +
+

Since iOS 11, iOS has required user interaction to trigger video playback. This is also true on a number of Android device and +browser combinations.

+

Fine-Tuning

Ensuring that the video is not distorted by stretching requires us to appropriately set the width and height preserving the original aspect ratio of the video. This properties are set in meters, don’t confuse with pixels.

+

For example, a 2:1 video:

+
<a-video src="#myvideo" width="3" height="1.5"></a-video>
+ + + +
+ + +
+ + + +
+ +
+ + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/1.5.0/primitives/a-videosphere.html b/docs/1.5.0/primitives/a-videosphere.html new file mode 100644 index 000000000..498e65f82 --- /dev/null +++ b/docs/1.5.0/primitives/a-videosphere.html @@ -0,0 +1,1370 @@ + + + + + + + + + + + + + + + + + + <a-videosphere> – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + 1.5.0 › Primitives + +

+
+

+ <a-videosphere> +

+ + + + + + +

The videosphere primitive plays 360° videos in the background of the scene. +Videospheres are a large sphere with the video texture mapped to the inside.

+

Examples

<a-scene>
  <a-assets>
    <video id="antarctica" autoplay loop="true" src="antarctica.mp4"> </video>
  </a-assets>

  <!-- Using the asset management system. -->
  <a-videosphere src="#antarctica"></a-videosphere>

  <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
  <a-videosphere src="africa.mp4"></a-videosphere>
</a-scene>
+

Methods

More indepth knowledge on the methods to alter video material can be seen over here

+
// to set specific time of video
document.querySelector("#antarctica").components.material.data.src.currentTime = 0 // start of video

// to play the videosphere
document.querySelector("#antarctica").components.material.material.map.image.play();
+

Attributes

Note that the videosphere primitive inherits common attributes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeComponent MappingDefault Value
autoplay<video>.autoplaytrue
crossOrigin<video>.crossOriginanonymous
loop<video>.looptrue
radiusgeometry.radius5000
segments-heightgeometry.segmentsHeight64
segments-widthgeometry.segmentsWidth64
+

Equirectangular Video

To be seamless, source videos should be equirectangular.

+

Caveats

iOS has a lot of restrictions on playing videos in the browser. To play an inline video texture, we must:

+
    +
  • Set the <meta name="apple-mobile-web-app-capable" content="yes"> meta tag. A-Frame will inject this if missing.
    • +
  • Set the webkit-playsinline and playsinline attribute to the video element. A-Frame will add this to all videos if missing).
    • +
  • Pin the webpage to the iOS homescreen.
    • +
+

Inline video support on iOS 10 may change this. On certain Android devices or +browsers, we must:

+
    +
  • Require user interaction to trigger the video (such as a click or tap event). See Chromium Bug 178297
    • +
+ + + +
+ + +
+ + + +
+ +
+ + + + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/guide/index.html b/docs/guide/index.html index 5259ff91e..bac9945d9 100644 --- a/docs/guide/index.html +++ b/docs/guide/index.html @@ -1 +1 @@ -Redirecting... \ No newline at end of file +Redirecting... \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 5259ff91e..bac9945d9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -Redirecting... \ No newline at end of file +Redirecting... \ No newline at end of file diff --git a/docs/master/components/anchored.html b/docs/master/components/anchored.html new file mode 100644 index 000000000..2e660b8c4 --- /dev/null +++ b/docs/master/components/anchored.html @@ -0,0 +1,1298 @@ + + + + + + + + + + + + + + + + + + anchored – A-Frame + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ +
+ + + + +
+
+ ≡ +

A-Frame

+ +
+ + + + +
+
+

+ + master › Components + +

+
+

+ anchored +

+ + + + + +
+

NOTE: This version of the documentation tracks unstable development happening on A-Frame’s master branch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 1.5.0 version

+
+ + + +

It requires a browser supporting the WebXR Anchors module.

+

Fix any entity to a position and rotation in the real world. Apply the anchored component to an entity and call the method el.components.createAnchor(position, quaternion) to anchor it to a position and rotation corresponding to real world coordinates. If creatorAnchor is not called the entity is anchored to its initial position and rotation. The anchoring only applies when in immersive mode.

+

Example

<a-entity id="myBox" anchored="persistent: true" geometry="primitive: box" material="color: red"></a-entity>
+

Properties

+ + + + + + + + + + + + +
PropertiesDescription
persistentIf the anchor persists on page reloads. The entity must have an id.
+ + + +
+ + +
+ + + +
+ +
+ + + + + + + + +
+ Edit Page + + View Source + +
+
+
+ +
+ + + + + + + + + + + + + + + + + diff --git a/docs/master/components/animation.html b/docs/master/components/animation.html index 396f5112f..c5efc6a66 100644 --- a/docs/master/components/animation.html +++ b/docs/master/components/animation.html @@ -26,10 +26,10 @@ data-title="{title} | A-Frame" data-is-spa="false" data-ga-id="UA-111391431-24" - data-aframe-version="1.4.0" + data-aframe-version="1.5.0" data-docs-version="master"> - Animation – A-Frame + animation – A-Frame +