Temp fix for Rapier WASM issue

dgreenheck · Jun 2, 2024 · d4ed9c0 · d4ed9c0
1 parent 937db75
commit d4ed9c0
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 139 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
 
 <body>
   <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
+  <script type="module" src="/src/app.ts"></script>
 </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "dev": "vite --host 127.0.0.1",
     "build": "tsc && vite build",
-    "preview": "vite preview",
+    "preview": "vite preview --host 127.0.0.1",
     "test": "jest"
   },
   "repository": {

diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/app.ts b/src/app.ts
@@ -7,134 +7,133 @@ import { BreakableObject } from "./physics/BreakableObject";
 import { FractureOptions } from "./fracture/entities/FractureOptions";
 
 type RAPIER_API = typeof import("@dimforge/rapier3d");
+const RAPIER = await import("@dimforge/rapier3d");
+
+const gui = new GUI();
+const gltfLoader = new GLTFLoader();
+
+let fractureOptions = new FractureOptions();
+let physics = new PhysicsManager(
+  RAPIER,
+  new RAPIER.Vector3(0, -10, 0),
+  fractureOptions,
+);
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(
+  50,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000,
+);
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.shadowMap.enabled = true;
+document.body.appendChild(renderer.domElement);
+
+const controls = new OrbitControls(camera, renderer.domElement);
+
+const lionModel = await gltfLoader.loadAsync("lion.glb");
+
+function loadScene() {
+  scene.clear();
+  physics.reset();
+
+  lionModel.scene.traverse((obj) => {
+    if ("isMesh" in obj && obj.isMesh) {
+      const lion = new BreakableObject();
+
+      const mesh = obj as THREE.Mesh;
+      lion.geometry = mesh.geometry;
+      lion.material = mesh.material;
+      lion.castShadow = true;
+
+      lion.geometry.computeBoundingBox();
+      const size = new THREE.Vector3();
+      lion.geometry.boundingBox?.getSize(size);
+
+      const colliderDesc = RAPIER.ColliderDesc.cuboid(1, 1, 1)
+        .setRestitution(0)
+        .setActiveEvents(RAPIER.ActiveEvents.COLLISION_EVENTS);
+
+      lion.rigidBody = physics.world.createRigidBody(
+        RAPIER.RigidBodyDesc.dynamic().setTranslation(0, size.y / 2 + 1, 0),
+      );
+
+      scene.add(lion);
+      physics.addObject(lion, colliderDesc);
+    }
+  });
 
-export async function init(RAPIER: RAPIER_API) {
-  const gui = new GUI();
-  const gltfLoader = new GLTFLoader();
-
-  let fractureOptions = new FractureOptions();
-  let physics = new PhysicsManager(
-    RAPIER,
-    new RAPIER.Vector3(0, -10, 0),
-    fractureOptions,
+  // Create a ground plane
+  const planeGeometry = new THREE.PlaneGeometry(200, 200);
+  const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xa0a0a0 });
+  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
+  plane.rotation.x = -Math.PI / 2;
+  plane.receiveShadow = true;
+  scene.add(plane);
+
+  // Add ground plane to Rapier world
+  const groundBody = physics.world.createRigidBody(
+    RAPIER.RigidBodyDesc.fixed(),
   );
-
-  const scene = new THREE.Scene();
-  const camera = new THREE.PerspectiveCamera(
-    50,
-    window.innerWidth / window.innerHeight,
-    0.1,
-    1000,
+  physics.world.createCollider(
+    RAPIER.ColliderDesc.cuboid(200, 0.01, 200),
+    groundBody,
   );
-  const renderer = new THREE.WebGLRenderer();
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  renderer.shadowMap.enabled = true;
-  document.body.appendChild(renderer.domElement);
-
-  const controls = new OrbitControls(camera, renderer.domElement);
-
-  const lionModel = await gltfLoader.loadAsync("lion.glb");
-
-  function loadScene() {
-    scene.clear();
-    physics.reset();
-
-    lionModel.scene.traverse((obj) => {
-      if ("isMesh" in obj && obj.isMesh) {
-        const lion = new BreakableObject();
-
-        const mesh = obj as THREE.Mesh;
-        lion.geometry = mesh.geometry;
-        lion.material = mesh.material;
-        lion.castShadow = true;
-
-        lion.geometry.computeBoundingBox();
-        const size = new THREE.Vector3();
-        lion.geometry.boundingBox?.getSize(size);
-
-        const colliderDesc = RAPIER.ColliderDesc.cuboid(1, 1, 1)
-          .setRestitution(0)
-          .setActiveEvents(RAPIER.ActiveEvents.COLLISION_EVENTS);
-
-        lion.rigidBody = physics.world.createRigidBody(
-          RAPIER.RigidBodyDesc.dynamic().setTranslation(0, size.y / 2 + 1, 0),
-        );
-
-        scene.add(lion);
-        physics.addObject(lion, colliderDesc);
-      }
-    });
-
-    // Create a ground plane
-    const planeGeometry = new THREE.PlaneGeometry(200, 200);
-    const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xa0a0a0 });
-    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
-    plane.rotation.x = -Math.PI / 2;
-    plane.receiveShadow = true;
-    scene.add(plane);
-
-    // Add ground plane to Rapier world
-    const groundBody = physics.world.createRigidBody(
-      RAPIER.RigidBodyDesc.fixed(),
-    );
-    physics.world.createCollider(
-      RAPIER.ColliderDesc.cuboid(200, 0.01, 200),
-      groundBody,
-    );
-
-    // Lighting
-    const ambient = new THREE.AmbientLight(0xffffff, 0.2);
-    scene.add(ambient);
-
-    const sun = new THREE.DirectionalLight();
-    sun.intensity = 3;
-    sun.position.set(-10, 10, 10);
-    sun.castShadow = true;
-    sun.shadow.camera.left = -50;
-    sun.shadow.camera.right = 50;
-    sun.shadow.camera.top = 50;
-    sun.shadow.camera.bottom = -50;
-    scene.add(sun);
-  }
-
-  // Position the camera
-  camera.position.set(-50, 40, 50);
-  controls.target.set(0, 10, 0);
+
+  // Lighting
+  const ambient = new THREE.AmbientLight(0xffffff, 0.2);
+  scene.add(ambient);
+
+  const sun = new THREE.DirectionalLight();
+  sun.intensity = 3;
+  sun.position.set(-10, 10, 10);
+  sun.castShadow = true;
+  sun.shadow.camera.left = -50;
+  sun.shadow.camera.right = 50;
+  sun.shadow.camera.top = 50;
+  sun.shadow.camera.bottom = -50;
+  scene.add(sun);
+}
+
+// Position the camera
+camera.position.set(-50, 40, 50);
+controls.target.set(0, 10, 0);
+controls.update();
+
+function animate() {
+  requestAnimationFrame(animate);
+  physics.update(scene);
+  renderer.render(scene, camera);
   controls.update();
+}
 
