Your privacy is important to us. This website uses cookies to enhance user experience and to analyze performance and traffic on our website. By using this website, you acknowledge the real-time collection, storage, use, and disclosure of information on your device or provided by you (such as mouse movements and clicks). We may disclose such information about your use of our website with our social media, advertising and analytics partners. Visit our Privacy Policy and California Privacy Disclosure for more information on such sharing.
// ------------------------------------------------- // 3️⃣ Animation loop (simple rotation) // ------------------------------------------------- const FPS = 30; // GIF frame‑rate const DURATION = 2; // seconds const TOTAL_FRAMES = FPS * DURATION;
// ------------------------------------------------- // 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();
// Kick‑off render(); </script> </body> </html> affect3d gif
function render() // Rotate a bit each frame – creates a smooth loop const t = (frameCount / TOTAL_FRAMES) * Math.PI * 2; // 0‑2π mesh.rotation.x = Math.sin(t) * 0.5; mesh.rotation.y = t;
frameCount++; if (frameCount <= TOTAL_FRAMES * 60 / 60) requestAnimationFrame(render); else finalizeGif(); const url = URL.createObjectURL(blob)
// ------------------------------------------------- // 1️⃣ Scene setup // ------------------------------------------------- const renderer = new THREE.WebGLRenderer( antialias: true ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
// ------------------------------------------------- // 2️⃣ Post‑processing (the “affect” part) // ------------------------------------------------- const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); const a = document.createElement('a')
// Lights const dir = new THREE.DirectionalLight(0xffffff, 1); dir.position.set(5, 5, 5); scene.add(dir); scene.add(new THREE.AmbientLight(0x404040, 0.5));