bombinans/fourdjs
1
1
Fork 0
Code Issues 9 Pull Requests Packages Projects Releases Wiki Activity

Saving frames as img elements

Browse Source
This commit is contained in:
Mike Lynch 2026-01-18 16:25:15 +11:00
parent 32cae6854f
commit 055f790e73
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -22,13 +22,10 @@
canvas { canvas {
width: 512px; width: 512px;
height: 512px; height: 512px;
image-rendering: crisp-edges; /* for firefox */ image-rendering: crisp-edges; /* for firefox */;
image-rendering: pixelated; image-rendering: pixelated;
} }
div#giflink { div#giflink {
position.fixed;
top: 600px;
left: 300px;
} }
div#release_notes { div#release_notes {
position: fixed; position: fixed;

21
main.js
View File

@ -47,7 +47,11 @@ camera.lookAt(0, 0, 0);
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
const renderer = new THREE.WebGLRenderer({antialias: true, canvas: canvas}); const renderer = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true,
canvas: canvas
});
renderer.setSize(40,40); renderer.setSize(40,40);
canvas.style.width="400px"; canvas.style.width="400px";
@ -55,7 +59,6 @@ canvas.style.height="400px";
renderer.localClippingEnabled = true; renderer.localClippingEnabled = true;
const gl = renderer.getContext();
// set up colours and materials for gui callbacks // set up colours and materials for gui callbacks
scene.background = new THREE.Color(DEFAULTS.background); scene.background = new THREE.Color(DEFAULTS.background);
@ -204,10 +207,11 @@ let dragx0 = 0;
let dragy0 = 0; let dragy0 = 0;
let dragging = false; let dragging = false;
let frame = 0; let frame = 0;
const FRAME_MAX = 8; const FRAME_MAX = 600;
let completed = false; let completed = false;
const giflink = document.getElementById("giflink");
createShape(gui.params.shape, gui.params.option); createShape(gui.params.shape, gui.params.option);
@ -217,7 +221,7 @@ function animate() {
theta += dtheta; theta += dtheta;
psi += dpsi; psi += dpsi;
const rotations = [ const rotations = [
rotfn[gui.params.xRotate](theta), rotfn[gui.params.xRotate](theta),
rotfn[gui.params.yRotate](psi) rotfn[gui.params.yRotate](psi)
]; ];
@ -231,7 +235,14 @@ const rotations = [
renderer.render( scene, camera ); renderer.render( scene, camera );
if( frame < FRAME_MAX ) {
console.log(`gif frame ${frame}`);
const data = canvas.toDataURL("image/png", 1);
const img = document.createElement("img");
img.setAttribute('src', data);
giflink.append(img);
frame++;
}
} }
animate(); animate();