0.35.2 • Published 9 months ago

@recast-navigation/three v0.35.2

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

@recast-navigation/three

Three.js nav mesh generation and visualisation helpers for recast-navigation.

Installation

> npm install @recast-navigation/three recast-navigation

Usage

Importing

To import the three.js glue, you can either use the three entrypoint in recast-navigation:

import { init } from 'recast-navigation'
import { ... } from '@recast-navigation/three';

Or you can use the packages directly:

import { init } from '@recast-navigation/core'
import { ... } from '@recast-navigation/three';

Initialization

Before you can use the library, you must initialize it. This is an asynchronous operation.

Calling init() after the library has already been initialized will return a promise that resolves immediately.

import { init } from 'recast-navigation';

await init();

Generating a NavMesh

This package provides convenience functions for generating nav meshes from THREE.Mesh objects.

import { init } from 'recast-navigation';
import { threeToSoloNavMesh, threeToTiledNavMesh, threeToTileCache } from '@recast-navigation/three';
import * as THREE from 'three';

/* initialize the library */
await init();

/* create your scene */
const scene = new THREE.Scene();
// ...

/* get meshes to generate the navmesh from */
const meshes: THREE.Mesh[] = [];
scene.traverse((child) => {
  if (child instanceof THREE.Mesh) {
    meshes.push(child);
  }
});

/* generate a solo navmesh */
const { success, navMesh } = threeToSoloNavMesh(meshes, {
  // ... nav mesh generation config ...
}});

/* generate a tiled navmesh */
const { success, navMesh } = threeToTiledNavMesh(meshes, {
  tileSize: 16,
  // ... nav mesh generation config ...
}});

/* generate a tile cache with support for temporary obstacles */
const { success, navMesh, tileCache } = threeToTileCache(meshes, {
  tileSize: 16,
  // ... nav mesh generation config ...
}});

Interacting with a NavMesh

You can documentation for interacting with the generated navmesh in the core library README:

https://github.com/isaac-mason/recast-navigation-js

This library provides helpers that are used in conjunction with the core library.

Debug Drawer

This package provides a DebugDrawer utility that can visualise a navmesh and other generation intermediates.

import { DebugDrawer } from '@recast-navigation/three';

const debugDrawer = new DebugDrawer();

// draw a navmesh
debugDrawer.drawNavMesh(navMesh);

// clear the debug drawer
debugDrawer.reset();

// dispose of threejs and wasm resources
debugDrawer.dispose();

See the Debug Drawer storybooks for more examples: https://recast-navigation-js.isaacmason.com/?path=/story/debug-three-debug-drawer--nav-mesh

Helpers

This package provides helpers for visualizing various recast-navigation objects in three.js.

NavMeshHelper

import { NavMeshHelper } from '@recast-navigation/three';

const navMeshHelper = new NavMeshHelper(navMesh);

scene.add(navMeshHelper);

// update the helper when the navmesh changes
navMeshHelper.update();

OffMeshConnectionsHelper

import { OffMeshConnectionsHelper } from '@recast-navigation/three';

const offMeshConnectionsHelper = new OffMeshConnectionsHelper(
  offMeshConnections
);

scene.add(offMeshConnectionsHelper);

TileCacheHelper

Visualises obstacles in a TileCache.

import { TileCacheHelper } from '@recast-navigation/three';

const tileCacheHelper = new TileCacheHelper(tileCache);

scene.add(tileCacheHelper);

// update the helper after adding or removing obstacles
tileCacheHelper.update();

CrowdHelper

Visualises agents in a Crowd.

import { CrowdHelper } from '@recast-navigation/three';

const crowdHelper = new CrowdHelper(crowd);

scene.add(crowdHelper);

// update the helper after updating the crowd
crowdHelper.update();

Custom Materials

You can optionally provide custom materials to the helpers.

// NavMeshHelper
const navMeshMaterial = new THREE.MeshBasicMaterial({ color: 'red' });
const navMeshHelper = new NavMeshHelper(navMesh, {
  navMeshMaterial,
});

// OffMeshConnectionsHelper
const offMeshConnectionEntryCircleMaterial = new THREE.MeshBasicMaterial({
  color: 'green',
});
const offMeshConnectionExitCircleMaterial = new THREE.MeshBasicMaterial({
  color: 'yellow',
});
const offMeshConnectionLineMaterial = new THREE.LineBasicMaterial({
  color: 'white',
});
const offMeshConnectionsHelper = new OffMeshConnectionsHelper(offMeshConnections, {
  entryCircleMaterial: offMeshConnectionEntryCircleMaterial,
  exitCircleMaterial: offMeshConnectionExitCircleMaterial,
  lineMaterial: offMeshConnectionLineMaterial,
});

// TileCacheHelper
const obstacleMaterial = new THREE.MeshBasicMaterial({ color: 'blue' });
const tileCacheHelper = new TileCacheHelper(tileCache, {
  obstacleMaterial,
});

// CrowdHelper
const agentMaterial = new THREE.MeshBasicMaterial({ color: 'red' });
const crowdHelper = new CrowdHelper(crowd, {
  agentMaterial,
});
0.35.2

9 months ago

0.35.1

9 months ago

0.35.0

9 months ago

0.34.0

11 months ago

0.32.0

1 year ago

0.30.0

1 year ago

0.29.2

1 year ago

0.33.0

1 year ago

0.31.1

1 year ago

0.31.0

1 year ago

0.29.1

1 year ago

0.29.0

1 year ago

0.28.0

1 year ago

0.27.0

1 year ago

0.26.0

1 year ago

0.25.0

1 year ago

0.23.0

1 year ago

0.24.1

1 year ago

0.24.0

1 year ago

0.21.0

1 year ago

0.22.0

1 year ago

0.20.0

1 year ago

0.19.0

1 year ago

0.18.2

1 year ago

0.18.1

1 year ago

0.18.0

1 year ago

0.16.4

1 year ago

0.17.0

1 year ago

0.16.3

1 year ago

0.16.2

1 year ago

0.16.1

2 years ago

0.9.3

2 years ago

0.11.0

2 years ago

0.10.1

2 years ago

0.12.0

2 years ago

0.10.2

2 years ago

0.13.0

2 years ago

0.12.1

2 years ago

0.14.0

2 years ago

0.13.1

2 years ago

0.15.0

2 years ago

0.13.2

2 years ago

0.16.0

2 years ago

0.15.1

2 years ago

0.13.3

2 years ago

0.10.0

2 years ago

0.9.0

2 years ago

0.7.2

2 years ago

0.8.0

2 years ago

0.7.1

2 years ago

0.9.2

2 years ago

0.9.1

2 years ago

0.7.3

2 years ago

0.5.0

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.7.0

2 years ago

0.6.0

2 years ago

0.1.0

2 years ago

0.3.0

2 years ago

0.1.2

2 years ago

0.2.0

2 years ago

0.1.1

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago