25+ primitive HTML elements providing a high-level declarative interface to A-Frame functionality, from basic shapes to complex VR interactions.
The root container element that manages rendering, systems, and global settings.
<!-- Scene element with common configurations -->
<a-scene
background="color: #ECECEC"
fog="type: linear; color: #AAA; far: 50; near: 0"
stats
embedded
vr-mode-ui="enabled: false">
<!-- All other elements go inside a-scene -->
</a-scene>Fundamental 3D shapes for building VR/AR experiences.
<!-- Box primitive -->
<a-box
position="0 0.5 0"
rotation="0 45 0"
color="#4CC3D9"
width="1"
height="1"
depth="1"
segments-width="1"
segments-height="1"
segments-depth="1">
</a-box>
<!-- Sphere primitive -->
<a-sphere
position="0 1.25 -5"
radius="1.25"
color="#EF2D5E"
segments-width="18"
segments-height="36"
phi-start="0"
phi-length="360"
theta-start="0"
theta-length="180">
</a-sphere>
<!-- Plane primitive -->
<a-plane
position="0 0 -4"
rotation="-90 0 0"
width="4"
height="4"
color="#7BC8A4"
segments-width="1"
segments-height="1">
</a-plane>
<!-- Cylinder primitive -->
<a-cylinder
position="1 0.75 -3"
radius="0.5"
height="1.5"
color="#FFC65D"
segments-radial="36"
segments-height="1"
open-ended="false"
theta-start="0"
theta-length="360">
</a-cylinder>
<!-- Circle primitive -->
<a-circle
position="0 1 -3"
radius="1"
color="teal"
segments="32"
theta-start="0"
theta-length="360">
</a-circle>
<!-- Ring primitive -->
<a-ring
position="0 1 -3"
color="orange"
radius-inner="0.5"
radius-outer="1"
segments-phi="32"
segments-theta="8"
theta-start="0"
theta-length="360">
</a-ring>
<!-- Triangle primitive -->
<a-triangle
position="0 1 -3"
color="purple"
vertex-a="0 1 0"
vertex-b="-1 -1 0"
vertex-c="1 -1 0">
</a-triangle>Advanced geometric shapes for detailed 3D modeling.
<!-- Cone primitive -->
<a-cone
position="0 1 -3"
color="yellow"
radius-bottom="1"
radius-top="0.1"
height="2"
segments-radial="36"
segments-height="1"
open-ended="false"
theta-start="0"
theta-length="360">
</a-cone>
<!-- Torus primitive -->
<a-torus
position="0 1 -3"
color="green"
radius="1"
radius-tubular="0.2"
segments-radial="36"
segments-tubular="32"
arc="360">
</a-torus>
<!-- Torus knot primitive -->
<a-torus-knot
position="0 1 -3"
color="blue"
radius="1"
radius-tubular="0.1"
p="2"
q="3"
segments-radial="64"
segments-tubular="8">
</a-torus-knot>
<!-- Dodecahedron primitive -->
<a-dodecahedron
position="0 1 -3"
color="magenta"
radius="1"
detail="0">
</a-dodecahedron>
<!-- Icosahedron primitive -->
<a-icosahedron
position="0 1 -3"
color="cyan"
radius="1"
detail="0">
</a-icosahedron>
<!-- Octahedron primitive -->
<a-octahedron
position="0 1 -3"
color="red"
radius="1"
detail="0">
</a-octahedron>
<!-- Tetrahedron primitive -->
<a-tetrahedron
position="0 1 -3"
color="lime"
radius="1"
detail="0">
</a-tetrahedron>Primitives for loading external 3D models and assets.
<!-- GLTF model primitive -->
<a-gltf-model
src="#myModel"
position="0 0 -5"
scale="0.5 0.5 0.5"
animation-mixer="clip: *">
</a-gltf-model>
<!-- OBJ model primitive -->
<a-obj-model
src="#objModel"
mtl="#materialFile"
position="0 0 -5">
</a-obj-model>
<!-- Collada model primitive -->
<a-collada-model
src="#colladaModel"
position="0 0 -5">
</a-collada-model>Primitives for displaying images, videos, and audio in 3D space.
<!-- Image primitive -->
<a-image
src="#myImage"
position="0 2 -3"
width="4"
height="2.25"
transparent="true"
alpha-test="0.5">
</a-image>
<!-- Video primitive -->
<a-video
src="#myVideo"
position="0 2 -3"
width="4"
height="2.25"
autoplay="true"
loop="true">
</a-video>
<!-- Video sphere primitive (360 video) -->
<a-videosphere
src="#my360Video"
rotation="0 180 0"
autoplay="true"
loop="true">
</a-videosphere>
<!-- Sound primitive -->
<a-sound
src="#myAudio"
autoplay="true"
loop="true"
volume="0.5"
positional="true"
max-distance="10"
ref-distance="1">
</a-sound>Primitive elements for scene illumination and atmosphere.
<!-- Light primitive -->
<a-light
type="point"
position="0 5 0"
color="white"
intensity="2"
distance="0"
decay="1"
cast-shadow="true">
</a-light>
<a-light
type="directional"
position="-0.5 1 1"
color="#FFF"
intensity="0.6"
cast-shadow="true"
shadow-map-width="2048"
shadow-map-height="2048">
</a-light>
<a-light
type="ambient"
color="#404040"
intensity="0.2">
</a-light>
<!-- Sky primitive (skybox/background) -->
<a-sky
color="#ECECEC">
</a-sky>
<a-sky
src="#skyTexture"
rotation="0 90 0">
</a-sky>
<!-- Gradient sky -->
<a-sky
material="shader: gradient; topColor: 10 10 200; bottomColor: 200 200 10">
</a-sky>3D text rendering with typography controls.
<a-text
value="Hello, A-Frame!"
position="0 2 -3"
align="center"
color="#BBB"
font="dejavu"
width="8"
letter-spacing="2"
line-height="1.2"
tab-size="4"
baseline="center"
anchor="center"
geometry="primitive: plane"
material="color: blue"
shader="msdf"
transparent="true"
opacity="0.8">
</a-text>Primitives for user interaction and VR/AR controls.
<!-- Cursor primitive -->
<a-cursor
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat"
fuse="true"
fuse-timeout="1500"
raycaster="objects: .clickable">
</a-cursor>
<!-- Link primitive (scene navigation) -->
<a-link
href="scene2.html"
title="Go to Scene 2"
image="#linkThumbnail"
position="0 1.5 -3"
geometry="primitive: plane; width: 1; height: 1"
material="shader: portal; side: double">
</a-link>Container elements for managing scene assets and reusable content.
<!-- Assets container -->
<a-assets>
<!-- Images -->
<img id="skyTexture" src="sky.jpg">
<img id="floorTexture" src="floor.jpg">
<!-- Audio -->
<audio id="backgroundMusic" src="music.mp3" preload="auto"></audio>
<!-- Videos -->
<video id="videoScreen" src="video.mp4" preload="auto" loop="true" autoplay="true"></video>
<!-- 3D Models -->
<a-asset-item id="treeModel" src="tree.gltf"></a-asset-item>
<a-asset-item id="carModel" src="car.obj"></a-asset-item>
<a-asset-item id="carMaterials" src="car.mtl"></a-asset-item>
<!-- Mixins (reusable component sets) -->
<a-mixin
id="red-cube"
geometry="primitive: box"
material="color: red">
</a-mixin>
<a-mixin
id="blue-sphere"
geometry="primitive: sphere; radius: 0.5"
material="color: blue; metalness: 0.2">
</a-mixin>
</a-assets>
<!-- Mixin usage -->
<a-entity mixin="red-cube" position="1 0 -3"></a-entity>
<a-entity mixin="blue-sphere" position="-1 1 -4"></a-entity>
<!-- Cubemap primitive -->
<a-cubemap
id="myCubemap"
src="posx.jpg negx.jpg posy.jpg negy.jpg posz.jpg negz.jpg">
</a-cubemap>The base primitive for creating custom entities with specific component combinations.
<!-- Generic entity with custom components -->
<a-entity
position="0 1 -3"
geometry="primitive: box; width: 1; height: 1; depth: 1"
material="color: red; metalness: 0.5; roughness: 0.2"
animation="property: rotation; to: 0 360 0; loop: true; dur: 5000"
sound="src: #clickSound; on: click"
class="clickable"
my-custom-component="enabled: true">
</a-entity>
<!-- Entity with multiple animations -->
<a-entity
geometry="primitive: sphere"
material="color: blue"
position="0 1 -5"
animation__rotate="property: rotation; to: 0 360 0; loop: true; dur: 10000"
animation__bounce="property: position; to: 0 2 -5; dir: alternate; loop: true; dur: 2000"
animation__scale="property: scale; to: 1.2 1.2 1.2; dir: alternate; loop: true; dur: 1000; startEvents: mouseenter"
animation__color="property: material.color; to: red; startEvents: mouseenter; resumeEvents: mouseleave">
</a-entity>All primitives support these common attributes from their underlying entity components:
<!-- Transform attributes -->
position="x y z"
rotation="x y z"
scale="x y z"
visible="true|false"
<!-- Animation attributes -->
animation="property: ...; to: ...; dur: ...; loop: ..."
animation__name="..." <!-- Multiple animations -->
<!-- Interaction attributes -->
class="clickable selectable"
raycaster="objects: .clickable"
cursor="fuse: true; fuseTimeout: 1500"
<!-- Event attributes -->
sound="src: #audio; on: click"
<!-- Custom component attributes -->
my-component="prop1: value1; prop2: value2"Primitives can reference assets defined in <a-assets> using CSS selector syntax:
<a-assets>
<img id="texture" src="texture.jpg">
<audio id="sound" src="sound.mp3">
<a-asset-item id="model" src="model.gltf"></a-asset-item>
</a-assets>
<!-- Reference assets by ID -->
<a-box material="src: #texture"></a-box>
<a-sound src="#sound"></a-sound>
<a-gltf-model src="#model"></a-gltf-model>
<!-- Or use direct URLs -->
<a-box material="src: url(texture.jpg)"></a-box>