Component msg
is just an alias for Html.Attribute msg
, but lets you specify typed properties and than builds up the required string value by itself.
entity
[ geometry [ primitive box ]
, material [ color Color.red ]
, animation_ "mouseenter"
[ property_ "components.material.material.color"
, type_ "color"
, toColor Color.blue
, startEvents [ mouseEnter ]
, dur 500
]
, animation_ "mouseleave"
[ property_ "components.material.material.color"
, type_ "color"
, toColor Color.red
, startEvents [ mouseLeave ]
, dur 500
]
, animation [ property_ "rotation" ]
, animation_ "2" [ property_ "position" ]
, animation_ "color" [ property_ "color" ]
]
[]
Html.Attribute msg
component : String -> List AFrame.Properties.Property -> Component msg
node : String -> List AFrame.Properties.Property -> Html msg
node_ : String -> List AFrame.Properties.Property -> List (Html msg) -> Html msg
background : List AFrame.Properties.Property -> Component msg
The background component sets a basic color background of a scene that is more performant than a-sky since geometry is not created.
camera : List AFrame.Properties.Property -> Component msg
The camera component defines from which perspective the user views the scene. The camera is commonly paired with controls components that allow input devices to move and rotate the camera.
cursor : List AFrame.Properties.Property -> Component msg
The cursor component provides hover and click states for interaction on top of the raycaster component.
embedded : Component msg
The embedded component removes fullscreen CSS styles from A-Frame’s <canvas>
element, making it easier to embed within the layout of an existing webpage. Embedding removes the default fixed positioning from the canvas and makes the Enter VR button smaller.
fog : List AFrame.Properties.Property -> Component msg
The fog
component obscures entities in fog given distance from the camera. The fog component applies only to the <a-scene>
element.
geometry : List AFrame.Properties.Property -> Component msg
The geometry
component provides a basic shape for an entity. The primitive property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide a appearance alongside the shape to create a complete mesh.
light : List AFrame.Properties.Property -> Component msg
The light component defines the entity as a source of light. Light affects all materials that have not specified a flat shading model with shader: flat. Note that lights are computationally expensive we should limit number of lights in a scene.
line : List AFrame.Properties.Property -> Component msg
The line component draws a line given a start coordinate and end coordinate using THREE.Line.
line_ : String -> List AFrame.Properties.Property -> Component msg
link : List AFrame.Properties.Property -> Component msg
The link
component connects between experiences and allows for traversing between VR web pages. When activated via an event, the link component sends the user to a different page, just like a normal web page redirect.
material : List AFrame.Properties.Property -> Component msg
The material
component gives appearance to an entity. We can define properties such as color, opacity, or texture. This is often paired with the geometry
component which provides shape.
pool : List AFrame.Properties.Property -> Component msg
The pool
component allows for object pooling. This gives us a reusable pool of entities to avoid creating and destroying the same kind of entities in dynamic scenes. Object pooling helps reduce garbage collection pauses.
raycaster : List AFrame.Properties.Property -> Component msg
The raycaster component provides line-based intersection testing with a raycaster. Raycasting is the method of extending a line from an origin towards a direction, and checking whether that line intersects with other entites.
renderer : List AFrame.Properties.Property -> Component msg
The renderer
system configures a scene’s THREE.WebGLRenderer
instance. It also configures presentation attributes when entering WebVR/WebXR.
shadow : List AFrame.Properties.Property -> Component msg
The shadow
component enables shadows for an entity and its children. Receiving shadows from surrounding objects and casting shadows onto other objects may (and often should) be enabled independently.
Without this component, an entity will not cast nor receive shadows.
sound : List AFrame.Properties.Property -> Component msg
The sound
component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the components-position.
text : List AFrame.Properties.Property -> Component msg
The text
component renders signed distance field (SDF
) font text.
position : Basics.Float -> Basics.Float -> Basics.Float -> Component msg
The position component places entities at certain spots in 3D space. Position takes a coordinate value as three space-delimited numbers.
All entities inherently have the position component.
rotation : Basics.Float -> Basics.Float -> Basics.Float -> Component msg
The rotation
component defines the orientation of an entity in degrees. It takes the pitch (x), yaw (y), and roll (z) as three space-delimited numbers indicating degrees of rotation.
All entities inherently have the rotation component.
scale : Basics.Float -> Basics.Float -> Basics.Float -> Component msg
The scale
component defines a shrinking, stretching, or skewing transformation of an entity. It takes three scaling factors for the X, Y, and Z axes.
All entities inherently have the scale component.
visible : Basics.Bool -> Component msg
The visible
component determines whether to render an entity. If set to false
, then the entity will not be visible nor drawn.
Visibility effectively applies to all children. If an entity’s parent or ancestor entity has visibility set to false
, then the entity will also not be visible nor draw. It’s a common pattern to create container entities that contain an entire group of entities that you can flip on an off with visible
.
gltfModel : String -> Component msg
glTF (GL Transmission Format) is an open project by Khronos providing a common, extensible format for 3D assets that is both efficient and highly interoperable with modern web technologies.
The gltf-model component loads a 3D model using a glTF (.gltf
or .glb
) file.
objModel : List AFrame.Properties.Property -> Component msg
The obj-model component loads a 3D model and material using a Wavefront (.OBJ
) file and a .MTL
file.
animation : List AFrame.Properties.Property -> Component msg
The animation component lets us animate and tween values.
animation_ : String -> List AFrame.Properties.Property -> Component msg
The animation with custom ID component lets us animate and tween values.
animationMixer : Component msg
daydreamControls : List AFrame.Properties.Property -> Component msg
The daydream-controls
component interfaces with the Google Daydream controllers.
gearVrControls : List AFrame.Properties.Property -> Component msg
The gearvr-controls
component interfaces with the Samsung/Oculus Gear VR controllers.
handControls : List AFrame.Properties.Property -> Component msg
The hand-controls component provides tracked hands (using a prescribed model) with animated gestures. hand-controls wraps the vive-controls and oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.
laserControls : List AFrame.Properties.Property -> Component msg
The laser-controls component provides tracked controls with a laser or ray cursor shooting out to be used for input and interactions. DoF stands for degrees of freedom. Because they only require rotation and some form of input, laser-based interactions scale well across 0 DoF (gaze-based, Cardboard), 3 DoF (Daydream, GearVR with controllers), and 6 DoF (Vive, Oculus Touch). If desired, we can get a consistent form of interaction that works across all VR platforms with a single line of HTML.
lookControls : List AFrame.Properties.Property -> Component msg
The look-controls
component:
oculusGoControls : List AFrame.Properties.Property -> Component msg
The oculus-go-controls
component interfaces with the Oculus Go controllers. It wraps the tracked-controls component while adding button mappings, events, and an Oculus Go controller model that highlights the touched and/or pressed buttons (trackpad, trigger).
oculusTouchControls : List AFrame.Properties.Property -> Component msg
The oculus-touch-controls
component interfaces with the Oculus Touch controllers. It wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.
trackedControls : List AFrame.Properties.Property -> Component msg
The tracked-controls
component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is abstracted by the hand-controls component as well as the vive-controls, oculus-touch-controls, windows-motion-controls, and daydream-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers such as daydream-controls, a primitive arm model is used to emulate positional data.
viveControls : List AFrame.Properties.Property -> Component msg
The vive-controls
component interfaces with the HTC Vive controllers/wands. It wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.
viveFocusControls : List AFrame.Properties.Property -> Component msg
The vive-focus-controls
component interfaces with the Vive Focus controller. It wraps the tracked-controls component while adding button mappings, events, and an Vive Focus controller model that highlights the touched and/or pressed buttons (trackpad, trigger).
wasdControls : List AFrame.Properties.Property -> Component msg
The wasd-controls
component controls an entity with the WASD or arrow keyboard keys. The wasd-controls component is commonly attached to an entity with the camera component.
windowsMotionControls : List AFrame.Properties.Property -> Component msg
The windows-motion-controls
component interfaces with any spatial controllers exposed through Windows Mixed Reality as Spatial Input Sources (such as Motion Controllers). It wraps the tracked-controls component while adding button mappings, events, and a controller model that highlights applies position/rotation transforms to the pressed buttons (trigger, grip, menu, thumbstick, trackpad) and moved axes (thumbstick and trackpad.)
keyboardShortcuts : List AFrame.Properties.Property -> Component msg
The keyboard-shortcuts component toggles global keyboard shortcuts. The keyboard-shortcuts component applies only to the <a-scene>
element.
loadingScreen : List AFrame.Properties.Property -> Component msg
The loading screen component configures the loading screen visual style.
debug : Component msg
The debug component enables component-to-DOM serialization.
stats : Component msg
The stats
component displays a UI with performance-related metrics. The stats component applies only to the<a-scene>
element.
deviceOrientationPersmissionUi : List AFrame.Properties.Property -> Component msg
Starting with Safari on iOS 13 browsers require sites to be served over https and request user permission to access DeviceOrientation events. This component presents a permission dialog for the user to grant or deny access. The device-orientation-permission-ui
component applies only to the <a-scene>
element
vrModeUi : List AFrame.Properties.Property -> Component msg
The vr-mode-ui
component allows disabling of UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui
component applies only to the <a-scene>
element. If we wish to simply toggle the UI, use CSS instead.
screenshot : List AFrame.Properties.Property -> Component msg
The screenshot
component lets us take different types of screenshots with keyboard shortcuts. A-Frame attaches this component to the scene by default so we don’t have to do anything to use the component.