Link Search Menu Expand Document

ARENA Specific A-Frame Components

These are the A-Frame components and systems added to support ARENA core functionality.

Components/Systems

arena-camera

Tracking camera movement in real time. Emits camera pose change and VIO change events.

arena-user

Another user's camera in the ARENA. Handles Jitsi and display name updates.

arena-vive

Tracking Vive controller movement in real time.

armarker-system

ARMarker System. Supports ARMarkers in a scene.

armarker

ARMarker Component. Supports ARMarkers in a scene

attribution-system

Attribution Component/System. Add attribution message to any entity. Tries to extract author, license, source and title (assuming format used in sketchfab downloaded models)

Looks for authorship metadata in both asset.extras (sketchfab models) and scene.extra (manually added attributes in blender). If both asset.extras and scene.extra exist, gives preference to asset.extras.

attribution

Attribution Component. Saves attribution data in any entity. The following properties can be saved. If extractAssetExtras=true (default), the attribution system attempts to extract data automatically from the model (requires models with authorship metadata; e.g. models downloaded from sketchfab have these data)

click-listener

Keep track of mouse events and publish corresponding events

collision-listener

Listen for collisions, callback on event. Requires Physics for A-Frame VR

gesture-detector

Detect multi-finger touch gestures. Publish events accordingly. Based of 8th Wall's gesture-detector

gltf-model-progress

GLTF model loading progress system. Manage GLTF load messages.

goto-url

Load new URL when object is clicked

hide-in-ar-mode

Hide in AR component. When set to an entity, it will make the entity disappear when entering AR mode. Based on this example

impulse

One physics feature is applying an impulse to an object to set it in motion. This happens in conjunction with an event. Requires Physics for A-Frame VR

jitsi-video

Apply a jitsi video to a geometry Jitsi video source can be defined using a jitsiId or (ARENA/Jitsi) display name

landmark

Component-System of teleport destination Landmarks

load-scene

Load scene from persistence.

material-extras

Allows to set extra material properties, namely texture encoding, whether to render the material's color and render order. The properties set here access directly Three.js material. Implements a timeout scheme in lack of better understanding of the timing/events causing properties to not be available.

network-latency

Publish with qos of 2 for network graph to update latency

press-and-move

Press and move camera; User camera movement with the mouse. Based of wasd controls

screenshareable

Screenshare-able Component. Allows an object to be screenshared upon

textinput

Opens an HTML prompt when clicked. Sends text input as an event on MQTT

threejs-scene

Load a THREE.js scene. THREE.js scene format is an almost direct serialization of the THREE.js objects, and can be THREE.js version-specific; you can see THREE.js version in the JS console once you open ARENA For a move portable format, using glTF is preferred.

ttl

Time To Live (TTL) component.

When applied to an entity, the entity will remove itself from DOM after the specified number of seconds. Update is allowed, which will reset the timer to start from that moment.

video-control

Adds a video to an entity and controls its playback.

arena-camera

Tracking camera movement in real time. Emits camera pose change and VIO change events.

Properties

Name Type Default Description
enabled boolean   Indicates whether camera tracking is enabled.
vioEnabled boolean   Indicates whether to publish VIO on every tick (if true).
displayName string   User display name (used to publish camera data).
color string   Head text color.
[headModel] string "'robobit'" Builtin head model (one of: ‘robobit’, ‘grey-head’)
[videoShape] string "'default-box'" Builtin video shape (one of: ‘default-box’, ‘flat-box’)
rotation Array.<number>   Last camera rotation value.
position Array.<number>   Last camera position value.
vioRotation Array.<number>   Last VIO rotation value.
vioPosition Array.<number>   Last VIO position value.

arena-user

Another user’s camera in the ARENA. Handles Jitsi and display name updates.

Properties

Name Type Default Description
[color] color white The color for the user’s name text.
[headModel] string "'robobit'" Builtin head model (one of: ‘robobit’, ‘grey-head’)
[videoShape] string "'default-box'" Builtin video shape (one of: ‘default-box’, ‘flat-box’)
[jitsiId] string   User jitsi id.
[displayName] string   User display name.
[hasAudio] boolean false Whether the user has audio on.
[hasVideo] boolean false Whether the user has video on.

