chore: move worker example out of storybook, into standalone example

isaac-mason · isaac-mason · May 4, 2024 · May 1, 2024 · May 2, 2024 · May 4, 2024
commit d5f27c7faa550af3486cf9c5a2c4fd6d32debdca
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -12,7 +12,8 @@
     "node-cjs-example",
     "node-esm-example",
     "parcel-example",
-    "vite-wasm-example"
+    "vite-wasm-example",
+    "vite-worker-example"
   ],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true

diff --git a/examples/vite-wasm-example/src/app.tsx b/examples/vite-wasm-example/src/app.tsx
@@ -1,12 +1,12 @@
-import { Environment, OrbitControls } from '@react-three/drei';
+import { OrbitControls } from '@react-three/drei';
 import { Canvas, useThree } from '@react-three/fiber';
+import RecastWasm from '@recast-navigation/wasm/wasm';
 import { useEffect, useRef } from 'react';
 import { NavMeshQuery, init } from 'recast-navigation';
 import { NavMeshHelper, threeToSoloNavMesh } from 'recast-navigation/three';
 import { suspend } from 'suspend-react';
 import { Color, Group, Mesh, MeshBasicMaterial, Vector2, Vector3 } from 'three';
 import { Line2, LineGeometry, LineMaterial } from 'three-stdlib';
