// Capture the current canvas as a frame every 1/FPS second if (frameCount % Math.round(60 / FPS) === 0) // Grab the raw pixel data const ctx = renderer.domElement.getContext('2d'); const imgData = ctx.getImageData(0, 0, renderer.domElement.width, renderer.domElement.height); gif.addFrame(imgData, delay: 1000 / FPS );
const bloom = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, // strength 0.4, // radius 0.85 // threshold ); composer.addPass(bloom); affect3d gif
frameCount++; if (frameCount <= TOTAL_FRAMES * 60 / 60) requestAnimationFrame(render); else finalizeGif(); // Capture the current canvas as a frame
// ------------------------------------------------- // 1️⃣ Scene setup // ------------------------------------------------- const renderer = new THREE.WebGLRenderer( antialias: true ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const imgData = ctx.getImageData(0
// ------------------------------------------------- // 2️⃣ Post‑processing (the “affect” part) // ------------------------------------------------- const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Affect3D → GIF Demo</title> <style>bodymargin:0;overflow:hidden;</style> </head> <body> <script type="module"> import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.162/build/three.module.js'; import EffectComposer from 'https://cdn.jsdelivr.net/npm/three@0.162/examples/jsm/postprocessing/EffectComposer.js'; import RenderPass from 'https://cdn.jsdelivr.net/npm/three@0.162/examples/jsm/postprocessing/RenderPass.js'; import UnrealBloomPass from 'https://cdn.jsdelivr.net/npm/three@0.162/examples/jsm/postprocessing/UnrealBloomPass.js'; import GIF from 'https://cdn.jsdelivr.net/npm/gif.js/dist/gif.js';
// ------------------------------------------------- // 4️⃣ Encode & download // ------------------------------------------------- function finalizeGif() gif.on('finished', blob => const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'affect3d-loop.gif'; a.click(); URL.revokeObjectURL(url); ); gif.render();