feat: remove resize from DebugDrawer, three LineMaterial no longer re…

…quires manually setting resolution

.changeset/strange-sloths-love.md

@@ -0,0 +1,5 @@
+---
+"@recast-navigation/three": patch
+---
+
+feat: increase linewidth for DebugDrawer default line material

.changeset/tame-cheetahs-float.md

@@ -0,0 +1,7 @@
+---
+"@recast-navigation/three": minor
+---
+
+feat: remove resize from DebugDrawer, three LineMaterial no longer requires manually setting resolution
+
+If using an older version of three.js, you may need to manually set the resolution of the LineMaterial on `debugDrawer.lineMaterial`.

apps/navmesh-website/package.json

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

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

@@ -137,22 +137,6 @@ export const NavMeshDebugDrawer = ({
  };
  }, []);
 
- useEffect(() => {
- if (!debug) return;
-
- const onResize = () => {
- debug.resize(window.innerWidth, window.innerHeight);
- };
-
- onResize();
-
- window.addEventListener('resize', onResize);
-
- return () => {
- window.removeEventListener('resize', onResize);
- };
- }, [debug]);
-
  useEffect(() => {
  if (!debug) return;
 

examples/node-cjs-example/package.json

@@ -9,8 +9,10 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
- "@types/three": "^0.163.0",
  "recast-navigation": "0.33.0",
- "three": "^0.163.0"
+ "three": "^0.167.1"
+ },
+ "devDependencies": {
+ "@types/three": "^0.167.1"
  }
 }

examples/node-esm-example/package.json

@@ -10,8 +10,10 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
- "@types/three": "^0.163.0",
  "recast-navigation": "0.33.0",
- "three": "^0.163.0"
+ "three": "^0.167.1"
+ },
+ "devDependencies": {
+ "@types/three": "^0.167.1"
  }
 }

examples/parcel-example/package.json

@@ -11,7 +11,7 @@
  "@react-three/fiber": "^8.16.3",
  "react": "18.3.1",
  "recast-navigation": "workspace:^",
- "three": "^0.163.0"
+ "three": "^0.167.1"
  },
  "devDependencies": {
  "parcel": "^2.11.0"

examples/vite-wasm-example/package.json

@@ -14,12 +14,12 @@
  "react-dom": "^18.2.0",
  "recast-navigation": "0.33.0",
  "suspend-react": "^0.1.3",
- "three": "^0.163.0"
+ "three": "^0.167.1"
  },
  "devDependencies": {
  "@types/react": "^18.3.1",
  "@types/react-dom": "^18.2.8",
- "@types/three": "^0.163.0",
+ "@types/three": "^0.167.1",
  "@vitejs/plugin-react": "^4.2.0",
  "typescript": "^5.4.3",
  "vite": "^5.2.8"

examples/vite-worker-example/package.json

@@ -14,12 +14,12 @@
  "react-dom": "^18.2.0",
  "recast-navigation": "0.33.0",
  "suspend-react": "^0.1.3",
- "three": "^0.163.0"
+ "three": "^0.167.1"
  },
  "devDependencies": {
  "@types/react": "^18.3.1",
  "@types/react-dom": "^18.2.8",
- "@types/three": "^0.163.0",
+ "@types/three": "^0.167.1",
  "@vitejs/plugin-react": "^4.2.0",
  "typescript": "^5.4.3",
  "vite": "^5.2.8"

packages/recast-navigation-core/package.json

@@ -39,7 +39,7 @@
  "@rollup/plugin-node-resolve": "^15.0.1",
  "@rollup/plugin-terser": "^0.4.3",
  "@rollup/plugin-typescript": "^11.1.6",
- "@types/three": "^0.163.0",
+ "@types/three": "^0.167.1",
  "babel-loader": "^9.1.3",
  "eslint": "^9.6.0",
  "prettier": "^3.1.0",

packages/recast-navigation-three/package.json

@@ -44,13 +44,13 @@
  "@rollup/plugin-node-resolve": "^15.0.1",
  "@rollup/plugin-terser": "^0.4.3",
  "@rollup/plugin-typescript": "^11.1.6",
- "@types/three": "^0.163.0",
+ "@types/three": "^0.167.1",
  "eslint": "^9.6.0",
  "prettier": "^3.1.0",
  "rollup": "^4.14.0",
  "rollup-plugin-copy": "^3.4.0",
  "rollup-plugin-filesize": "^10.0.0",
- "three": "^0.163.0",
+ "three": "^0.167.1",
  "typescript": "^5.4.3"
  },
  "packageManager": "[email protected]"