-  function animate() {
-    requestAnimationFrame(animate);
-    physics.update(scene);
-    renderer.render(scene, camera);
-    controls.update();
-  }
-
-  window.addEventListener("resize", () => {
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.updateProjectionMatrix();
-    renderer.setSize(window.innerWidth, window.innerHeight);
-  });
+window.addEventListener("resize", () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
 
-  const physicsFolder = gui.addFolder("Physics");
+const physicsFolder = gui.addFolder("Physics");
 
-  const gravityFolder = physicsFolder.addFolder("Gravity");
-  gravityFolder.add(physics.world.gravity, "x", -100, 100, 0.1).name("X");
-  gravityFolder.add(physics.world.gravity, "y", -100, 100, 0.1).name("Y");
-  gravityFolder.add(physics.world.gravity, "z", -100, 100, 0.1).name("Z");
+const gravityFolder = physicsFolder.addFolder("Gravity");
+gravityFolder.add(physics.world.gravity, "x", -100, 100, 0.1).name("X");
+gravityFolder.add(physics.world.gravity, "y", -100, 100, 0.1).name("Y");
+gravityFolder.add(physics.world.gravity, "z", -100, 100, 0.1).name("Z");
 
-  const fractureFolder = gui.addFolder("Fracture Options");
-  fractureFolder
-    .add(fractureOptions, "fractureMode", ["Convex", "Non-Convex"])
-    .name("Fracture Mode");
-  fractureFolder.add(fractureOptions, "fragmentCount", 2, 500, 1);
+const fractureFolder = gui.addFolder("Fracture Options");
+fractureFolder
+  .add(fractureOptions, "fractureMode", ["Convex", "Non-Convex"])
+  .name("Fracture Mode");
+fractureFolder.add(fractureOptions, "fragmentCount", 2, 500, 1);
 
-  const fracturePlanesFolder = fractureFolder.addFolder("Fracture Planes");
-  fracturePlanesFolder.add(fractureOptions.fracturePlanes, "x").name("X");
-  fracturePlanesFolder.add(fractureOptions.fracturePlanes, "y").name("Y");
-  fracturePlanesFolder.add(fractureOptions.fracturePlanes, "z").name("Z");
+const fracturePlanesFolder = fractureFolder.addFolder("Fracture Planes");
+fracturePlanesFolder.add(fractureOptions.fracturePlanes, "x").name("X");
+fracturePlanesFolder.add(fractureOptions.fracturePlanes, "y").name("Y");
+fracturePlanesFolder.add(fractureOptions.fracturePlanes, "z").name("Z");
 
-  gui.add({ loadScene }, "loadScene");
+gui.add({ loadScene }, "loadScene");
 
-  loadScene();
-  animate();
-}
+loadScene();
+animate();
diff --git a/src/main.ts b/src/main.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,23 +1,25 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ESNext",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "skipLibCheck": true,
-
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-
     /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "strict": true
   },
-  "include": ["src", "__tests__"]
-}
+  "include": [
+    "src",
+    "__tests__"
+  ]
+}
diff --git a/vite.config.js b/vite.config.js
@@ -8,6 +8,10 @@ export default {
   build: {
     outDir: './dist',
     sourcemap: true,
+    rollupOptions: {
+      // Required to prevent Rapier issue: https://github.com/dimforge/rapier.js/issues/278
+      treeshake: false
+    }
   },
   plugins: [wasm(), topLevelAwait()],
   resolve: {