14 built-in geometry types and 6 shader types for creating and styling 3D objects, from basic shapes to complex forms with physically-based rendering.
Register custom geometry types that can be used with the geometry component.
/**
* Register a new geometry type
* @param name - Geometry type name
* @param definition - Geometry definition object
*/
function registerGeometry(name: string, definition: GeometryDefinition): void;
interface GeometryDefinition {
/** Schema defining geometry properties */
schema: SchemaDefinition;
/** Initialize geometry with given data */
init(data: any): void;
}Usage Example:
// Register custom geometry
AFRAME.registerGeometry('pyramid', {
schema: {
base: { default: 1 },
height: { default: 1 }
},
init: function(data) {
const geometry = new THREE.ConeGeometry(data.base, data.height, 4);
this.geometry = geometry;
}
});
// Use custom geometry
// <a-entity geometry="primitive: pyramid; base: 2; height: 3"></a-entity>Rectangular cuboid geometry with configurable dimensions and segments.
interface BoxGeometry {
primitive: 'box';
width: number; // Width along X-axis (default: 1)
height: number; // Height along Y-axis (default: 1)
depth: number; // Depth along Z-axis (default: 1)
segmentsWidth: number; // Width segments (default: 1)
segmentsHeight: number; // Height segments (default: 1)
segmentsDepth: number; // Depth segments (default: 1)
}Spherical geometry with configurable radius and subdivision.
interface SphereGeometry {
primitive: 'sphere';
radius: number; // Sphere radius (default: 1)
segmentsWidth: number; // Horizontal segments (default: 18)
segmentsHeight: number; // Vertical segments (default: 36)
phiStart: number; // Horizontal start angle in degrees (default: 0)
phiLength: number; // Horizontal sweep angle in degrees (default: 360)
thetaStart: number; // Vertical start angle in degrees (default: 0)
thetaLength: number; // Vertical sweep angle in degrees (default: 180)
}Flat rectangular surface geometry.
interface PlaneGeometry {
primitive: 'plane';
width: number; // Width along X-axis (default: 1)
height: number; // Height along Y-axis (default: 1)
segmentsWidth: number; // Width segments (default: 1)
segmentsHeight: number; // Height segments (default: 1)
}Cylindrical geometry with configurable radius and height.
interface CylinderGeometry {
primitive: 'cylinder';
radius: number; // Cylinder radius (default: 1)
height: number; // Cylinder height (default: 2)
segmentsRadial: number; // Radial segments (default: 36)
segmentsHeight: number; // Height segments (default: 1)
openEnded: boolean; // Whether cylinder is open-ended (default: false)
thetaStart: number; // Start angle in degrees (default: 0)
thetaLength: number; // Sweep angle in degrees (default: 360)
}Circular flat geometry.
interface CircleGeometry {
primitive: 'circle';
radius: number; // Circle radius (default: 1)
segments: number; // Number of segments (default: 32)
thetaStart: number; // Start angle in degrees (default: 0)
thetaLength: number; // Sweep angle in degrees (default: 360)
}Ring-shaped flat geometry with inner and outer radius.
interface RingGeometry {
primitive: 'ring';
radiusInner: number; // Inner radius (default: 0.5)
radiusOuter: number; // Outer radius (default: 1)
segmentsPhi: number; // Radial segments (default: 32)
segmentsTheta: number; // Ring segments (default: 8)
thetaStart: number; // Start angle in degrees (default: 0)
thetaLength: number; // Sweep angle in degrees (default: 360)
}interface ConeGeometry {
primitive: 'cone';
radiusBottom: number; // Bottom radius (default: 1)
radiusTop: number; // Top radius (default: 0.1)
height: number; // Cone height (default: 2)
segmentsRadial: number; // Radial segments (default: 36)
segmentsHeight: number; // Height segments (default: 1)
openEnded: boolean; // Open-ended cone (default: false)
thetaStart: number; // Start angle in degrees (default: 0)
thetaLength: number; // Sweep angle in degrees (default: 360)
}
interface TorusGeometry {
primitive: 'torus';
radius: number; // Torus radius (default: 1)
radiusTubular: number; // Tube radius (default: 0.2)
segmentsRadial: number; // Radial segments (default: 36)
segmentsTubular: number; // Tubular segments (default: 32)
arc: number; // Arc angle in degrees (default: 360)
}
interface TorusKnotGeometry {
primitive: 'torusKnot';
radius: number; // Torus radius (default: 1)
radiusTubular: number; // Tube radius (default: 0.1)
p: number; // Knot parameter p (default: 2)
q: number; // Knot parameter q (default: 3)
segmentsRadial: number; // Radial segments (default: 64)
segmentsTubular: number; // Tubular segments (default: 8)
}
interface TriangleGeometry {
primitive: 'triangle';
vertexA: string; // First vertex position "x y z" (default: "0 1 0")
vertexB: string; // Second vertex position "x y z" (default: "-1 -1 0")
vertexC: string; // Third vertex position "x y z" (default: "1 -1 0")
}interface DodecahedronGeometry {
primitive: 'dodecahedron';
radius: number; // Circumscribed sphere radius (default: 1)
detail: number; // Subdivision level (default: 0)
}
interface IcosahedronGeometry {
primitive: 'icosahedron';
radius: number; // Circumscribed sphere radius (default: 1)
detail: number; // Subdivision level (default: 0)
}
interface OctahedronGeometry {
primitive: 'octahedron';
radius: number; // Circumscribed sphere radius (default: 1)
detail: number; // Subdivision level (default: 0)
}
interface TetrahedronGeometry {
primitive: 'tetrahedron';
radius: number; // Circumscribed sphere radius (default: 1)
detail: number; // Subdivision level (default: 0)
}Register custom shader types for material rendering.
/**
* Register a new shader type
* @param name - Shader name
* @param definition - Shader definition object
*/
function registerShader(name: string, definition: ShaderDefinition): void;
interface ShaderDefinition {
/** Schema defining shader properties */
schema: SchemaDefinition;
/** Vertex shader source code */
vertexShader?: string;
/** Fragment shader source code */
fragmentShader?: string;
/** Initialize shader with given data */
init(data: any): void;
/** Update shader when data changes */
update?(data: any): void;
}Physically-based rendering shader with metallic-roughness workflow.
interface StandardShader {
shader: 'standard';
color: string; // Base color (default: '#FFF')
metalness: number; // Metallic factor 0-1 (default: 0)
roughness: number; // Roughness factor 0-1 (default: 0.5)
src: string; // Diffuse/albedo texture
normalMap: string; // Normal map texture
normalTextureOffset: string; // Normal map UV offset
normalTextureRepeat: string; // Normal map UV repeat
normalScale: string; // Normal map intensity
ambientOcclusionMap: string; // AO map texture
ambientOcclusionMapIntensity: number; // AO intensity
ambientOcclusionTextureOffset: string; // AO map UV offset
ambientOcclusionTextureRepeat: string; // AO map UV repeat
displacementMap: string; // Displacement map texture
displacementScale: number; // Displacement intensity
displacementBias: number; // Displacement bias
emissive: string; // Emissive color
emissiveIntensity: number; // Emissive intensity
envMap: string; // Environment map
fog: boolean; // Enable fog (default: true)
height: number; // Displacement height
metalnessMap: string; // Metalness map texture
repeat: string; // Main texture UV repeat
roughnessMap: string; // Roughness map texture
sphericalEnvMap: string; // Spherical environment map
wireframe: boolean; // Wireframe rendering
wireframeLinewidth: number; // Wireframe line width
}Unlit flat color shader without lighting calculations.
interface FlatShader {
shader: 'flat';
color: string; // Flat color (default: '#FFF')
src: string; // Texture source
fog: boolean; // Enable fog (default: true)
transparent: boolean; // Enable transparency
alphaTest: number; // Alpha testing threshold
opacity: number; // Material opacity 0-1
repeat: string; // Texture UV repeat
offset: string; // Texture UV offset
}Classic Phong lighting shader with specular highlights.
interface PhongShader {
shader: 'phong';
color: string; // Diffuse color (default: '#FFF')
specular: string; // Specular color (default: '#111')
shininess: number; // Specular shininess (default: 30)
src: string; // Diffuse texture
emissive: string; // Emissive color
emissiveIntensity: number; // Emissive intensity
envMap: string; // Environment map
fog: boolean; // Enable fog
normalMap: string; // Normal map texture
normalScale: string; // Normal map intensity
repeat: string; // Main texture UV repeat
wireframe: boolean; // Wireframe rendering
}Signed Distance Field shader for crisp text and vector graphics.
interface SDFShader {
shader: 'sdf';
alphaTest: number; // Alpha testing threshold (default: 0.5)
color: string; // Text/shape color (default: '#FFF')
opacity: number; // Material opacity
transparent: boolean; // Enable transparency
}Multi-channel Signed Distance Field shader for high-quality scalable text.
interface MSDFShader {
shader: 'msdf';
alphaTest: number; // Alpha testing threshold (default: 0.5)
color: string; // Text color (default: '#FFF')
map: string; // MSDF texture
negate: boolean; // Negate distance field
opacity: number; // Material opacity
transparent: boolean; // Enable transparency
}Special shader for portal/link rendering effects.
interface PortalShader {
shader: 'portal';
borderEnabled: boolean; // Enable border
pano: string; // Panoramic texture
src: string; // Portal texture
}<!-- Box with standard PBR material -->
<a-entity
geometry="primitive: box; width: 2; height: 1; depth: 3"
material="shader: standard; color: red; metalness: 0.8; roughness: 0.2">
</a-entity>
<!-- Sphere with texture -->
<a-entity
geometry="primitive: sphere; radius: 1.5; segmentsWidth: 32"
material="shader: standard; src: #earthTexture; normalMap: #earthNormal">
</a-entity><!-- PBR material with multiple maps -->
<a-entity
geometry="primitive: plane; width: 4; height: 4"
material="
shader: standard;
src: #diffuseMap;
normalMap: #normalMap;
roughnessMap: #roughnessMap;
metalnessMap: #metalnessMap;
ambientOcclusionMap: #aoMap;
emissive: #333;
emissiveIntensity: 0.2;
repeat: 2 2;
">
</a-entity>
<!-- Transparent material -->
<a-entity
geometry="primitive: plane"
material="
shader: standard;
color: blue;
opacity: 0.7;
transparent: true;
side: double;
">
</a-entity>// Register custom geometry
AFRAME.registerGeometry('star', {
schema: {
innerRadius: { default: 0.5 },
outerRadius: { default: 1 },
points: { default: 5 }
},
init: function(data) {
const shape = new THREE.Shape();
const { innerRadius, outerRadius, points } = data;
for (let i = 0; i < points * 2; i++) {
const angle = (i / (points * 2)) * Math.PI * 2;
const radius = i % 2 === 0 ? outerRadius : innerRadius;
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
if (i === 0) {
shape.moveTo(x, y);
} else {
shape.lineTo(x, y);
}
}
const geometry = new THREE.ShapeGeometry(shape);
this.geometry = geometry;
}
});<!-- Use custom star geometry -->
<a-entity
geometry="primitive: star; innerRadius: 0.3; outerRadius: 1; points: 6"
material="color: gold">
</a-entity><a-assets>
<img id="brickDiffuse" src="brick-diffuse.jpg">
<img id="brickNormal" src="brick-normal.jpg">
<img id="brickRoughness" src="brick-roughness.jpg">
</a-assets>
<a-entity
geometry="primitive: box"
material="
shader: standard;
src: #brickDiffuse;
normalMap: #brickNormal;
roughnessMap: #brickRoughness;
repeat: 2 1;
normalScale: 0 1;
">
</a-entity>