Built-in Components

// Always available on every entity
interface PositionComponent {
  x: number; // X coordinate
  y: number; // Y coordinate  
  z: number; // Z coordinate
}

interface RotationComponent {
  x: number; // X-axis rotation in degrees
  y: number; // Y-axis rotation in degrees
  z: number; // Z-axis rotation in degrees
}

interface ScaleComponent {
  x: number; // X-axis scale factor
  y: number; // Y-axis scale factor
  z: number; // Z-axis scale factor
}

interface VisibleComponent {
  visible: boolean; // Whether entity is visible
}

<a-box position="1 2 3" rotation="45 0 90" scale="2 1 0.5"></a-box>

// Set position programmatically
entityEl.setAttribute('position', { x: 1, y: 2, z: 3 });
entityEl.setAttribute('rotation', '45 0 90');
entityEl.setAttribute('scale', '2 1 0.5');
entityEl.setAttribute('visible', false);

interface GeometryComponent {
  primitive: string; // Geometry type: 'box' | 'sphere' | 'plane' | 'cylinder' | etc.
  [property: string]: any; // Geometry-specific properties
}

// Built-in geometry types
interface BoxGeometry {
  primitive: 'box';
  width: number;
  height: number;
  depth: number;
  segmentsWidth: number;
  segmentsHeight: number;
  segmentsDepth: number;
}

interface SphereGeometry {
  primitive: 'sphere';
  radius: number;
  segmentsWidth: number;
  segmentsHeight: number;
  phiStart: number;
  phiLength: number;
  thetaStart: number;
  thetaLength: number;
}

interface PlaneGeometry {
  primitive: 'plane';
  width: number;
  height: number;
  segmentsWidth: number;
  segmentsHeight: number;
}

<a-entity geometry="primitive: box; width: 2; height: 1; depth: 3"></a-entity>
<a-entity geometry="primitive: sphere; radius: 1.5"></a-entity>

interface MaterialComponent {
  shader: string; // Shader type: 'standard' | 'flat' | 'phong' | etc.
  color: string; // Base color (hex, rgb, or color name)
  opacity: number; // Transparency (0-1)
  transparent: boolean; // Enable transparency
  alphaTest: number; // Alpha testing threshold
  side: 'front' | 'back' | 'double'; // Which sides to render
  [property: string]: any; // Shader-specific properties
}

// Standard PBR material properties
interface StandardMaterial extends MaterialComponent {
  shader: 'standard';
  metalness: number; // Metallic appearance (0-1)
  roughness: number; // Surface roughness (0-1) 
  src: string; // Diffuse texture URL
  normalMap: string; // Normal map texture URL
  envMap: string; // Environment map URL
  aoMap: string; // Ambient occlusion map URL
  displacementMap: string; // Displacement map URL
  emissive: string; // Emissive color
  emissiveIntensity: number; // Emissive intensity
}

<a-entity material="color: red; metalness: 0.8; roughness: 0.2"></a-entity>
<a-entity material="shader: flat; color: #4CC3D9; opacity: 0.8; transparent: true"></a-entity>

interface LightComponent {
  type: 'ambient' | 'directional' | 'hemisphere' | 'point' | 'spot';
  color: string; // Light color
  intensity: number; // Light intensity
  [property: string]: any; // Light-specific properties
}

interface DirectionalLight extends LightComponent {
  type: 'directional';
  castShadow: boolean; // Whether light casts shadows
  shadowMapWidth: number; // Shadow map resolution width
  shadowMapHeight: number; // Shadow map resolution height
  target: string; // Target entity selector
}

interface PointLight extends LightComponent {
  type: 'point';
  decay: number; // Light decay rate
  distance: number; // Light cutoff distance
  castShadow: boolean;
}

interface SpotLight extends LightComponent {
  type: 'spot';
  angle: number; // Spotlight cone angle
  penumbra: number; // Spotlight edge softness
  decay: number;
  distance: number;
  target: string;
  castShadow: boolean;
}

<a-light type="ambient" color="#404040"></a-light>
<a-light type="point" position="0 5 0" color="white" intensity="2"></a-light>
<a-light type="directional" position="-1 1 0" castShadow="true"></a-light>

