Also check out Don McCurdy's physics implementation in aframe-extras.
Experimental physics components for A-Frame VR using cannon.js.
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
<script src="https://github.com/ngokevin/aframe-physics-components/blob/master/dist/aframe-physics-components.min.js"></script>
</head>
<body>
<a-scene physics-world="gravity: 0 -9.8 0">
<a-entity physics-body="boundingBox: 1 1 1; mass: 5; velocity: 0.2 0 0"
geometry="primitive: box" material="color: red"></a-entity>
</a-scene>
</body>
Install via NPM:
npm install aframe-physics-components
Then register and use.
require('aframe');
require('aframe-physics-components');
Property | Description | Type | Default Value |
---|---|---|---|
angularVelocity | (in deg/s) | vec3 | 0 0 0 |
boundingBox | Collision box (in m). | vec3 | 0 0 0 |
mass | (in kg) | number | 1 |
velocity | (in m/s) | vec3 | 0 0 0 |
Event Name | Description |
---|---|
collide | Emitted when entity collides with another entity. Event contains contact . |
Applies an impulse (indicated by impulseVec3
) at the body's local point
(indicated by positionVec3
). forceVec3
is in Force / Time (Newtons /
Seconds).
// Applies a small force from left-to-right to the top-left of the body.
var hitMeBody = document.querySelector('#hit-me-entity').components['physics-body'];
hitMeBody.applyImpulse({ x: 10, y: 0, z: 0 }, { x: -1, y: 1, z: 0 });
Property | Description | Default Value |
---|---|---|
gravity | vec3 | 0 -9.8 0 |
Event Name | Description |
---|---|
beginContact | Emitted when an entity in the world begins contact with another entity. Event contains bodyA and bodyB . |
endContact | Emitted when an entity in the world ends contact with another entity. Event contains bodyA and bodyB . |