Add @recast-navigation/playcanvas package

.changeset/config.json

@@ -9,11 +9,11 @@
   "updateInternalDependencies": "patch",
   "ignore": [
     "navmesh-website",
-    "node-cjs-example",
-    "node-esm-example",
-    "parcel-example",
-    "vite-wasm-example",
-    "vite-worker-example"
+    "three-node-cjs-example",
+    "three-node-esm-example",
+    "three-vite-example",
+    "three-vite-worker-example",
+    "playcanvas-vite-example"
   ],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true

.changeset/kind-parrots-grin.md

@@ -0,0 +1,9 @@
+---
+'recast-navigation': minor
+---
+
+feat: remove 'three' entrypoint from 'recast-navigation' package
+
+To make way for adding other integration packages without bloating the `recast-navigation` package, the `recast-navigation/three` entrypoint has been removed.
+
+If you are importing from `recast-navigation/three`, simply install and import from `@recast/navigation-three` instead.

.changeset/thin-planes-guess.md

@@ -0,0 +1,5 @@
+---
+'@recast-navigation/three': minor
+---
+
+feat: change three debug helpers to take required params as standalone constructor arguments

.changeset/wet-toes-agree.md

@@ -0,0 +1,5 @@
+---
+'@recast-navigation/generators': patch
+---
+
+feat: add mergePositionsAndIndices

.changeset/witty-clouds-pay.md

@@ -0,0 +1,5 @@
+---
+'@recast-navigation/three': minor
+---
+
+feat: avoid cloning meshes and geometry in getPositionsAndIndices

.yarnrc.yml

@@ -5,3 +5,5 @@ enableGlobalCache: false
 nodeLinker: node-modules
 
 yarnPath: .yarn/releases/yarn-4.1.1.cjs
+
+npmRegistryServer: "https://registry.npmjs.org"

apps/docs/typedoc.json

@@ -2,8 +2,7 @@
   "name": "recast-navigation-js",
   "entryPoints": [
     "../../packages/recast-navigation/src/index.ts",
-    "../../packages/recast-navigation/src/generators.ts",
-    "../../packages/recast-navigation/src/three.ts"
+    "../../packages/recast-navigation/src/generators.ts"
   ],
   "entryPointStrategy": "expand",
   "out": "dist/",

apps/navmesh-website/package.json

@@ -19,17 +19,17 @@
     "recast-navigation": "workspace:*",
     "styled-components": "^6.1.8",
     "suspend-react": "^0.1.3",
-    "three": "^0.167.1",
+    "three": "^0.169.0",
     "tunnel-rat": "^0.1.2",
     "zustand": "^4.3.8"
   },
   "devDependencies": {
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.2.8",
-    "@types/three": "^0.167.1",
+    "@types/three": "^0.169.0",
     "@vitejs/plugin-react": "^4.2.0",
     "typescript": "^5.4.3",
-    "vite": "^5.2.8",
+    "vite": "^5.4.8",
     "vite-plugin-html": "^3.2.1"
   }
 }

apps/navmesh-website/src/features/recast/crowd/recast-agent.tsx

@@ -2,7 +2,7 @@ import { Line } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { Crowd, CrowdAgent, NavMesh, NavMeshQuery } from 'recast-navigation';
-import { CrowdHelper } from 'recast-navigation/three';
+import { CrowdHelper } from '@recast-navigation/three';
 import { MeshStandardMaterial, Vector3, Vector3Tuple } from 'three';
 
 export type RecastAgentRef = {
@@ -69,20 +69,20 @@ export const RecastAgent = forwardRef<RecastAgentRef, RecastAgentProps>(
         maxAgentRadius: agentRadius,
       });
 
-      const { point: agentPosition } = navMeshQuery.findClosestPoint({ x: 0, y: 0, z: 0 });
+      const { point: agentPosition } = navMeshQuery.findClosestPoint({
+        x: 0,
+        y: 0,
+        z: 0,
+      });
 
-      const agent = crowd.addAgent(
-        agentPosition,
-        {
-          radius: agentRadius,
-          height: agentHeight,
-          maxAcceleration: agentMaxAcceleration,
-          maxSpeed: agentMaxSpeed,
-        }
-      );
+      const agent = crowd.addAgent(agentPosition, {
+        radius: agentRadius,
+        height: agentHeight,
+        maxAcceleration: agentMaxAcceleration,
+        maxSpeed: agentMaxSpeed,
+      });
 
