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

box-collision-listener

Listen for bounding-box collisions with user camera and hands. Must be applied to an object or model with geometric mesh.

collision-listener

(legacy) 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

arena-user

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

Properties

arena-vive

Tracking Vive controller movement in real time.

Properties

armarker-system

ARMarker System. Supports ARMarkers in a scene.

• armarker-system
  • registerComponent(marker) ⏏
  • unregisterComponent(marker) ⏏
  • getAll(mtype) ⇒ object ⏏
  • get(markerid) ⇒ object ⏏

registerComponent(marker) ⏏

Register an ARMarker component with the system

Kind: Exported function

unregisterComponent(marker) ⏏

Unregister an ARMarker component

Kind: Exported function

getAll(mtype) ⇒ object ⏏

Get all markers registered with the system

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

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

armarker

ARMarker Component. Supports ARMarkers in a scene

Properties

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"

• attribution-system
  • registerComponent(el) ⏏
  • unregisterComponent(el) ⏏
  • getAttributionTable() ⇒ string ⏏
  • extractAttributionFromGtlfAsset(el, gltfComponent) ⏏
  • parseExtrasAttributes(extras) ⇒ object ⏏
  • parseAttribute(extras, attribution, attribute) ⇒ boolean ⏏

registerComponent(el) ⏏

Register an attribution component with the system

Kind: Exported function

unregisterComponent(el) ⏏

Unregister an attribution component

Kind: Exported function

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

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

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

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

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)

box-collision-listener

Listen for bounding-box collisions with user camera and hands. Must be applied to an object or model with geometric mesh

Properties

collision-listener (legacy)

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

gltf-model-progress

GLTF model loading progress system. Manage GLTF load messages.

• gltf-model-progress
  • init() ⏏
  • registerGltf(el) ⏏
  • unregisterGltfBySrc(el) ⏏
  • updateProgress(failed, evt) ⏏

init() ⏏

Init system

Kind: Exported function

registerGltf(el) ⏏

Register a gltf-model to deal with load events

Kind: Exported function

unregisterGltfBySrc(el) ⏏

Unregister a gltf-model

Kind: Exported function

updateProgress(failed, evt) ⏏

Updates GLTF Progress

Kind: Exported function

goto-url

Load new URL when object is clicked

Properties

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

landmark

Component-System of teleport destination Landmarks

Properties

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

network-latency

Publish with qos of 2 for network graph to update latency

Properties

press-and-move

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

Properties

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

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

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

video-control

Adds a video to an entity and controls its playback.

Properties