storytold/spark
2
0
Fork 0
mirror of https://github.com/storytold/spark.git synced 2026-10-09 00:09:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Noeri Huisman
2025-09-15 23:38:16 +02:00
committed by GitHub
parent 8f340d1f78
commit 882def6eb7
19 changed files with 129 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/debug-color/index.html
+8 -1
View File
@@ -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 });
examples/depth-of-field/index.html
+8 -1
View File
@@ -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,
examples/dynamic-lighting/index.html
+8 -1
View File
@@ -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 });
examples/envmap/index.html
+8 -1
View File
@@ -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 });
examples/glsl/index.html
+8 -1
View File
@@ -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 });
examples/hello-world/index.html
+8 -1
View File
@@ -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 });
examples/interactivity/index.html
+1 -1
View File
@@ -61,7 +61,7 @@
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);
examples/multiple-splats/index.html
+8 -1
View File
@@ -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 });
examples/multiple-viewpoints/index.html
+8 -1
View File
@@ -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 });
examples/particle-animation/index.html
+1 -1
View File
@@ -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();
}
examples/particle-simulation/index.html
+1 -1
View File
@@ -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();
}
examples/procedural-splats/index.html
+8 -1
View File
@@ -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({
examples/raycasting/index.html
+8 -1
View File
@@ -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;
examples/sogs/index.html
+7
View File
@@ -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);
examples/splat-reveal-effects/index.html
+8 -1
View File
@@ -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);
examples/splat-shader-effects/index.html
+7
View File
@@ -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 });
examples/splat-texture/index.html
+8 -1
View File
@@ -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");
examples/stochastic/index.html
+8 -1
View File
@@ -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
examples/webxr/index.html
+8 -1
View File
@@ -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