interface CameraComponent {
  active: boolean; // Whether camera is currently active
  far: number; // Far clipping plane distance
  fov: number; // Field of view in degrees
  near: number; // Near clipping plane distance
  spectator: boolean; // Whether camera is for spectators
  zoom: number; // Camera zoom level
}

interface AnimationComponent {
  property: string; // Property to animate (e.g., 'position', 'rotation.y')
  from: string; // Starting value
  to: string; // Ending value
  dur: number; // Duration in milliseconds
  delay: number; // Delay before starting in milliseconds  
  easing: string; // Easing function name
  elasticity: number; // Elasticity for elastic easing
  loop: boolean | number; // Loop animation (true/false/count)
  dir: 'normal' | 'reverse' | 'alternate'; // Animation direction
  autoplay: boolean; // Start animation automatically
  startEvents: string; // Events that start the animation
  pauseEvents: string; // Events that pause the animation
  resumeEvents: string; // Events that resume the animation
}

<a-box animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-box>
<a-sphere animation__scale="property: scale; to: 2 2 2; startEvents: mouseenter"
          animation__color="property: material.color; to: red; startEvents: mouseenter"></a-sphere>

interface TextComponent {
  value: string; // Text content to display
  font: string; // Font family or asset reference
  width: number; // Text width for wrapping
  color: string; // Text color
  align: 'left' | 'center' | 'right'; // Horizontal alignment
  anchor: 'left' | 'center' | 'right' | 'align'; // Text anchor point
  baseline: 'top' | 'center' | 'bottom'; // Vertical baseline
  letterSpacing: number; // Letter spacing
  lineHeight: number; // Line height multiplier
  tabSize: number; // Tab size in spaces
  transparent: boolean; // Enable transparency
  opacity: number; // Text opacity
  side: 'front' | 'back' | 'double'; // Render sides
  shader: string; // Text shader type
  zOffset: number; // Z-axis offset
}

interface SoundComponent {
  src: string; // Audio file URL or asset reference
  autoplay: boolean; // Start playing automatically
  loop: boolean; // Loop the audio
  volume: number; // Audio volume (0-1)
  distanceModel: 'linear' | 'inverse' | 'exponential'; // Distance attenuation model
  maxDistance: number; // Maximum effective distance
  refDistance: number; // Reference distance for attenuation
  rolloffFactor: number; // Rolloff factor for attenuation
  positional: boolean; // Enable 3D positional audio
  poolSize: number; // Audio pool size for performance
}

interface CursorComponent {
  fuse: boolean; // Enable fuse-based clicking (gaze)
  fuseTimeout: number; // Fuse timeout in milliseconds
  mouseCursorStylesEnabled: boolean; // Enable mouse cursor styles
  rayOrigin: 'mouse' | 'entity'; // Ray origin for raycasting
}

interface RaycasteComponent {
  direction: string; // Ray direction vector
  far: number; // Maximum ray distance
  interval: number; // Intersection check interval in milliseconds
  near: number; // Minimum ray distance
  objects: string; // Selector for objects to test intersection
  origin: string; // Ray origin point
  recursive: boolean; // Test child objects recursively
  showLine: boolean; // Visualize the ray line
  useWorldCoordinates: boolean; // Use world coordinates for ray
}

interface GLTFModelComponent {
  src: string; // GLTF/GLB file URL or asset reference
}

interface ObjModelComponent {
  obj: string; // OBJ file URL or asset reference
  mtl: string; // MTL material file URL (optional)
}

interface ColladaModelComponent {
  src: string; // COLLADA (.dae) file URL or asset reference
}

<a-entity gltf-model="src: #myModel"></a-entity>
<a-entity obj-model="obj: #objFile; mtl: #mtlFile"></a-entity>
<a-entity collada-model="src: url(model.dae)"></a-entity>

interface ShadowComponent {
  cast: boolean; // Whether entity casts shadows
  receive: boolean; // Whether entity receives shadows
}

interface LookControlsComponent {
  enabled: boolean; // Enable look controls
  magicWindowTrackingEnabled: boolean; // Enable device orientation tracking
  pointerLockEnabled: boolean; // Enable pointer lock
  reverseMouseDrag: boolean; // Reverse mouse drag direction
  reverseTouchDrag: boolean; // Reverse touch drag direction
  touchEnabled: boolean; // Enable touch controls
}

