feat: add example that doesn't use a bundler

isaac-mason · isaac-mason · May 4, 2024 · May 1, 2024 · May 2, 2024 · May 4, 2024
commit c9ae76cceb4c7d066bfebe3719f311ccad7306be
diff --git a/examples/no-bundler/index.html b/examples/no-bundler/index.html
@@ -0,0 +1,84 @@
+<html>
+  <script type="importmap">
+    {
+      "imports": {
+        "@recast-navigation/core": "https://unpkg.com/@recast-navigation/core@0.27.0/dist/index.mjs",
+        "@recast-navigation/wasm": "https://unpkg.com/@recast-navigation/wasm@0.27.0/dist/recast-navigation.wasm-compat.js",
+        "@recast-navigation/generators": "https://unpkg.com/@recast-navigation/generators@0.27.0/dist/index.mjs",
+        "@recast-navigation/three": "https://unpkg.com/@recast-navigation/three@0.27.0/dist/index.mjs",
+        "three": "https://unpkg.com/three@0.164.0/build/three.module.js",
+        "three/examples/jsm/controls/OrbitControls": "https://unpkg.com/three@0.164.0/examples/jsm/controls/OrbitControls.js"
+      }
+    }
+  </script>
+  <script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+    import { init } from '@recast-navigation/core';
+    import { DebugDrawer, threeToSoloNavMesh } from '@recast-navigation/three';
+
+    await init();
+
+    const renderer = new THREE.WebGLRenderer();
+    document.body.appendChild(renderer.domElement);
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera();
+    camera.position.set(10, 10, 10);
+
+    const orbitControls = new OrbitControls(camera, renderer.domElement);
+
+    const ground = new THREE.Mesh(
+      new THREE.BoxGeometry(10, 1, 10),
+      new THREE.MeshBasicMaterial({ color: '#333' })
+    );
+
+    scene.add(ground);
+
+    const box = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 2, 2),
+      new THREE.MeshBasicMaterial({ color: '#555' })
+    );
+    box.position.set(0, 1, 0);
+
+    scene.add(box);
+
+    const { success, navMesh } = threeToSoloNavMesh([ground, box], {
+      cs: 0.05,
+      ch: 0.05,
+    });
+
+    const debugDrawer = new DebugDrawer();
+    debugDrawer.drawNavMesh(navMesh);
+
+    scene.add(debugDrawer);
+
+    const onWindowResize = () => {
+      debugDrawer.resize(window.innerWidth, window.innerHeight);
+
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    };
+    onWindowResize();
+
+    window.addEventListener('resize', onWindowResize);
+
+    const animate = () => {
+      requestAnimationFrame(animate);
+      renderer.render(scene, camera);
+    };
+
+    animate();
+  </script>
+  <style>
+    body {
+      margin: 0;
+      overflow: hidden;
+    }
+    canvas {
+      width: 100%;
+      height: 100vh;
+    }
+  </style>
+</html>