-      const crowdHelper = new CrowdHelper({
-        crowd,
+      const crowdHelper = new CrowdHelper(crowd, {
         agentMaterial: new MeshStandardMaterial({ color: 'red' }),
       });
 

apps/navmesh-website/src/features/recast/helpers/nav-mesh-debug-drawer.tsx

@@ -12,7 +12,7 @@ import {
   TileCacheGeneratorIntermediates,
   TiledNavMeshGeneratorIntermediates,
 } from 'recast-navigation/generators';
-import { DebugDrawer } from 'recast-navigation/three';
+import { DebugDrawer } from '@recast-navigation/three';
 
 export const DebugDrawerOption = {
   HEIGHTFIELD_SOLID: 'heightfield solid',

apps/navmesh-website/src/pages/editor-page.tsx

@@ -9,7 +9,7 @@ import {
   generateSoloNavMesh,
   generateTiledNavMesh,
 } from 'recast-navigation/generators';
-import { getPositionsAndIndices } from 'recast-navigation/three';
+import { getPositionsAndIndices } from '@recast-navigation/three';
 import { suspend } from 'suspend-react';
 import { Mesh } from 'three';
 import { RouterPaths } from '../app';

examples/playcanvas-vite-example/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+    <link rel="stylesheet" href="/src/index.css" />
+  </head>
+  <body>
+    <canvas id="app"></canvas>
+    <script type="module" src="/src/index.ts"></script>
+  </body>
+</html>

examples/playcanvas-vite-example/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "playcanvas-vite-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@recast-navigation/playcanvas": "workspace:^",
+    "playcanvas": "^2.0.0",
+    "recast-navigation": "workspace:^"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.3",
+    "vite": "^5.4.8"
+  }
+}

examples/playcanvas-vite-example/src/index.css

@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+canvas {
+  width: 100%;
+  height: 100vh;
+}

examples/playcanvas-vite-example/src/index.ts

@@ -0,0 +1,80 @@
+import { NavMeshHelper, pcToSoloNavMesh } from '@recast-navigation/playcanvas';
+import * as pc from 'playcanvas';
+import { init as initRecast } from 'recast-navigation';
+
+const init = async () => {
+  await initRecast();
+
+  const canvas = document.querySelector('#app') as HTMLCanvasElement;
+
+  const device = await pc.createGraphicsDevice(canvas, {
+    deviceTypes: [pc.DEVICETYPE_WEBGL2],
+  });
+  device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+  const app = new pc.Application(canvas);
+  app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
+  app.setCanvasResolution(pc.RESOLUTION_AUTO);
+  app.start();
+
+  const resize = () => app.resizeCanvas();
+  window.addEventListener('resize', resize);
+
+  const ground = new pc.Entity('cube');
+  ground.addComponent('render');
+  ground.render!.meshInstances = [
+    new pc.MeshInstance(
+      pc.Mesh.fromGeometry(
+        app.graphicsDevice,
+        new pc.BoxGeometry({ halfExtents: new pc.Vec3(5, 0.2, 5) })
+      ),
+      new pc.StandardMaterial()
+    ),
+  ];
+  app.root.addChild(ground);
+
+  const obstacle = new pc.Entity('obstacle');
+  obstacle.addComponent('render', {
+    type: 'box',
+    material: new pc.StandardMaterial(),
+  });
+  obstacle.setLocalScale(1, 1, 1);
+  obstacle.setPosition(0, 0.5, 0);
+  app.root.addChild(obstacle);
+
+  const camera = new pc.Entity('camera');
+  camera.addComponent('camera', {
+    clearColor: new pc.Color(0.5, 0.6, 0.9),
+  });
+  app.root.addChild(camera);
+  camera.setPosition(5, 5, 5);
+  camera.lookAt(0, 0, 0);
+
+  const light = new pc.Entity('light');
+  light.addComponent('light');
+  app.root.addChild(light);
+  light.setEulerAngles(45, 0, 0);
+
+  const recastConfig = {
+    cs: 0.05,
+    ch: 0.2,
+  };
+
+  const navMeshMeshInstances = [
+    ...ground.render!.meshInstances,
+    ...obstacle.render!.meshInstances,
+  ];
+
+  const { success, navMesh } = pcToSoloNavMesh(
+    navMeshMeshInstances,
+    recastConfig
+  );
+
+  if (success) {
+    const navMeshHelper = new NavMeshHelper(navMesh, app.graphicsDevice);
+
+    app.root.addChild(navMeshHelper);
+  }
+};
+
+init();

examples/node-cjs-example/index.cjs → examples/three-node-cjs-example/index.cjs

@@ -1,7 +1,7 @@
 const THREE = require('three');
 const Recast = require('recast-navigation');
 const RecastGenerators = require('recast-navigation/generators');
-const RecastThree = require('recast-navigation/three');
+const RecastThree = require('@recast-navigation/three');
 
 Recast.init().then(() => {
   console.log(RecastThree);

examples/node-cjs-example/package.json → examples/three-node-cjs-example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "node-cjs-example",
+  "name": "three-node-cjs-example",
   "private": true,
   "version": "1.0.0",
   "description": "example of using recast-navigation in node",

examples/node-esm-example/index.mjs → examples/three-node-esm-example/index.mjs

@@ -1,6 +1,6 @@
 import { NavMeshQuery, init } from 'recast-navigation';
 import { generateSoloNavMesh } from 'recast-navigation/generators';
-import * as RecastThree from 'recast-navigation/three';
+import * as RecastThree from '@recast-navigation/three';
 import { BoxGeometry, Mesh } from 'three';
 
 await init();

examples/node-esm-example/package.json → examples/three-node-esm-example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "node-esm-example",
+  "name": "three-node-esm-example",
   "private": true,
   "type": "module",
   "version": "1.0.0",

examples/parcel-example/index.html → examples/three-parcel-example/index.html

@@ -3,6 +3,6 @@
   <head> </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./index.jsx"></script>
+    <script type="module" src="./index.js"></script>
   </body>
 </html>