arena-vive

Tracking Vive controller movement in real time.

Properties

Name Type Description
enabled boolean Controller enabled.
name string Name used to publish controller pose.
hand string Controller hand.
color string Controller color.

armarker-system

ARMarker System. Supports ARMarkers in a scene.

registerComponent(marker) ⏏

Register an ARMarker component with the system

Kind: Exported function

Param Type Description
marker object The marker component object to register.

unregisterComponent(marker) ⏏

Unregister an ARMarker component

Kind: Exported function

Param Type Description
marker object The marker component object to unregister.

getAll(mtype) ⇒ object

Get all markers registered with the system

Kind: Exported function Returns: object - - a dictionary of markers

Param Type Description
mtype object The marker type ‘apriltag_36h11’, ‘lightanchor’, ‘uwb’ to filter for; No argument or undefined will return all

Example (Query the system a list of all markers in a scene)

    let markers = document.querySelector("a-scene").systems["armarker"].getAll();
    Object.keys(markers).forEach(function(key) {
      console.log(`tag id: ${markers[key].data.markerid}`, markers[key].el.object3D.matrixWorld); //matrixWorld: https://threejs.org/docs/#api/en/math/Matrix4
    });

Example (getAll() also accepts a marker type argument to filter by a given type)

    let markers = document.querySelector("a-scene").systems["armarker"].getAll('apriltag_36h11');

get(markerid) ⇒ object

Get a marker given is markerid

Kind: Exported function Returns: object - - the marker with the markerid given

Param Type Description
markerid object The marker id to return

armarker

ARMarker Component. Supports ARMarkers in a scene

Properties

Name Type Default Description
[markertype] string "apriltag_36h11" The marker type. One of ‘apriltag_36h11’, ‘lightanchor’, ‘uwb’
[markerid] string   Marker id. Typically an integer (e.g. for AprilTag 36h11 family, an integer in the range [0, 586])
[size] number 150 Size of the marker (assumed to be a square), if applicable (mm).
[url] string   A URL associated with the marker.
[lat] number 0 Marker latitude.
[long] number 0 Marker longitude.
[ele] number 0 Marker elevation.

attribution-system

Attribution Component/System. Add attribution message to any entity. Tries to extract author, license, source and title (assuming format used in sketchfab downloaded models)

Looks for authorship metadata in both asset.extras (sketchfab models) and scene.extra (manually added attributes in blender). If both asset.extras and scene.extra exist, gives preference to asset.extras.

Example (Sketchfab downloaded model attributes - asset.extra)

   author: "AuthorName (url-link-to-author)"
   license: "CC-BY-4.0 (url-link-to-license)"
   source: "url-link-to-model-website"
   title: "Model Title"

registerComponent(el) ⏏

Register an attribution component with the system

Kind: Exported function

Param Type Description
el object The attribution a-frame element to register.

unregisterComponent(el) ⏏

Unregister an attribution component

Kind: Exported function

Param Type Description
el object The attribution a-frame element.

getAttributionTable() ⇒ string

Collect all attribution components and return an HTML table with credits

Kind: Exported function Returns: string - - an HTML table with the scene credits Example (Query the system for an HTML table of credits:)

   document.querySelector("a-scene").systems["attribution"].getAttributionTable();

extractAttributionFromGtlfAsset(el, gltfComponent) ⏏

Extract author, license, source and title assuming sketchfab format: author: “AuthorName (url-link-to-author)” license: “CC-BY-4.0 (url-link-to-license)” source: “url-link-to-model-website” title: “Model Title”

It will try to get exttributes from gltf’s asset.extras (sketchfab) and scene.userData (blender) If both are found, data will be merged with preference to properties in asset.extras

Kind: Exported function

Param Type Description
el object the aframe element to set the attribution
gltfComponent object the GLTF model to extract properties from

