<a-triangle>

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.6.0 version

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

Attribute	Component Mapping	Default Value
ambient-occlusion-map	material.ambientOcclusionMap	None
ambient-occlusion-map-intensity	material.ambientOcclusionMapIntensity	1
ambient-occlusion-texture-offset	material.ambientOcclusionTextureOffset	0 0
ambient-occlusion-texture-repeat	material.ambientOcclusionTextureRepeat	1 1
color	material.color	#FFF
displacement-bias	material.displacementBias	0.5
displacement-map	material.displacementMap	None
displacement-scale	material.displacementScale	1
displacement-texture-offset	material.displacementTextureOffset	0 0
displacement-texture-repeat	material.displacementTextureRepeat	1 1
env-map	material.envMap	None
fog	material.fog	true
height	material.height	256
metalness	material.metalness	0
normal-map	material.normalMap	None
normal-scale	material.normalScale	1 1
normal-texture-offset	material.normalTextureOffset	0 0
normal-texture-repeat	material.normalTextureRepeat	1 1
repeat	material.repeat	1 1
roughness	material.roughness	0.5
spherical-env-map	material.sphericalEnvMap	None
src	material.src	None
vertex-a	geometry.vertexA	0 0.5 0
vertex-b	geometry.vertexB	-0.5 -0.5 0
vertex-c	geometry.vertexC	0.5 -0.5 0
width	material.width	512
wireframe	material.wireframe	false
wireframe-linewidth	material.wireframeLinewidth	2

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>