interface WASDControlsComponent {
  acceleration: number; // Movement acceleration
  adAxis: string; // A/D key axis mapping
  adEnabled: boolean; // Enable A/D movement
  adInverted: boolean; // Invert A/D movement
  easing: number; // Movement easing
  enabled: boolean; // Enable WASD controls
  fly: boolean; // Enable flying (Y-axis movement)
  wsAxis: string; // W/S key axis mapping
  wsEnabled: boolean; // Enable W/S movement
  wsInverted: boolean; // Invert W/S movement
}

interface BackgroundComponent {
  color: string; // Background color
  src: string; // Background texture/image URL
  transparent: boolean; // Enable transparency
}

interface FogComponent {
  type: 'linear' | 'exponential'; // Fog calculation type
  color: string; // Fog color
  near: number; // Fog start distance (linear)
  far: number; // Fog end distance (linear)
  density: number; // Fog density (exponential)
}

interface EmbeddedComponent {
  // No properties - enables embedded scene mode
}

interface StatsComponent {
  // No properties - shows performance statistics
}

interface DebugComponent {
  // No properties - enables debug visualization
}

interface InspectorComponent {
  url: string; // Inspector UI URL
}

interface KeyboardShortcutsComponent {
  // No properties - enables keyboard shortcuts
}

interface ScreenshotComponent {
  width: number; // Screenshot width
  height: number; // Screenshot height
  camera: string; // Camera selector for screenshot
}

interface XRModeUIComponent {
  enabled: boolean; // Enable XR mode UI
  enterVRButton: string; // Enter VR button selector
  enterARButton: string; // Enter AR button selector
}

interface DeviceOrientationPermissionUIComponent {
  enabled: boolean; // Enable permission UI
  deviceMotionMessage: string; // Custom device motion message
}

interface ReflectionComponent {
  directionalLight: string; // Directional light selector
  distance: number; // Reflection distance
  fog: boolean; // Include fog in reflection
  clipBias: number; // Clipping bias
  shader: string; // Reflection shader
  resolution: number; // Reflection texture resolution
}

interface PoolComponent {
  mixin: string; // Mixin to use for pooled entities
  size: number; // Pool size
  dynamic: boolean; // Allow dynamic pool resizing
}

interface ARHitTestComponent {
  target: string; // Target entity selector
  src: string; // Hit test source
}

interface RealWorldMeshingComponent {
  enabled: boolean; // Enable real world meshing
  normals: boolean; // Include mesh normals
  geometry: string; // Geometry type for mesh
  material: string; // Material for mesh
}

interface LineComponent {
  start: string; // Start position vector
  end: string; // End position vector
  color: string; // Line color
  opacity: number; // Line opacity
  visible: boolean; // Line visibility
}

interface LinkComponent {
  href: string; // Destination URL or scene
  title: string; // Link title
  image: string; // Preview image URL
  on: string; // Event that triggers link
  visualAspectEnabled: boolean; // Enable visual portal effect
  borderColor: string; // Portal border color
  backgroundColor: string; // Portal background color
  highlightedColor: string; // Highlighted state color
  titleColor: string; // Title text color
  peekMode: boolean; // Enable peek mode
}

interface LayerComponent {
  type: 'quad' | 'monocubemap' | 'stereocubemap' | 'cylinder'; 
  src: string; // Layer source texture
  rotateTo: string; // Rotation target
  radius: number; // Layer radius (cylinder)
  centralAngle: number; // Central angle (cylinder)
  height: number; // Layer height
  space: 'local' | 'stage' | 'world'; // Coordinate space
}

interface OBBColliderComponent {
  objects: string; // Objects to test collision against
  size: string; // Collider size vector
  trackedObject3D: string; // Object3D to track
}

interface AnchoredComponent {
  // No properties - enables world anchoring
}

interface GrabbableComponent {
  // No properties - enables grab interaction
}

interface PivotComponent {
  // No properties - creates pivot behavior
}

interface HideOnEnterVRComponent {
  // No properties - hides entity when entering VR
}

interface HideOnEnterARComponent {
  // No properties - hides entity when entering AR
}