Add three as a dev dependency instead of using cdn packages.

castano · castano · commit 0668e9560778 · 2025-09-05T00:12:57.000-07:00
diff --git a/examples/index.html b/examples/index.html
@@ -14,8 +14,9 @@
   <body>
     <h1>Spark.js Examples</h1>
     <ul id="examples">
-      <li><a href="basic.html">Basic spark.js example</a></li>
-      <li><a href="three-basic.html">Basic three.js + spark.js example</a></li>
+      <li><a href="basic.html">spark.js basic example</a></li>
+      <li><a href="three-basic.html">three.js + spark.js basic example</a></li>
+      <li><a href="three-gltf.html">three.js + spark.js GLTF example</a></li>
     </ul>
   </body>
 </html>
diff --git a/examples/three-basic.html b/examples/three-basic.html
@@ -13,7 +13,7 @@
 
 <body>
   <script type="module">
-    import * as THREE from "https://unpkg.com/three/build/three.webgpu.js";
+    import * as THREE from "three/webgpu";
     import { Spark } from "@ludicon/spark.js";
 
     const errorHTML = `
diff --git a/examples/three-gltf.html b/examples/three-gltf.html
@@ -12,13 +12,12 @@
 
 <body>
   <script type="module">
-    import * as THREE from '../../three.js/build/three.webgpu.js';
-    import { OrbitControls } from '../../three.js/examples/jsm/controls/OrbitControls.js';
-    import { GLTFLoader } from '../../three.js/examples/jsm/loaders/GLTFLoader.js';
-    import { RoomEnvironment } from '../../three.js/examples/jsm/environments/RoomEnvironment.js';
-    import { DRACOLoader } from '../../three.js/examples/jsm/loaders/DRACOLoader.js';
+    import * as THREE from "three/webgpu";
+    import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+    import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+    import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
 
-    import { Spark } from '../dist/index.esm.js';
+    import { Spark } from "@ludicon/spark.js";
 
     const errorHTML = `
       <div style="color: #FFF; padding: 2em; font-family: sans-serif; max-width: 600px; margin: 5em auto; text-align: center;">
@@ -258,21 +257,9 @@ <h1>WebGPU Not Supported</h1>
     const loader = new GLTFLoader()
     loader.register(parser => new GLTFSparkPlugin(parser, spark));
 
-    // Hook up DRACOLoader
-    const dracoLoader = new DRACOLoader();
-    dracoLoader.setDecoderPath('./libs/draco/'); 
-    loader.setDRACOLoader(dracoLoader);
-
     const gltf = await loader.loadAsync("./assets/DamagedHelmet.glb");
-    //const gltf = await loader.loadAsync( './assets/LittlestTokyo.glb' );
-    //const gltf = await loader.loadAsync( './assets/FlightHelmet.gltf' );
-    //const gltf = await loader.loadAsync( './assets/SciFiHelmet.gltf' );
-    //const gltf = await loader.loadAsync( './assets/forest_house.glb' );
-
 
     const box = new THREE.Box3().setFromObject(gltf.scene);
-    const offset = box.getCenter(new THREE.Vector3());
-    //gltf.scene.position.sub(offset);
     const scale = box.getSize(new THREE.Vector3()).length();
     gltf.scene.scale.multiplyScalar(4 / scale);
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,8 +61,12 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
     "rimraf": "^5.0.0",
+    "three": "^0.180.0",
     "vite": "^7.0.0"
   },
+  "peerDependencies": {
+    "three": "^0.180.0"
+  },
   "publishConfig": {
     "access": "public"
   },
