Skip to content

Latest commit

 

History

History
114 lines (89 loc) · 2.36 KB

components.md

File metadata and controls

114 lines (89 loc) · 2.36 KB
Raw

Components

billboard

Rotate plane towards the camera:

<a-plane
  width="1.5"
  height="0.5"
  material="color: black"
  text="value: hello world; width: 4; align: center"
  position="-2.5 -3.5 -1"
  billboard
></a-plane>

By default it rotates only on the vertical axis (onlyY: true). To rotate on all axes: billboard="onlyY: false"

move-to-spawn-point

Move camera rig to the first spawn point after the scene glb is loaded.

<a-entity id="rig" move-to-spawn-point></a-entity>

move-to-unoccupied-waypoint

After 3s delay on naf connected event:

<a-entity id="rig" move-to-unoccupied-waypoint="on: connected; delay: 3"></a-entity>

A delay is needed so we have the waypoints isOccupied information from the other participants. With on: connected, if the url includes a hash to spawn on a specific waypoint, then the component doesn't do anything.

or on a plane on click (default):

<a-plane
  class="clickable"
  width="1.5"
  height="0.5"
  material="color: black"
  text="value: sit on a\nnearby seat; width: 4; align: center"
  position="-2.5 -3.5 -1"
  billboard
  move-to-unoccupied-waypoint
></a-plane>

Filter waypoints with a regular expression:

<a-plane move-to-unoccupied-waypoint="filterRegExp:seat[0-9]+row[23]"></a-plane>

a-waypoint primitive

Seated waypoint:

<a-cylinder radius="0.25" height="0.5" position="-3.5 -4.74 -3" rotation="0 -150 0">
  <a-waypoint
    id="seat1"
    position="0 0.27 0"
    can-be-clicked="true"
    can-be-occupied="true"
    will-disable-motion="true"
  ></a-waypoint>
</a-cylinder>

Spawn point:

<a-waypoint id="spawnpoint" can-be-spawn-point="true" position="-25 0 0" rotation="0 90 0"></a-waypoint>

open-link

Example of a clickable button to move to a specific waypoint:

<a-waypoint id="entrance" position="4.5 0 46" rotation="0 180 0"></a-waypoint>
<a-plane
  class="clickable"
  width="2"
  height="0.6"
  material="color:black"
  text="value: exit the meeting room; width: 4; align: center"
  position="-5 2 150"
  billboard
  open-link="href:#entrance"
></a-plane>

Example of opening a link:

<a-plane
  class="clickable"
  width="2"
  height="0.6"
  material="color:black"
  text="value: go to aframe website; width: 4; align: center"
  position="-5 2 150"
  billboard
  open-link="href:https://aframe.io"
></a-plane>