aframe-aabb-collider-component

An axis-aligned bounding box component for A-Frame.

Usage no npm install needed!

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

README

aframe-aabb-collider-component

Version License

An axis-aligned bounding box component for A-Frame. Provides collision detection.

For A-Frame.

API

Property Description Default Value
collideNonVisible Whether to check for collisions against non-visible entities. false
debug Whether to draw bounding box helpers. false
enabled Whether collision checks are running. true
objects Selector of entities to intersection test against. ''
interval Milliseconds in between intersection checks. 80

If the target collidable object is moving, set <a-entity data-aabb-collider-dynamic> on the target. By default, collidable objects are presumed to be static for performance purposes.

Events

Event Description
hitstart Intersection between box and another entity. Emitted on both source and target if target does not have AABB.
hitend No longer intersecting between box and another entity. Emitted on both source and target if target does not have AABB.
hitclosest Intersection between the box and the closest entity from its center. Only one entity is "closest" at a time.
hitclosestclear The previously closest intersected entity to the box is no longer the closest entity.

Members

Accessed via entity.components['aabb-collider'][<member>].

Name Description
closestIntersectedEl Closest collided entity.
intersectedEls Array of current collided entities.

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.9.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-aabb-collider-component@3.1.0/dist/aframe-aabb-collider-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity hand-controls="right" aabb-collider="objects: .box"></a-entity>
    <a-box class="box" color="blue" position="0 1 -5"></a-box>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-aabb-collider-component

Then require and use.

require('aframe');
require('aframe-aabb-collider-component');