|
|
@ -16,8 +16,8 @@ |
|
|
|
|
|
|
|
let cFrames = 0; |
|
|
|
let isCapturing = false; |
|
|
|
const totalCFrames = 600; // Number of frames to capture
|
|
|
|
const zip = new JSZip(); // Create a new JSZip instance
|
|
|
|
let frame_array = [] |
|
|
|
const totalCFrames = 1200; // Number of frames to capture
|
|
|
|
let captureFrames = false; |
|
|
|
|
|
|
|
let containerW = container_element.offsetWidth |
|
|
@ -144,30 +144,34 @@ |
|
|
|
renderer.setSize(containerW, containerH) |
|
|
|
}) |
|
|
|
|
|
|
|
// Function to capture the canvas and save it as PNG data in the zip
|
|
|
|
function captureFrame() { |
|
|
|
const canvas = renderer.domElement; |
|
|
|
canvas.toBlob((blob) => { |
|
|
|
// Add the blob to the ZIP archive
|
|
|
|
zip.file(`frame-${cFrames}.png`, blob); |
|
|
|
cFrames++; |
|
|
|
|
|
|
|
// If all frames are captured, zip and download
|
|
|
|
if (cFrames >= totalCFrames) { |
|
|
|
zipAndDownload(); |
|
|
|
} |
|
|
|
}, 'image/png'); |
|
|
|
} |
|
|
|
|
|
|
|
// Function to zip and download the frames
|
|
|
|
function zipAndDownload() { |
|
|
|
zip.generateAsync({ type: 'blob' }).then(function (content) { |
|
|
|
// Create a download link for the zip file
|
|
|
|
const link = document.createElement('a'); |
|
|
|
link.href = URL.createObjectURL(content); |
|
|
|
link.download = 'frames.zip'; |
|
|
|
link.click(); |
|
|
|
}); |
|
|
|
function captureFrame() { |
|
|
|
renderer.domElement.toDataURL('image/png').replace("image/png", "image/octet-stream"); |
|
|
|
let imgData = renderer.domElement.toDataURL("image/png"); |
|
|
|
frame_array.push(imgData); |
|
|
|
cFrames++; |
|
|
|
|
|
|
|
// If last frame, prepare the download
|
|
|
|
if (cFrames === totalCFrames) { |
|
|
|
prepareDownload(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function prepareDownload() { |
|
|
|
let zip = new JSZip(); |
|
|
|
console.log('zipping..') |
|
|
|
frame_array.forEach((dataUrl, index) => { |
|
|
|
let imgData = dataUrl.split(',')[1]; // Get base64 data part
|
|
|
|
zip.file(`frame_${index.toString().padStart(4, '0')}.png`, imgData, {base64: true}); |
|
|
|
}); |
|
|
|
console.log('zipped!') |
|
|
|
zip.generateAsync({type: "blob"}) |
|
|
|
.then(function(content) { |
|
|
|
const a = document.createElement("a"); |
|
|
|
a.href = URL.createObjectURL(content); |
|
|
|
a.download = "frames.zip"; |
|
|
|
console.log('zip dl ready!') |
|
|
|
a.click(); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// Event listener for the spacebar key press
|
|
|
@ -176,15 +180,15 @@ document.addEventListener('keydown', (event) => { |
|
|
|
isCapturing = !isCapturing; // Toggle capturing
|
|
|
|
|
|
|
|
if (isCapturing) { |
|
|
|
cFrames = 0; // Reset frame counter
|
|
|
|
captureFrames = true |
|
|
|
console.log('Capture started...'); |
|
|
|
} else { |
|
|
|
captureFrames = false |
|
|
|
cFrames = 0; // Reset frame counter
|
|
|
|
console.log('Capture paused...'); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
init() |
|
|
|