packages/recast-navigation-three/src/debug/debug-drawer.ts

@@ -15,7 +15,7 @@ import {
  LineMaterial,
  LineSegments2,
  LineSegmentsGeometry,
-} from 'three-stdlib';
+} from 'three/addons';
 
 type VertexData = [
  x: number,
@@ -72,7 +72,6 @@ export class DebugDrawer extends THREE.Group {
  color: 0xffffff,
  linewidth: 2,
  vertexColors: true,
- resolution: new THREE.Vector2(800, 800),
  polygonOffset: true,
  polygonOffsetFactor: -4,
  polygonOffsetUnits: -10,
@@ -267,10 +266,6 @@ export class DebugDrawer extends THREE.Group {
  // - drawTileCacheContours
  // - drawTileCachePolyMesh
 
- resize(width: number, height: number): void {
- this.lineMaterial.resolution.set(width, height);
- }
-
  reset(): void {
  for (const child of this.children) {
  if (child instanceof THREE.Mesh || child instanceof LineSegments2) {
@@ -285,6 +280,12 @@ export class DebugDrawer extends THREE.Group {
  this.reset();
 
  Raw.Module.destroy(this.debugDrawImpl);
+
+ this.pointGeometry.dispose();
+
+ this.triMaterial.dispose();
+ this.pointMaterial.dispose();
+ this.lineMaterial.dispose();
  }
 
  private vertex(x: number, y: number, z: number, color: number) {

packages/recast-navigation/.storybook/stories/advanced/flood-fill-pruning.stories.tsx

@@ -113,7 +113,6 @@ export const FloodFillPruning = () => {
  const debug = new DebugDrawer();
 
  debug.drawNavMeshPolysWithFlags(navMesh, 1, 0x0000ff);
- debug.resize(window.innerWidth, window.innerHeight);
 
  setDebug(debug);
 

packages/recast-navigation/package.json

@@ -94,7 +94,7 @@
  "@storybook/react-vite": "^8.0.9",
  "@types/react": "^18.3.1",
  "@types/react-dom": "^18.2.8",
- "@types/three": "^0.163.0",
+ "@types/three": "^0.167.1",
  "@vitejs/plugin-react": "^4.2.1",
  "eslint": "^9.6.0",
  "leva": "^0.9.35",
@@ -105,7 +105,7 @@
  "rollup-plugin-filesize": "^10.0.0",
  "storybook": "^8.0.9",
  "suspend-react": "^0.1.3",
- "three": "^0.163.0",
+ "three": "^0.167.1",
  "three-pathfinding": "^1.2.0",
  "typescript": "^5.4.3",
  "vite": "^5.2.10",

yarn.lock

@@ -5264,7 +5264,7 @@ __metadata:
  "@rollup/plugin-node-resolve": "npm:^15.0.1"
  "@rollup/plugin-terser": "npm:^0.4.3"
  "@rollup/plugin-typescript": "npm:^11.1.6"
- "@types/three": "npm:^0.163.0"
+ "@types/three": "npm:^0.167.1"
  babel-loader: "npm:^9.1.3"
  eslint: "npm:^9.6.0"
  prettier: "npm:^3.1.0"
@@ -5314,13 +5314,13 @@ __metadata:
  "@rollup/plugin-node-resolve": "npm:^15.0.1"
  "@rollup/plugin-terser": "npm:^0.4.3"
  "@rollup/plugin-typescript": "npm:^11.1.6"
- "@types/three": "npm:^0.163.0"
+ "@types/three": "npm:^0.167.1"
  eslint: "npm:^9.6.0"
  prettier: "npm:^3.1.0"
  rollup: "npm:^4.14.0"
  rollup-plugin-copy: "npm:^3.4.0"
  rollup-plugin-filesize: "npm:^10.0.0"
- three: "npm:^0.163.0"
+ three: "npm:^0.167.1"
  typescript: "npm:^5.4.3"
  peerDependencies:
  "@types/three": 0.x.x
@@ -6870,10 +6870,10 @@ __metadata:
  languageName: node
  linkType: hard
 
-"@tweenjs/tween.js@npm:~23.1.1":
- version: 23.1.1
- resolution: "@tweenjs/tween.js@npm:23.1.1"
- checksum: 10/8833907d9d6adb584879fb743c3d1f6f37ea8a6a2750c06383040cba03cd284a8bbd9f173b50ee7636f56d242e1090b28335b29eb9c44ddf7ca0bb534c4b697e
+"@tweenjs/tween.js@npm:~23.1.2":
+ version: 23.1.3
+ resolution: "@tweenjs/tween.js@npm:23.1.3"
+ checksum: 10/10ecaf311c975162459bd016ef7eb1f3118a257050c4886de9737dee823fc829100a0887f3fc298f7a5577140eac054f9609b823eb0748ca7b653ec85ffba75e
  languageName: node
  linkType: hard
 
@@ -7359,16 +7359,16 @@ __metadata:
  languageName: node
  linkType: hard
 
-"@types/three@npm:^0.163.0":
- version: 0.163.0
- resolution: "@types/three@npm:0.163.0"
+"@types/three@npm:^0.167.1":
+ version: 0.167.1
+ resolution: "@types/three@npm:0.167.1"
  dependencies:
- "@tweenjs/tween.js": "npm:~23.1.1"
+ "@tweenjs/tween.js": "npm:~23.1.2"
  "@types/stats.js": "npm:*"
  "@types/webxr": "npm:*"
  fflate: "npm:~0.8.2"
  meshoptimizer: "npm:~0.18.1"
- checksum: 10/81320c03aa89b67601cdc7d0a0dca93cf1d59ff564214859f0f87d0314062e3b7cb02f6d15c245cdae6755d1febc54d23432c25df16ff4aac9c65ba2efd9973d
+ checksum: 10/e11cae99e9e4c2ae9c6f1a92d7a62a6d8d9f0b111133bcf8395d82a1da8d42cce94bec7c53b6c81a0e8f85d086377fa2cd854426dec72efce02c70150a2dc157
  languageName: node
  linkType: hard
 
@@ -15002,7 +15002,7 @@ __metadata:
  "@react-three/fiber": "npm:^8.16.3"
  "@types/react": "npm:^18.3.1"
  "@types/react-dom": "npm:^18.2.8"
- "@types/three": "npm:^0.163.0"
+ "@types/three": "npm:^0.167.1"
  "@vitejs/plugin-react": "npm:^4.2.0"
  leva: "npm:^0.9.35"
  react: "npm:^18.3.1"
@@ -15012,7 +15012,7 @@ __metadata:
  recast-navigation: "workspace:*"
  styled-components: "npm:^6.1.8"
  suspend-react: "npm:^0.1.3"
- three: "npm:^0.163.0"
+ three: "npm:^0.167.1"
  tunnel-rat: "npm:^0.1.2"
  typescript: "npm:^5.4.3"
  vite: "npm:^5.2.8"
@@ -15067,9 +15067,9 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "node-cjs-example@workspace:examples/node-cjs-example"
  dependencies:
- "@types/three": "npm:^0.163.0"
+ "@types/three": "npm:^0.167.1"
  recast-navigation: "npm:0.33.0"
- three: "npm:^0.163.0"
+ three: "npm:^0.167.1"
  languageName: unknown
  linkType: soft
 
@@ -15086,9 +15086,9 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "node-esm-example@workspace:examples/node-esm-example"
  dependencies:
- "@types/three": "npm:^0.163.0"
+ "@types/three": "npm:^0.167.1"
  recast-navigation: "npm:0.33.0"
- three: "npm:^0.163.0"
+ three: "npm:^0.167.1"
  languageName: unknown
  linkType: soft
 
@@ -15800,7 +15800,7 @@ __metadata:
  parcel: "npm:^2.11.0"
  react: "npm:18.3.1"
  recast-navigation: "workspace:^"
- three: "npm:^0.163.0"
+ three: "npm:^0.167.1"
  languageName: unknown
  linkType: soft
 
@@ -16865,7 +16865,7 @@ __metadata:
  "@storybook/react-vite": "npm:^8.0.9"
  "@types/react": "npm:^18.3.1"
  "@types/react-dom": "npm:^18.2.8"
- "@types/three": "npm:^0.163.0"
+ "@types/three": "npm:^0.167.1"
  "@vitejs/plugin-react": "npm:^4.2.1"
  eslint: "npm:^9.6.0"
  leva: "npm:^0.9.35"
@@ -16876,7 +16876,7 @@ __metadata:
  rollup-plugin-filesize: "npm:^10.0.0"
  storybook: "npm:^8.0.9"
  suspend-react: "npm:^0.1.3"
- three: "npm:^0.163.0"
+ three: "npm:^0.167.1"
  three-pathfinding: "npm:^1.2.0"
  typescript: "npm:^5.4.3"
  vite: "npm:^5.2.10"
@@ -18479,10 +18479,10 @@ __metadata:
  languageName: node
  linkType: hard
 
-"three@npm:^0.163.0":
- version: 0.163.0
- resolution: "three@npm:0.163.0"
- checksum: 10/caf4b681b62b4367242b88e89299f8f5e728636a38af51ccb56c5814ff9d2a59a8116df3d6851238804b23435b4410ba68ae9e70f7d26791345945c094abf011
+"three@npm:^0.167.1":
+ version: 0.167.1
+ resolution: "three@npm:0.167.1"
+ checksum: 10/48022352c7feaba61b217958919f93556030b832a90c47661c8c57874ce7120116ca157eec7993755d54881a6135c952435e842541bd6b0972cd66c3add203ad
  languageName: node
  linkType: hard
 
@@ -19448,13 +19448,13 @@ __metadata:
  "@react-three/fiber": "npm:^8.16.3"
  "@types/react": "npm:^18.3.1"
  "@types/react-dom": "npm:^18.2.8"
- "@types/three": "npm:^0.163.0"
+ "@types/three": "npm:^0.167.1"
  "@vitejs/plugin-react": "npm:^4.2.0"
  react: "npm:^18.3.1"
  react-dom: "npm:^18.2.0"
  recast-navigation: "npm:0.33.0"
  suspend-react: "npm:^0.1.3"
- three: "npm:^0.163.0"
+ three: "npm:^0.167.1"
  typescript: "npm:^5.4.3"
  vite: "npm:^5.2.8"
  languageName: unknown
@@ -19468,13 +19468,13 @@ __metadata:
  "@react-three/fiber": "npm:^8.16.3"
  "@types/react": "npm:^18.3.1"
  "@types/react-dom": "npm:^18.2.8"
- "@types/three": "npm:^0.163.0"
+ "@types/three": "npm:^0.167.1"
  "@vitejs/plugin-react": "npm:^4.2.0"
  react: "npm:^18.3.1"
  react-dom: "npm:^18.2.0"
  recast-navigation: "npm:0.33.0"
  suspend-react: "npm:^0.1.3"
- three: "npm:^0.163.0"
+ three: "npm:^0.167.1"
  typescript: "npm:^5.4.3"
  vite: "npm:^5.2.8"
  languageName: unknown