import * as THREE from 'three'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; export default function sketch(ctx) { const { scene, camera, renderer, gui, size, textures, sfx, canvas } = ctx; const params = { dispersion: 4.0, frost: 0.22, iridescence: 0.7, depth: 0.45, sweep: 0.35, tint: '#f1d72c', exposure: 1.15, volume: 0.6, beams: 1.0, beamCount: 3, }; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = params.exposure; scene.background = new THREE.Color('#040507'); const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; scene.environmentIntensity = 0.8; // ---------- textures const scratch = textures.get('tex_5KrxF6llwtJK', { repeat: 0.7 }); scratch.colorSpace = THREE.NoColorSpace; scratch.needsUpdate = true; const backTex = textures.get('tex_z9CIo19Itd3P'); // backdrop plane (refracted through glass) const back = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), new THREE.MeshBasicMaterial({ map: backTex, color: new THREE.Color(0.55, 0.55, 0.6) })); back.position.z = -7; scene.add(back); // sweeping light bars const bars = []; const barCols = ['#ffffff', '#8fb8ff', '#ffd27a']; for (let i = 0; i < 3; i++) { const m = new THREE.MeshBasicMaterial({ color: new THREE.Color(barCols[i]).multiplyScalar(4) }); m.userData.base = new THREE.Color(barCols[i]); const b = new THREE.Mesh(new THREE.BoxGeometry(0.06 + i * 0.03, 9, 0.05), m); b.position.z = -2.4 - i * 0.5; b.rotation.z = 0.25 - i * 0.18; scene.add(b); bars.push(b); } // glow pool beneath const gc = document.createElement('canvas'); gc.width = gc.height = 128; const g2 = gc.getContext('2d'); const grd = g2.createRadialGradient(64, 64, 0, 64, 64, 64); grd.addColorStop(0, 'rgba(90,150,255,0.9)'); grd.addColorStop(0.4, 'rgba(40,80,200,0.3)'); grd.addColorStop(1, 'rgba(0,0,0,0)'); g2.fillStyle = grd; g2.fillRect(0, 0, 128, 128); const glowTex = new THREE.CanvasTexture(gc); glowTex.colorSpace = THREE.SRGBColorSpace; const pool = new THREE.Mesh(new THREE.PlaneGeometry(5, 1.4), new THREE.MeshBasicMaterial({ map: glowTex, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, opacity: 0.6 })); pool.position.set(0, -2.15, -0.5); pool.rotation.x = -1.2; scene.add(pool); // dust const DN = 500, dpos = new Float32Array(DN * 3); for (let i = 0; i < DN; i++) { dpos[i * 3] = (Math.random() - 0.5) * 14; dpos[i * 3 + 1] = (Math.random() - 0.5) * 9; dpos[i * 3 + 2] = (Math.random() - 0.5) * 8 - 1; } const dgeo = new THREE.BufferGeometry(); dgeo.setAttribute('position', new THREE.BufferAttribute(dpos, 3)); const dust = new THREE.Points(dgeo, new THREE.PointsMaterial({ color: '#9fb6ff', size: 0.018, transparent: true, opacity: 0.5, blending: THREE.AdditiveBlending, depthWrite: false })); scene.add(dust); // lights const key = new THREE.DirectionalLight('#ffffff', 2.5); key.position.set(3, 4, 5); scene.add(key); const rim = new THREE.DirectionalLight('#6f9bff', 3); rim.position.set(-4, 2, -3); scene.add(rim); const warm = new THREE.PointLight('#ffb86b', 40, 0, 2); warm.position.set(2.5, -1.5, 2); scene.add(warm); // ---------- trace logo shapes from the asset const logoTex = textures.get('img_wgDp8MWc6hLP'); const N = 240, M = N + 2; const cv = document.createElement('canvas'); cv.width = cv.height = N; const c2 = cv.getContext('2d', { willReadFrequently: true }); c2.drawImage(logoTex.image, 0, 0, N, N); const px = c2.getImageData(0, 0, N, N).data; const maskW = new Uint8Array(M * M), maskY = new Uint8Array(M * M); for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) { const i = (y * N + x) * 4; const r = px[i] / 255, g = px[i + 1] / 255, b = px[i + 2] / 255, a = px[i + 3] / 255; if (a < 0.5) continue; const mx = Math.max(r, g, b), mn = Math.min(r, g, b); const k = (y + 1) * M + x + 1; if (mn > 0.6) maskW[k] = 1; else if (r > 0.5 && g > 0.4 && b < 0.45 && mx - mn > 0.3) maskY[k] = 1; } function traceLoops(mask) { const adj = new Map(); const link = (ax, ay, bx, by) => { const ka = ax * 4096 + ay, kb = bx * 4096 + by; if (!adj.has(ka)) adj.set(ka, []); if (!adj.has(kb)) adj.set(kb, []); adj.get(ka).push(kb); adj.get(kb).push(ka); }; for (let y = 0; y < M - 1; y++) for (let x = 0; x < M - 1; x++) { const a = mask[y * M + x], b = mask[y * M + x + 1], c = mask[(y + 1) * M + x + 1], d = mask[(y + 1) * M + x]; const e = []; if (a !== b) e.push([2 * x + 1, 2 * y]); if (b !== c) e.push([2 * x + 2, 2 * y + 1]); if (c !== d) e.push([2 * x + 1, 2 * y + 2]); if (d !== a) e.push([2 * x, 2 * y + 1]); if (e.length === 2) link(e[0][0], e[0][1], e[1][0], e[1][1]); else if (e.length === 4) { link(e[0][0], e[0][1], e[1][0], e[1][1]); link(e[2][0], e[2][1], e[3][0], e[3][1]); } } const seen = new Set(), loops = []; for (const start of adj.keys()) { if (seen.has(start)) continue; const loop = []; let prev = -1, cur = start, guard = 0; while (guard++ < 200000) { seen.add(cur); loop.push([Math.floor(cur / 4096), cur % 4096]); const nb = adj.get(cur); let next = nb[0] !== prev && !seen.has(nb[0]) ? nb[0] : (nb[1] !== undefined && !seen.has(nb[1]) ? nb[1] : -1); if (next < 0) break; prev = cur; cur = next; } if (loop.length > 40) loops.push(loop); } return loops; } function rdp(pts, eps) { if (pts.length < 3) return pts; const [ax, ay] = pts[0], [bx, by] = pts[pts.length - 1]; const dx = bx - ax, dy = by - ay, L = Math.hypot(dx, dy) || 1e-6; let md = 0, mi = 0; for (let i = 1; i < pts.length - 1; i++) { const d = Math.abs((pts[i][0] - ax) * dy - (pts[i][1] - ay) * dx) / L; if (d > md) { md = d; mi = i; } } if (md > eps) return rdp(pts.slice(0, mi + 1), eps).slice(0, -1).concat(rdp(pts.slice(mi), eps)); return [pts[0], pts[pts.length - 1]]; } function simplifyLoop(loop) { let fi = 0, fd = 0; for (let i = 0; i < loop.length; i++) { const d = Math.hypot(loop[i][0] - loop[0][0], loop[i][1] - loop[0][1]); if (d > fd) { fd = d; fi = i; } } const A = rdp(loop.slice(0, fi + 1), 1.4), B = rdp(loop.slice(fi).concat([loop[0]]), 1.4); return A.slice(0, -1).concat(B.slice(0, -1)); } const S = 3.4; const toWorld = (p) => new THREE.Vector2(((p[0] / 2 - 1) / N - 0.5) * S, (0.5 - (p[1] / 2 - 1) / N) * S); const shapesW = traceLoops(maskW).map((l) => new THREE.Shape(simplifyLoop(l).map(toWorld))); const shapesY = traceLoops(maskY).map((l) => new THREE.Shape(simplifyLoop(l).map(toWorld))); // ---------- glass materials const glassProps = () => ({ transmission: 1, thickness: 0.8, ior: 1.52, roughness: params.frost, roughnessMap: scratch, dispersion: params.dispersion, iridescence: params.iridescence, iridescenceIOR: 1.35, iridescenceThicknessRange: [120, 520], clearcoat: 1, clearcoatRoughness: 0.04, bumpMap: scratch, bumpScale: 0.5, specularIntensity: 1, envMapIntensity: 1.3, side: THREE.DoubleSide, }); const clearMat = new THREE.MeshPhysicalMaterial({ ...glassProps(), color: '#f4f8ff', attenuationColor: '#cfe2ff', attenuationDistance: 2.5 }); const ambMat = new THREE.MeshPhysicalMaterial({ ...glassProps(), color: params.tint, attenuationColor: params.tint, attenuationDistance: 0.7 }); const icon = new THREE.Group(); scene.add(icon); const meshes = []; function build() { for (const m of meshes) { icon.remove(m); m.geometry.dispose(); } meshes.length = 0; const opts = { depth: params.depth, bevelEnabled: true, bevelThickness: 0.07, bevelSize: 0.035, bevelSegments: 5, curveSegments: 1 }; const add = (shapes, mat) => { if (!shapes.length) return; const geo = new THREE.ExtrudeGeometry(shapes, opts); geo.translate(0, 0, -params.depth / 2); const m = new THREE.Mesh(geo, mat); icon.add(m); meshes.push(m); }; add(shapesW, clearMat); add(shapesY, ambMat); const box = new THREE.Box3().setFromObject(icon); const c = box.getCenter(new THREE.Vector3()); for (const m of meshes) m.position.set(-c.x + m.position.x, -c.y + m.position.y, 0); clearMat.thickness = ambMat.thickness = params.depth * 1.8; } build(); // ---------- post const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); const bloom = new UnrealBloomPass(new THREE.Vector2(size.width, size.height), 0.55, 0.6, 0.85); composer.addPass(bloom); composer.addPass(new OutputPass()); function fit(w, h) { const aspect = w / Math.max(h, 1); const t = Math.tan(THREE.MathUtils.degToRad(25)); camera.position.set(0, 0.1, Math.max(4.3, 1.95 / (t * aspect))); camera.lookAt(0, 0, 0); const d = camera.position.z - back.position.z; const hh = 2 * t * d, ww = hh * aspect; const sx = Math.max(ww, hh * 1.5) * 1.15; back.scale.set(sx, sx / 1.5, 1); } fit(size.width, size.height); // ---------- controls const setBoth = (k, v) => { clearMat[k] = v; ambMat[k] = v; }; gui.add(params, 'dispersion', 0, 10).name('Dispersion').onChange((v) => setBoth('dispersion', v)); gui.add(params, 'frost', 0, 0.8).name('Frost').onChange((v) => setBoth('roughness', v)); gui.add(params, 'iridescence', 0, 1).name('Iridescence').onChange((v) => setBoth('iridescence', v)); gui.add(params, 'depth', 0.1, 1.2).name('Thickness').onChange(build); gui.add(params, 'sweep', 0, 1.5).name('Light Sweep'); gui.add(params, 'beams', 0, 2).name('Beam Intensity'); gui.add(params, 'beamCount', 0, 3, 1).name('Beam Count'); gui.addColor(params, 'tint').name('Accent Glass').onChange((v) => { ambMat.color.set(v); ambMat.attenuationColor.set(v); }); gui.add(params, 'exposure', 0.5, 2).name('Exposure').onChange((v) => { renderer.toneMappingExposure = v; }); gui.add(params, 'volume', 0, 1).name('Sound').onChange((v) => { if (sfx) sfx.volume = v; }); if (sfx) sfx.volume = params.volume; // ---------- interaction let droneOn = false, spin = 0, spinTarget = 0, lastShimmer = 0; const onDown = () => { if (sfx) { if (!droneOn) { sfx.loop('sfx_iAeAoNCFGFXl', { volume: 0.32 }); droneOn = true; } sfx.play('sfx_2l7jijLFhE5N', { volume: 0.7 + Math.random() * 0.2, rate: 0.9 + Math.random() * 0.25 }); } spinTarget += Math.PI * 2; }; canvas.addEventListener('pointerdown', onDown); let tx = 0, ty = 0, sweepT = 0; const prevBarX = [0, 0, 0]; return { update({ time, delta, pointer }) { const dt = Math.min(delta, 0.05); const px = pointer.inside ? pointer.x : 0, py = pointer.inside ? pointer.y : 0; tx += (px - tx) * (1 - Math.exp(-dt * 3)); ty += (py - ty) * (1 - Math.exp(-dt * 3)); spin += (spinTarget - spin) * (1 - Math.exp(-dt * 2.2)); icon.rotation.y = Math.sin(time * 0.23) * 0.42 + Math.sin(time * 0.61) * 0.08 + tx * 0.5 + spin; icon.rotation.x = Math.sin(time * 0.31) * 0.12 - ty * 0.35; icon.rotation.z = Math.sin(time * 0.17) * 0.04; icon.position.y = Math.sin(time * 0.5) * 0.08; pool.material.opacity = 0.45 + 0.15 * Math.sin(time * 0.5); sweepT += dt * params.sweep; for (let i = 0; i < bars.length; i++) { const x = Math.sin(sweepT * (0.7 + i * 0.23) + i * 2.1) * 4.5; bars[i].position.x = x; const on = i < params.beamCount && params.beams > 0.001; bars[i].visible = on; if (on) bars[i].material.color.copy(bars[i].material.userData.base).multiplyScalar(4 * params.beams); if (sfx && droneOn && bars[i].visible && Math.sign(x) !== Math.sign(prevBarX[i]) && time - lastShimmer > 2.5) { sfx.play('sfx_iduHTmlNgI04', { volume: 0.25, rate: 0.9 + Math.random() * 0.2, pan: 0 }); lastShimmer = time; } prevBarX[i] = x; } warm.position.x = 2.5 * Math.cos(time * 0.2); dust.rotation.y = time * 0.01; dust.position.y = Math.sin(time * 0.1) * 0.2; camera.position.x = tx * 0.3; camera.lookAt(0, 0, 0); }, render() { composer.render(); }, resize({ width, height }) { composer.setSize(width, height); bloom.setSize(width, height); fit(width, height); }, dispose() { canvas.removeEventListener('pointerdown', onDown); pmrem.dispose(); }, }; }