ARENA Specific A-Frame Components
These are the A-Frame components added to support ARENA core functionality.
Components
- arena-camera
Tracking camera movement in real time. Emits camera pose change and VIO change events.
- arena-hand
Tracking Hand controller movement in real time.
- arena-user
Another user's camera in the ARENA. Handles Jitsi and display name updates.
- armarker
ARMarker Component. Supports ARMarkers in a scene
- 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)- build-watch-object
Create an observer to listen for changes made locally in the A-Frame Inspector and publish them to MQTT.
- build-watch-scene
Create an observer to listen for changes made locally in the A-Frame Inspector and publish them to MQTT.
- 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 off 8th Wall's gesture-detector
- goto-url
Load new URL when object is clicked
- 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 colorspace, 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 management of the timing/events causing properties to not be available.
- network-latency
Publish with qos of 2 for network graph to update latency
- pcd-model
Load Point Cloud Data (PCD) models using three.js example loader Point Cloud Data is a file format for Point Cloud Library. https://en.wikipedia.org/wiki/Point_Cloud_Library
- press-and-move
Press and move camera; User camera movement with the mouse. Based off 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.
Functions
- jitsiStatsLocalCallback(e)
Called when Jitsi local stats are updated, used to save local status for stats-monitor.
arena-camera
Tracking camera movement in real time. Emits camera pose change and VIO change events.
Properties
| Name | Type | 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. |
| 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. |
| showStats | boolean |
Display camera position on the screen. |
arena-hand
Tracking Hand controller movement in real time.
Properties
| Name | Type | Description |
|---|---|---|
| enabled | boolean |
Controller enabled. |
| hand | string |
Controller hand. |
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. |
| [headModelPath] | string |
"/static/models/avatars/robobit.glb" |
Path to user head model |
| [presence] | string |
type of presence for user | |
| [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. |
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’ |
| [dynamic] | boolean |
false |
Whether tag is a static and used to for camera relocalization, or dynamically changes position |
| [publish] | boolean |
false |
Publish tag detections. |
| [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
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) |
build-watch-object
Create an observer to listen for changes made locally in the A-Frame Inspector and publish them to MQTT.
build-watch-scene
Create an observer to listen for changes made locally in the A-Frame Inspector and publish them to MQTT.
click-listener
Keep track of mouse events and publish corresponding events
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 off 8th Wall’s gesture-detector
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’ |
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. 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 colorspace, 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 management of the timing/events causing properties to not be available.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| [overrideSrc] | string |
"''" |
Overrides the material in all meshes of an object (e.g. a basic shape or a GLTF). |
| [colorSpace] | string |
"SRGBColorSpace" |
The material colorspace; 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. |
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) |
pcd-model
Load Point Cloud Data (PCD) models using three.js example loader Point Cloud Data is a file format for Point Cloud Library. https://en.wikipedia.org/wiki/Point_Cloud_Library
press-and-move
Press and move camera; User camera movement with the mouse. Based off 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 |
jitsiStatsLocalCallback(e)
Called when Jitsi local stats are updated, used to save local status for stats-monitor.
Kind: global function
| Param | Type | Description |
|---|---|---|
| e | Object |
event object; e.detail contains the callback arguments |