Make sure all examples resize when the window is resized (#155)

mrxz · web-flow · commit 882def6eb719 · 2025-09-15T14:38:16.000-07:00
diff --git a/examples/debug-color/index.html b/examples/debug-color/index.html
@@ -33,7 +33,14 @@
     const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     let splatURL = await getAssetFileURL("butterfly.spz");
     const butterfly = new SplatMesh({ url: splatURL });
diff --git a/examples/depth-of-field/index.html b/examples/depth-of-field/index.html
@@ -35,7 +35,14 @@
     const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     const spark = new SparkRenderer({
       renderer,
diff --git a/examples/dynamic-lighting/index.html b/examples/dynamic-lighting/index.html
@@ -95,7 +95,14 @@
 
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     // Create a SparkRenderer and add it to the scene to render all the Gsplats.
     const spark = new SparkRenderer({ renderer });
diff --git a/examples/envmap/index.html b/examples/envmap/index.html
@@ -50,7 +50,14 @@
     const renderer = new THREE.WebGLRenderer();
     renderer.setClearColor(new THREE.Color(0x1b2037), 1.0);
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     // Explicitly create a SparkRenderer to render environment maps
     const spark = new SparkRenderer({ renderer });
diff --git a/examples/glsl/index.html b/examples/glsl/index.html
@@ -33,7 +33,14 @@
     const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     const splatURL = await getAssetFileURL("butterfly.spz");
     const butterfly = new SplatMesh({ url: splatURL });
diff --git a/examples/hello-world/index.html b/examples/hello-world/index.html
@@ -30,7 +30,14 @@
     const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     const splatURL = await getAssetFileURL("butterfly.spz");
     const butterfly = new SplatMesh({ url: splatURL });
diff --git a/examples/interactivity/index.html b/examples/interactivity/index.html
@@ -61,7 +61,7 @@ <h2>Food scans by <a href="https://x.com/tipatat" target="_blank">Tipatat</a></h
     const renderer = new THREE.WebGLRenderer();
     renderer.shadowMap.enabled = true;
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
 
     // Setup camera
     const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
diff --git a/examples/multiple-splats/index.html b/examples/multiple-splats/index.html
@@ -48,7 +48,14 @@
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setClearColor(new THREE.Color(0xFFFFFF), 1);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     let splatURL = await getAssetFileURL("butterfly-ai.spz");
     const butterflySplats = new PackedSplats({ url: splatURL });
diff --git a/examples/multiple-viewpoints/index.html b/examples/multiple-viewpoints/index.html
@@ -36,7 +36,14 @@
     const renderer = new THREE.WebGLRenderer();
     const header_height = document.querySelector('header').getBoundingClientRect().height;
     renderer.setSize(window.innerWidth, window.innerHeight - header_height);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     // Explicitly create a SparkRenderer in the scene to spawn new viewpoints
     const spark = new SparkRenderer({ renderer });
diff --git a/examples/particle-animation/index.html b/examples/particle-animation/index.html
@@ -279,7 +279,7 @@
     function handleResize() {
       const width = window.innerWidth;
       const height = window.innerHeight;
-      renderer.setSize(width, height, false);
+      renderer.setSize(width, height);
       camera.aspect = width / height;
       camera.updateProjectionMatrix();
     }
diff --git a/examples/particle-simulation/index.html b/examples/particle-simulation/index.html
@@ -62,7 +62,7 @@
     function handleResize() {
       const width = window.innerWidth;
       const height = window.innerHeight;
-      renderer.setSize(width, height, false);
+      renderer.setSize(width, height);
       camera.aspect = width / height;
       camera.updateProjectionMatrix();
     }
diff --git a/examples/procedural-splats/index.html b/examples/procedural-splats/index.html
@@ -33,7 +33,14 @@
     const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     // Generate a Sierpinski pyramid one splat at a time via iteration
     const pyramid = new SplatMesh({
diff --git a/examples/raycasting/index.html b/examples/raycasting/index.html
@@ -42,7 +42,14 @@
     camera.lookAt(0, -0.15, 0);
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     // Add robots
     const NUM_ROBOTS = 5;
diff --git a/examples/sogs/index.html b/examples/sogs/index.html
@@ -38,6 +38,13 @@
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
 
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
     const splatURL = await getAssetFileURL("sutro.zip");
     const sutroTower = new SplatMesh({ url: splatURL });
     sutroTower.quaternion.set(1, 0, 0, 0);
diff --git a/examples/splat-reveal-effects/index.html b/examples/splat-reveal-effects/index.html
@@ -40,7 +40,14 @@
     
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     // Animation timing variables
     const animateT = dyno.dynoFloat(0);
diff --git a/examples/splat-shader-effects/index.html b/examples/splat-shader-effects/index.html
@@ -33,6 +33,13 @@
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
 
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
     // Cat model setup
     const splatURL = await getAssetFileURL("cat.spz");
     const cat = new SplatMesh({ url: splatURL });
diff --git a/examples/splat-texture/index.html b/examples/splat-texture/index.html
@@ -35,7 +35,14 @@
     const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 100);
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     function imgToRgba(img) {
         const canvas = document.createElement("canvas");
diff --git a/examples/stochastic/index.html b/examples/stochastic/index.html
@@ -31,7 +31,14 @@
     const renderer = new THREE.WebGLRenderer();
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     // Make a local frame of reference that we can move to control
     // the camera, or as a frame of reference in WebXR mode
diff --git a/examples/webxr/index.html b/examples/webxr/index.html
@@ -30,7 +30,14 @@
     const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
+    document.body.appendChild(renderer.domElement);
+
+    window.addEventListener('resize', onWindowResize, false);
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
 
     // Make a local frame of reference that we can move to control
     // the camera, or as a frame of reference in WebXR mode

Original file line number	Diff line number	Diff line change
`@@ -279,7 +279,7 @@`
`279`	`279`	`function handleResize() {`
`280`	`280`	`const width = window.innerWidth;`
`281`	`281`	`const height = window.innerHeight;`
`282`		`- renderer.setSize(width, height, false);`
	`282`	`+ renderer.setSize(width, height);`
`283`	`283`	`camera.aspect = width / height;`
`284`	`284`	`camera.updateProjectionMatrix();`
`285`	`285`	`}`