aframe-proxemic-component

A Proxemic Interactions component for A-Frame.

Usage no npm install needed!

<script type="module">
  import aframeProxemicComponent from 'https://cdn.skypack.dev/aframe-proxemic-component';
</script>

README

A-Frame Proxemics Interactions component

Version License

A Proxemic Interactions component for A-Frame.

For A-Frame.

proximity-sensor

Property Description Default Value
distance Distance, in meters, to the target object which will trigger the sensor. 1
target Selector to identify the target object. By default the proximity sensor will trigger in response to the camera object. [camera]
hidden Whether to trigger events on hidden entities false

Events

Event Description
proximityenter Triggered when the distance between this entity and the target entity transitions between being above to being below the distance property value.
proximityexit Triggered when the distance between this entity and the target entity transitions between being below to being above the distance property value.

Example

<a-scene environment="preset: forest">
    <a-sphere proximity-sensor="target:#two; distance: 1"
           radius="0.25" id="one" side="both" color="green" position="-2 1.6 -4"
           animation="property:position; from: -2 1.6 -4; to: 2 1.6 -4; dur: 5000; dir: alternate; loop: true"
           event-set__proximityenter="material.color: red"
           event-set__proximityexit="material.color: green"
    ></a-sphere>

    <a-box proximity-sensor="target:#one; distance: 2"
           width="0.5" height="0.5" depth="0.5" id="two" side="both" color="green" position="2 1.6 -4"
           animation="property:position; from: 2 1.6 -4; to: -2 1.6 -4; dur: 5000; dir: alternate; loop: true"
           event-set__proximityenter="material.color:blue"
           event-set__proximityexit="material.color: green"
    ></a-box>
</a-scene>

Additional examples:

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-proxemic-component/dist/aframe-proxemic-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity proximity-sensor></a-entity>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-proxemic-component

Then require and use.

require('aframe');
require('aframe-proxemic-component');

=======