A-Frame Interactive Areas

Demo

Webpage

https://demo.inplayo.com/aframe/interactive-areas/

Video

Demo using

• A-Frame 1.3.0
• Oculus Quest 2
• Google Chrome Version 102.0.5005.61 (Mobile + Desktop)

General

Interactive areas - A-Frame scene zones that are sensitive to the appearance of the user on them. When a user enters an area, an event occurs for the area component and all its subcomponents. Interface is made as representation of A-Frame components linking ability, on declarative level.

Core dependencies

Interactive areas functional made with:

• aframe-aabb-collider-component.js
• aframe-proxy-event-component.js
• aframe-event-set-component.js

Algorithm description

Entering Area

1. aabb-collider-component tracking intersection between camera. While intersection is found, aabb-collider sending event hitstart to area parent element
2. parent area element proxy-event-component recieve hitstart event and broadcast areaEnter event to all nested components
3. Children of parent area element receiving areaEnter event and processing actions using event-set-component

Leaving Area

1. aabb-collider-component tracking intersection between camera. While intersection is gone, aabb-collider sending event hitend to area parent element
2. parent area element proxy-event-component recieve hitend event and broadcast areaLeave event to all nested components
3. Children of parent area element receiving areaLeave event and processing actions using event-set-component

Example

This is demo part using mixins, #area node is area container, same as area. #area_child is nested element, inside #area

 <a-mixin id="area"
    aabb-collider="objects: [camera];"
    proxy-event__areaEnter="event: hitstart; to: CHILDREN; as: areaEnter;"
    proxy-event__areaLeave="event: hitend; to: CHILDREN; as: areaLeave;">
</a-mixin>

<a-mixin id="area_child"
    event-set__areaEnter="_event: areaEnter; text.color:yellow;"
    event-set__areaLeave="_event: areaLeave; text.color: white;">
</a-mixin>

Badges