parseExtrasAttributes(extras) ⇒ object

Parse author, license, source and title attributes.

Kind: Exported function Returns: object - - a dictionary with the author, license, source and title parsed

Param Type Description
extras object the source for the attribute data (asset.extras or scene.userData)

parseAttribute(extras, attribution, attribute) ⇒ boolean

Parse attribute given as parameter. Tries to find the attribute and add it to ‘attribution’ dictionary

Kind: Exported function Returns: boolean - - true/false if it could find the attribute

Param Type Description
extras object the source for the attribute data
attribution object the destination attribute dictionary
attribute object which attribute to parse

attribution

Attribution Component. Saves attribution data in any entity. The following properties can be saved. If extractAssetExtras=true (default), the attribution system attempts to extract data automatically from the model (requires models with authorship metadata; e.g. models downloaded from sketchfab have these data)

Properties

Name Type Default Description
[author] string "Unknown" Author name; e.g. “Vaptor-Studio”
[authorURL] string   Author homepage/profile; e.g. https://sketchfab.com/VapTor
[license] string "Unknown" License summary/short name; e.g. “CC-BY-4.0”.
[licenseURL] string   License URL; e.g. http://creativecommons.org/licenses/by/4.0/
[source] string "Unknown" Model source e.g. “Sketchfab”.
[sourceURL] string   Model source URL; e.g. https://sketchfab.com/models/2135501583704537907645bf723685e7
[title] string "No Title" Model title; e.g. “Spinosaurus”.
id string   The entity id in the scene; automatically filled in on component init
[extractAssetExtras] boolean true Extract attribution info from asset extras; will override attribution info given (default: true)

click-listener

Keep track of mouse events and publish corresponding events

init() ⏏

Setup event listeners for mouse events; listeners publish events to MQTT

Kind: Exported function Todo

  • Consolidate event listeners (they are very similar)

collision-listener

Listen for collisions, callback on event. Requires Physics for A-Frame VR

Requires: module:aframe-physics-system

gesture-detector

Detect multi-finger touch gestures. Publish events accordingly. Based of 8th Wall’s gesture-detector

gltf-model-lod

GLTF lod switching between models based on distance. Use a low-detail gltf-model by default, and switch to specified detailedUrl when within specified distance.

Properties

Name Type Default Description
[detailedUrl] string   URL to detailed model
[detailedDistance] number 10 Distance (meters) at which the default gltf-model is switched to detailedUrl
[updateRate] number 333 How often LOD distance is checked in ms
[retainCache] boolean false Override THREE.Cache removal of detailed model when leaving detailedDistance

gltf-model-progress

GLTF model loading progress system. Manage GLTF load messages.

init() ⏏

Init system

Kind: Exported function

registerGltf(el) ⏏

Register a gltf-model to deal with load events

Kind: Exported function

Param Type Description
el object The a-frame element to register.

unregisterGltfBySrc(el) ⏏

Unregister a gltf-model

Kind: Exported function

Param Type Description
el object The a-frame element.

updateProgress(failed, evt) ⏏

Updates GLTF Progress

Kind: Exported function

Param Type Description
failed boolean whether or not download was successful
evt object gltf event

goto-url

Load new URL when object is clicked

Properties

Name Type Default Description
on string   A case-sensitive string representing the event type to listen for, e.g. ‘mousedown’, ‘mouseup’
url string   The destination url e.g. https://example.com
[dest] string "sametab" Where to open the URL; one of ‘popup’, ‘newtab’, ‘sametab’

hide-in-ar-mode

Hide in AR component. When set to an entity, it will make the entity disappear when entering AR mode. Based on this example

impulse

One physics feature is applying an impulse to an object to set it in motion. This happens in conjunction with an event. Requires Physics for A-Frame VR

Requires: module:aframe-physics-system

jitsi-video

Apply a jitsi video to a geometry Jitsi video source can be defined using a jitsiId or (ARENA/Jitsi) display name

Properties

