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
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.
- armarker-system
- registerComponent(marker) ⏏
- unregisterComponent(marker) ⏏
- getAll(mtype) ⇒
object
⏏ - get(markerid) ⇒
object
⏏
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)
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
Name | Type | Default | Description |
---|---|---|---|
[enabled] | boolean |
true | Set false to disable |
[dynamic] | boolean |
false | (required) Set true for moving objects, so that its bounding box is constantly recalculated |
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
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
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 holder |
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 |