Affect3d Gif !link! Online
// Kick‑off render(); </script> </body> </html>
const scene = new THREE.Scene(); scene.background = new THREE.Color(0x0a0a0a); affect3d gif
// ------------------------------------------------- // 3️⃣ Animation loop (simple rotation) // ------------------------------------------------- const FPS = 30; // GIF frame‑rate const DURATION = 2; // seconds const TOTAL_FRAMES = FPS * DURATION; // Kick‑off render()
<!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'; const scene = new THREE.Scene()
// Simple geometry const geometry = new THREE.TorusKnotGeometry(0.8, 0.2, 150, 20); const material = new THREE.MeshStandardMaterial( color: 0xff4e50, metalness: 0.7, roughness: 0.2 ); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh);
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;
const bloom = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, // strength 0.4, // radius 0.85 // threshold ); composer.addPass(bloom);