Name Type Description
[jitsiId] string JitsiId of the video source; If defined will override displayName
[displayName] string ARENA or Jitsi display name of the video source; Will be ignored if jitsiId is given. IMPORTANT: editing this property requires reload

landmark

Component-System of teleport destination Landmarks

Properties

Name Type Default Description
[randomRadiusMin] number 0 Min for a random range to teleport to. Max must > 0
[randomRadiusMax] number 0 Max for a random range to teleport to.
[offsetPosition] THREE.Vector3 {0,1.6,0} vector3 {x,y,z} to use as static teleport offset
[constrainToNavMesh] string "'false'" Teleports here should snap to navmesh. [‘false’, ‘any’, ‘coplanar’]
[startingPosition] boolean false True: use as a random scene load-in position
[lookAtLandmark] boolean true True: After teleporting, user should rotate @ landmark
label string "''" Display label for Landmarks UI menu

load-scene

Load scene from persistence.

Todo

  • this component is currently not used and probably needs to be updated

material-extras

Allows to set extra material properties, namely texture encoding, whether to render the material’s color and render order. The properties set here access directly Three.js material. Implements a timeout scheme in lack of better understanding of the timing/events causing properties to not be available.

Properties

Name Type Default Description
[encoding] string "sRGBEncoding" The material encoding; One of ‘LinearEncoding’, ‘sRGBEncoding’, ‘GammaEncoding’, ‘RGBEEncoding’, ‘LogLuvEncoding’, ‘RGBM7Encoding’, ‘RGBM16Encoding’, ‘RGBDEncoding’, ‘BasicDepthPacking’, ‘RGBADepthPacking’. See Three.js material.
[needsUpdate] boolean false Specifies that the material needs to be recompiled. See Three.js material.
[colorWrite] boolean true Whether to render the material’s color. See Three.js material.
[renderOrder] number 1 This value allows the default rendering order of scene graph objects to be overridden. See Three.js Object3D.renderOrder.
[transparentOccluder] boolean false If true, will set colorWrite=false and renderOrder=0 to make the material a transparent occluder.
[defaultRenderOrder] number 1 Used as the renderOrder when transparentOccluder is reset to false.

network-latency

Publish with qos of 2 for network graph to update latency

Properties

Name Type Default Description
UPDATE_INTERVAL_MS number 10000 Interval to send the periodic pings (ms)

press-and-move

Press and move camera; User camera movement with the mouse. Based of wasd controls

Properties

Name Type Default Description
[acceleration] number 30 Movement acceleration.
[enabled] boolean true Is the camera movement component enabled.
[fly] boolean true Is the camera at a fixed height (fly=false) or not (fly=true)

screenshareable

Screenshare-able Component. Allows an object to be screenshared upon

textinput

Opens an HTML prompt when clicked. Sends text input as an event on MQTT

Properties

Name Type Default Description
[on] string "mousedown" A case-sensitive string representing the event type to listen for, e.g. ‘mousedown’, ‘mouseup’
[title] string "Text Input" The prompt title
[label] string "Input text below (max is 140 characters)" Text prompt label
[placeholder] string "Type here" Text input place hoText

threejs-scene

Load a THREE.js scene. THREE.js scene format is an almost direct serialization of the THREE.js objects, and can be THREE.js version-specific; you can see THREE.js version in the JS console once you open ARENA For a move portable format, using glTF is preferred.

Properties

Name Type Description
url string the three.js scene to load

ttl

Time To Live (TTL) component.

When applied to an entity, the entity will remove itself from DOM after the specified number of seconds. Update is allowed, which will reset the timer to start from that moment.

Properties

Name Type Description
seconds number Seconds until entity is removed
expireAt object Expiration time Date object

video-control

Adds a video to an entity and controls its playback.

Properties

Name Type Default Description
video_object string   the object id of the element where to display the video
video_path string   path/url to the video
[frame_object] string   path/url to the keyframe to display
[anyone_clicks] boolean true anyone clicks
[video_loop] boolean true video loop
[autoplay] boolean false video autoplays on load
[volume] number 1 video sound volume