-import RecastWasm from '@recast-navigation/wasm/wasm';
 
 const App = () => {
   const scene = useThree((state) => state.scene);
@@ -120,7 +120,8 @@ export default () => (
     <Canvas camera={{ position: [5, 5, 5] }}>
       <App />
 
-      <Environment preset="city" />
+      <ambientLight intensity={1.5} />
+      <directionalLight position={[5, 5, -5]} intensity={3} />
 
       <OrbitControls />
     </Canvas>

diff --git a/examples/vite-worker-example/.gitignore b/examples/vite-worker-example/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vite-worker-example/.prettierrc.json b/examples/vite-worker-example/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/examples/vite-worker-example/index.html b/examples/vite-worker-example/index.html
@@ -0,0 +1,13 @@
+<!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>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/vite-worker-example/package.json b/examples/vite-worker-example/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "vite-worker-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.105.4",
+    "@react-three/fiber": "^8.15.12",
+    "react": "^18.3.1",
+    "react-dom": "^18.2.0",
+    "recast-navigation": "0.27.0",
+    "suspend-react": "^0.1.3",
+    "three": "^0.163.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.2.8",
+    "@types/three": "^0.163.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.8"
+  }
+}
diff --git a/examples/vite-worker-example/src/app.tsx b/examples/vite-worker-example/src/app.tsx
@@ -0,0 +1,110 @@
+import { Environment, OrbitControls } from '@react-three/drei';
+import { Canvas, useThree } from '@react-three/fiber';
+import { useEffect, useState } from 'react';
+import { NavMesh, importNavMesh, init } from 'recast-navigation';
+import { DebugDrawer, getPositionsAndIndices } from 'recast-navigation/three';
+import { suspend } from 'suspend-react';
+import { Mesh } from 'three';
+import NavMeshWorker from './navmesh-worker?worker';
+
+const App = () => {
+  const scene = useThree((state) => state.scene);
+
+  useEffect(() => {
+    const debugDrawer = new DebugDrawer();
+
+    const meshes: Mesh[] = [];
+
+    scene.traverse((child) => {
+      if (child instanceof Mesh) {
+        meshes.push(child);
+      }
+    });
+
+    const [positions, indices] = getPositionsAndIndices(meshes);
+
+    const config = {
+      cs: 0.05,
+      ch: 0.2,
+    };
+
+    const worker = new NavMeshWorker();
+
+    let navMesh: NavMesh | undefined;
+
+    worker.onmessage = (event) => {
+      const navMeshExport = event.data;
+
+      const result = importNavMesh(navMeshExport);
+
+      navMesh = result.navMesh;
+
+      debugDrawer.clear();
+      debugDrawer.drawNavMesh(navMesh);
+
+      console.log('here');
+    };
+
+    worker.postMessage({ positions, indices, config }, [
+      positions.buffer,
+      indices.buffer,
+    ]);
+
+    const onResize = () => {
+      debugDrawer.resize(window.innerWidth, window.innerHeight);
+    };
+
+    onResize();
+
+    window.addEventListener('resize', onResize);
+
+    scene.add(debugDrawer);
+
+    return () => {
+      worker.terminate();
+
+      if (navMesh) {
+        navMesh.destroy();
+      }
+
+      scene.remove(debugDrawer);
+      window.removeEventListener('resize', onResize);
+      debugDrawer.dispose();
+    };
+  }, []);
+
+  return (
+    <>
+      {/* ground */}
+      <mesh position={[0, -0.25, 0]}>
+        <boxGeometry args={[5, 0.5, 5]} />
+        <meshStandardMaterial color="#ccc" />
+      </mesh>
+
+      {/* obstacle */}
+      <mesh position={[0, 0.5, 0]}>
+        <boxGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial color="blue" />
+      </mesh>
+    </>
+  );
+};
+
+const RecastInit = (props: { children: JSX.Element }) => {
+  suspend(() => init(), []);
+
+  return props.children;
+};
+
+export default () => (
+  <RecastInit>
+    <Canvas camera={{ position: [5, 5, 5] }}>
+      <App />
+
+      <ambientLight intensity={1.5} />
+      <directionalLight position={[5, 5, -5]} intensity={3} />
+
+      <OrbitControls />
+    </Canvas>
+  </RecastInit>
+);
diff --git a/examples/vite-worker-example/src/index.css b/examples/vite-worker-example/src/index.css
@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+#root,
+canvas {
+  width: 100%;
+  height: 100vh;
+}
diff --git a/examples/vite-worker-example/src/main.tsx b/examples/vite-worker-example/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './app';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/...ies/advanced/web-worker/navmesh-worker.ts → ...vite-worker-example/src/navmesh-worker.ts b/...ies/advanced/web-worker/navmesh-worker.ts → ...vite-worker-example/src/navmesh-worker.ts
diff --git a/examples/vite-worker-example/src/vite-env.d.ts b/examples/vite-worker-example/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/vite-worker-example/tsconfig.json b/examples/vite-worker-example/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/vite-worker-example/tsconfig.node.json b/examples/vite-worker-example/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ES2022",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/vite-worker-example/vite.config.ts b/examples/vite-worker-example/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/packages/recast-navigation/.storybook/stories/advanced/web-worker/web-worker.stories.tsx b/packages/recast-navigation/.storybook/stories/advanced/web-worker/web-worker.stories.tsx
diff --git a/yarn.lock b/yarn.lock
@@ -19398,6 +19398,26 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"vite-worker-example@workspace:examples/vite-worker-example":
+  version: 0.0.0-use.local
+  resolution: "vite-worker-example@workspace:examples/vite-worker-example"
+  dependencies:
+    "@react-three/drei": "npm:^9.105.4"
+    "@react-three/fiber": "npm:^8.15.12"
+    "@types/react": "npm:^18.3.1"
+    "@types/react-dom": "npm:^18.2.8"
+    "@types/three": "npm:^0.163.0"
+    "@vitejs/plugin-react": "npm:^4.2.0"
+    react: "npm:^18.3.1"
+    react-dom: "npm:^18.2.0"
+    recast-navigation: "npm:0.27.0"
+    suspend-react: "npm:^0.1.3"
+    three: "npm:^0.163.0"
+    typescript: "npm:^5.4.3"
+    vite: "npm:^5.2.8"
+  languageName: unknown
+  linkType: soft
+
 "vite@npm:^5.0.0":
   version: 5.0.10
   resolution: "vite@npm:5.0.10"