angular-three-cannon

This library is a wrapper around the Cannon.js physics engine for use with Angular Three.

Documentation

All public APIs are documented with JSDoc comments. Your IDE will provide inline documentation, parameter hints, and examples as you code.

Installation

npm install angular-three-cannon cannon-es @pmndrs/cannon-worker-api
# yarn add angular-three-cannon cannon-es @pmndrs/cannon-worker-api
# pnpm add angular-three-cannon cannon-es @pmndrs/cannon-worker-api

Make sure to already have angular-three installed

Usage

import { Component, viewChild, ElementRef } from '@angular/core';
import { Mesh } from 'three';
import { NgtcPhysics } from 'angular-three-cannon';
import { box } from 'angular-three-cannon/body';

@Component({
	template: `
		<ngt-mesh #mesh>
			<ngt-box-geometry />
		</ngt-mesh>
	`,
})
export class Box {
	mesh = viewChild.required<ElementRef<Mesh>>('mesh');

	constructor() {
		// Make this mesh a Box body in Physics. Only works within ngtc-physics
		box(() => ({ mass: 10000, position: [0, 0, 0], args: [1, 1, 1] }), this.mesh);
	}
}

@Component({
	template: `
		<ngtc-physics>
			<app-box />
		</ngtc-physics>
	`,
	imports: [NgtcPhysics, Box],
})
export class SceneGraph {}

Options

The NgtcPhysics component accepts an options input with the following properties:

<ngtc-physics [options]="{ gravity: [0, -9.81, 0], iterations: 10 }">
	<!-- Physics bodies here -->
</ngtc-physics>

Property	Type	Default
allowSleep	boolean	false
axisIndex	0 | 1 | 2	0
broadphase	'Naive' | 'SAP'	'Naive'
defaultContactMaterial	ContactMaterialOptions	{ contactEquationStiffness: 1e6 }
frictionGravity	Vector3 | null	null
gravity	Vector3	[0, -9.81, 0]
isPaused	boolean	false
iterations	number	5
maxSubSteps	number	10
quatNormalizeFast	boolean	false
quatNormalizeSkip	number	0
shouldInvalidate	boolean	true
size	number	1000
solver	'GS' | 'Split'	'GS'
stepSize	number	1/60
tolerance	number	0.001

Debug

Read the debug documentation for more information on how to enable debug mode and view debug information.

Bodies

Read the body documentation for more information on how to create physics bodies and apply forces.

Constraints

Read the constraint documentation for more information on how to create constraints between physics bodies.