import * as THREE from 'three'; 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({ scene, camera, renderer, gui, size }) { const params = { speed: 1.0, glow: 1.4, wobble: 1.0, stars: 1800, cat: '#ff3bd4', accent: '#3be8ff', space: '#07031a' }; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.1; scene.background = new THREE.Color('#020108'); // Nebula backdrop const nebMat = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 }, uA: { value: new THREE.Color(params.cat) }, uB: { value: new THREE.Color(params.accent) }, uS: { value: new THREE.Color(params.space) } }, vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }`, fragmentShader: ` varying vec2 vUv; uniform float uTime; uniform vec3 uA; uniform vec3 uB; uniform vec3 uS; float h(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); } float n(vec2 p){ vec2 i=floor(p), f=fract(p); vec2 u=f*f*(3.0-2.0*f); return mix(mix(h(i),h(i+vec2(1.0,0.0)),u.x),mix(h(i+vec2(0.0,1.0)),h(i+vec2(1.0,1.0)),u.x),u.y); } float fbm(vec2 p){ float v=0.0,a=0.5; for(int i=0;i<5;i++){ v+=a*n(p); p=p*2.02+11.0; a*=0.5; } return v; } void main(){ vec2 p = (vUv - 0.5) * 6.0; p.x += uTime * 0.02; vec2 q = vec2(fbm(p + uTime*0.01), fbm(p + 5.2)); float f = fbm(p + 2.0*q); vec3 col = uS; col += uA * 0.22 * smoothstep(0.45, 0.9, f) ; col += uB * 0.16 * smoothstep(0.5, 0.95, fbm(p*1.3 - q + 3.0)); col *= 0.6 + 0.4 * f; gl_FragColor = vec4(col, 1.0); }`, depthWrite: false, }); const neb = new THREE.Mesh(new THREE.PlaneGeometry(220, 220), nebMat); neb.position.z = -60; scene.add(neb); // Star streaks const MAXS = 4000; const sPos = new Float32Array(MAXS * 6); const sCol = new Float32Array(MAXS * 6); const sData = new Float32Array(MAXS * 4); const starGeo = new THREE.BufferGeometry(); starGeo.setAttribute('position', new THREE.BufferAttribute(sPos, 3)); starGeo.setAttribute('color', new THREE.BufferAttribute(sCol, 3)); const starMat = new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false }); const stars = new THREE.LineSegments(starGeo, starMat); scene.add(stars); const tint = [new THREE.Color('#ffffff'), new THREE.Color(params.accent), new THREE.Color('#ffd9a0'), new THREE.Color(params.cat)]; for (let i = 0; i < MAXS; i++) { const z = -45 + Math.random() * 47; const spread = (6 - z) * 0.6 + 4; sData[i * 4] = (Math.random() * 2 - 1) * spread * 1.6; sData[i * 4 + 1] = (Math.random() * 2 - 1) * spread; sData[i * 4 + 2] = z; sData[i * 4 + 3] = spread * 1.6; const c = tint[Math.random() < 0.7 ? 0 : 1 + Math.floor(Math.random() * 3)]; const b = 0.3 + Math.random() * 0.9; for (let k = 0; k < 2; k++) { const f = k === 0 ? b : b * 0.05; sCol[i * 6 + k * 3] = c.r * f; sCol[i * 6 + k * 3 + 1] = c.g * f; sCol[i * 6 + k * 3 + 2] = c.b * f; } } // Cat const cat = new THREE.Group(); scene.add(cat); const catMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(params.cat).multiplyScalar(3) }); const accMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(params.accent).multiplyScalar(3) }); const fillMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(params.cat).multiplyScalar(0.12), transparent: true, opacity: 0.85, depthWrite: false }); const body = new THREE.Mesh(new THREE.BufferGeometry(), catMat); const tail = new THREE.Mesh(new THREE.BufferGeometry(), catMat); const fill = new THREE.Mesh(new THREE.BufferGeometry(), fillMat); fill.position.z = -0.05; cat.add(fill, body, tail); const eye = new THREE.Mesh(new THREE.SphereGeometry(0.055, 16, 12), accMat); eye.scale.set(1, 1.5, 1); eye.position.set(1.47, 0.45, 0.04); cat.add(eye); const nose = new THREE.Mesh(new THREE.SphereGeometry(0.03, 12, 8), accMat); nose.position.set(1.76, 0.38, 0.04); cat.add(nose); [[0.42, 0.1], [0.33, 0.0], [0.24, -0.1]].forEach(([y, s]) => { const c = new THREE.QuadraticBezierCurve3(new THREE.Vector3(1.68, 0.32, 0.05), new THREE.Vector3(1.95, y + 0.02, 0.05), new THREE.Vector3(2.2, y + s * 0.8, 0.05)); cat.add(new THREE.Mesh(new THREE.TubeGeometry(c, 16, 0.012, 6, false), accMat)); }); const base = [ [-1.15, 0.08], [-0.6, 0.28], [0.0, 0.3], [0.6, 0.28], [0.95, 0.36], [1.05, 0.58], [1.1, 0.88], [1.26, 0.64], [1.45, 0.66], [1.62, 0.92], [1.64, 0.58], [1.78, 0.4], [1.7, 0.24], [1.5, 0.14], [1.35, 0.04], [1.72, -0.02], [2.02, -0.03], [2.0, -0.13], [1.62, -0.15], [1.12, -0.12], [0.5, -0.16], [-0.3, -0.13], [-0.7, -0.12], [-1.3, -0.26], [-1.72, -0.3], [-1.72, -0.4], [-1.2, -0.37], [-0.85, -0.22], ]; const bodyPts = base.map(() => new THREE.Vector3()); const tailPts = Array.from({ length: 10 }, () => new THREE.Vector3()); function buildCat(t) { const w = params.wobble; for (let i = 0; i < base.length; i++) { let [x, y] = base[i]; if (x > 1.2 && y < 0.08) y += Math.sin(t * 2.6) * 0.18 * (x - 1.2) * w; if (x < -0.6 && y < -0.05) y += Math.sin(t * 2.6 + 1.2) * 0.14 * (-0.6 - x) * w; if (y > 0.7) x += Math.sin(t * 1.3 + x * 4.0) * 0.02 * w; y += Math.sin(t * 1.6 + x * 1.3) * 0.03 * w; bodyPts[i].set(x, y, 0); } for (let i = 0; i < tailPts.length; i++) { const x = -1.1 - i * 0.17; const y = 0.1 + i * 0.035 + Math.sin(t * 2.2 - i * 0.55) * 0.035 * i * w + Math.sin(t * 1.6 + x * 1.3) * 0.03 * w; tailPts[i].set(x, y, Math.sin(t * 1.4 - i * 0.4) * 0.02 * i); } const bc = new THREE.CatmullRomCurve3(bodyPts, true, 'centripetal'); const tc = new THREE.CatmullRomCurve3(tailPts, false, 'centripetal'); body.geometry.dispose(); tail.geometry.dispose(); fill.geometry.dispose(); body.geometry = new THREE.TubeGeometry(bc, 260, 0.034, 8, true); tail.geometry = new THREE.TubeGeometry(tc, 60, 0.034, 8, false); const shapePts = bc.getPoints(180).map((p) => new THREE.Vector2(p.x, p.y)); fill.geometry = new THREE.ShapeGeometry(new THREE.Shape(shapePts)); return tailPts[tailPts.length - 1]; } // Spark trail const MAXP = 600; const pPos = new Float32Array(MAXP * 3); const pCol = new Float32Array(MAXP * 3); const pVel = new Float32Array(MAXP * 3); const pLife = new Float32Array(MAXP); const pBase = new Float32Array(MAXP * 3); const pGeo = new THREE.BufferGeometry(); pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3)); pGeo.setAttribute('color', new THREE.BufferAttribute(pCol, 3)); const dot = document.createElement('canvas'); dot.width = dot.height = 64; const g = dot.getContext('2d'); const grd = g.createRadialGradient(32, 32, 0, 32, 32, 32); grd.addColorStop(0, 'rgba(255,255,255,1)'); grd.addColorStop(0.3, 'rgba(255,255,255,0.5)'); grd.addColorStop(1, 'rgba(255,255,255,0)'); g.fillStyle = grd; g.fillRect(0, 0, 64, 64); const pMat = new THREE.PointsMaterial({ size: 0.12, map: new THREE.CanvasTexture(dot), vertexColors: true, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false }); const sparks = new THREE.Points(pGeo, pMat); scene.add(sparks); for (let i = 0; i < MAXP; i++) pPos[i * 3 + 2] = -999; let pHead = 0; const tmp = new THREE.Vector3(); const cA = new THREE.Color(params.cat), cB = new THREE.Color(params.accent); function emit(local) { tmp.copy(local); cat.localToWorld(tmp); const i = pHead; pHead = (pHead + 1) % MAXP; pPos[i * 3] = tmp.x; pPos[i * 3 + 1] = tmp.y; pPos[i * 3 + 2] = tmp.z; pVel[i * 3] = -(1.5 + Math.random() * 2.0); pVel[i * 3 + 1] = (Math.random() - 0.5) * 0.6; pVel[i * 3 + 2] = (Math.random() - 0.5) * 0.6; pLife[i] = 1; const c = Math.random() < 0.5 ? cA : cB; pBase[i * 3] = c.r * 2; pBase[i * 3 + 1] = c.g * 2; pBase[i * 3 + 2] = c.b * 2; } const emitPts = [new THREE.Vector3(), new THREE.Vector3(-1.72, -0.35, 0), new THREE.Vector3(-0.3, -0.13, 0)]; // Post const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); const bloom = new UnrealBloomPass(new THREE.Vector2(size.width, size.height), params.glow, 0.6, 0.15); composer.addPass(bloom); composer.addPass(new OutputPass()); function fitCamera(w, h) { const aspect = w / Math.max(h, 1); camera.position.set(0, 0, Math.max(7, 7.2 / aspect + 1)); } fitCamera(size.width, size.height); const updateColors = () => { catMat.color.set(params.cat).multiplyScalar(3); fillMat.color.set(params.cat).multiplyScalar(0.12); accMat.color.set(params.accent).multiplyScalar(3); cA.set(params.cat); cB.set(params.accent); nebMat.uniforms.uA.value.set(params.cat); nebMat.uniforms.uB.value.set(params.accent); nebMat.uniforms.uS.value.set(params.space); }; gui.add(params, 'speed', 0.1, 3).name('Speed'); gui.add(params, 'glow', 0, 3).name('Glow'); gui.add(params, 'wobble', 0, 2).name('Wobble'); gui.add(params, 'stars', 200, MAXS, 1).name('Stars'); gui.addColor(params, 'cat').name('Cat Neon').onChange(updateColors); gui.addColor(params, 'accent').name('Accent').onChange(updateColors); gui.addColor(params, 'space').name('Nebula').onChange(updateColors); const target = new THREE.Vector2(); let emitAcc = 0; return { update({ time, delta, pointer }) { const dt = Math.min(delta, 0.05); const sp = params.speed; // cat motion const tipLocal = buildCat(time * (0.6 + sp * 0.4)); emitPts[0].copy(tipLocal); target.set(pointer.x * 0.8, pointer.y * 0.8); cat.position.x += (target.x - 0.15 + Math.sin(time * 0.37) * 0.3 - cat.position.x) * 0.03; cat.position.y += (target.y + Math.sin(time * 0.9) * 0.25 + Math.sin(time * 0.31) * 0.2 - cat.position.y) * 0.04; cat.rotation.z = Math.sin(time * 0.9 + 0.8) * 0.08 + (target.y - cat.position.y) * 0.15; cat.rotation.y = Math.sin(time * 0.5) * 0.25 + pointer.x * 0.2; cat.rotation.x = Math.sin(time * 0.7) * 0.08; cat.updateMatrixWorld(); // stars const n = params.stars; for (let i = 0; i < MAXS; i++) { const o = i * 6; if (i >= n) { sPos[o + 2] = sPos[o + 5] = 50; continue; } const z = sData[i * 4 + 2]; const near = (z + 46) / 48; const v = sp * (2 + near * near * 26); let x = sData[i * 4] - v * dt; const W = sData[i * 4 + 3]; if (x < -W) x += 2 * W; sData[i * 4] = x; const y = sData[i * 4 + 1]; const len = 0.05 + v * 0.06; sPos[o] = x; sPos[o + 1] = y; sPos[o + 2] = z; sPos[o + 3] = x + len; sPos[o + 4] = y; sPos[o + 5] = z; } starGeo.attributes.position.needsUpdate = true; // sparks emitAcc += dt * 90 * (0.5 + sp * 0.5); while (emitAcc > 1) { emitAcc -= 1; emit(emitPts[Math.floor(Math.random() * 3)]); } for (let i = 0; i < MAXP; i++) { if (pLife[i] <= 0) { pCol[i * 3] = pCol[i * 3 + 1] = pCol[i * 3 + 2] = 0; continue; } pLife[i] -= dt * 0.8; pPos[i * 3] += pVel[i * 3] * dt * (0.5 + sp); pPos[i * 3 + 1] += pVel[i * 3 + 1] * dt; pPos[i * 3 + 2] += pVel[i * 3 + 2] * dt; const l = Math.max(pLife[i], 0); const f = l * l * (0.6 + 0.4 * Math.sin(time * 20 + i)); pCol[i * 3] = pBase[i * 3] * f; pCol[i * 3 + 1] = pBase[i * 3 + 1] * f; pCol[i * 3 + 2] = pBase[i * 3 + 2] * f; } pGeo.attributes.position.needsUpdate = true; pGeo.attributes.color.needsUpdate = true; nebMat.uniforms.uTime.value = time * sp; bloom.strength = params.glow; camera.position.x += (pointer.x * 0.4 - camera.position.x) * 0.02; camera.position.y += (pointer.y * 0.3 - camera.position.y) * 0.02; camera.lookAt(0, 0, 0); }, render() { composer.render(); }, resize({ width, height }) { composer.setSize(width, height); fitCamera(width, height); }, dispose() { composer.dispose(); }, }; }