import * as THREE from 'three'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; export default function sketch(ctx) { const { scene, camera, renderer, gui, size, canvas, sfx, textures } = ctx; const SFX_SQUISH = 'sfx_1Ejx2nridO0l', SFX_GRAB = 'sfx_g5X4xTN9rWOP', SFX_WHOOSH = 'sfx_xZhsfSFCTzDT'; const params = { wobble: 0.6, gravity: 14, bounce: 0.35, tint: '#ffffff', backdrop: '#e9b3c8', volume: 0.7, drop: () => reset(), }; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.05; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFShadowMap; const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; scene.environmentIntensity = 0.7; scene.background = new THREE.Color(params.backdrop); // ---- lights scene.add(new THREE.HemisphereLight('#fff4f8', '#c9a0b4', 0.7)); const key = new THREE.DirectionalLight('#fff6ee', 2.6); key.position.set(-3, 5, 7); key.castShadow = true; key.shadow.mapSize.set(1024, 1024); Object.assign(key.shadow.camera, { left: -7, right: 7, top: 7, bottom: -7, near: 0.5, far: 25 }); key.shadow.radius = 8; key.shadow.bias = -0.0006; scene.add(key); const rim = new THREE.DirectionalLight('#ffd2ec', 1.4); rim.position.set(4, 3, -2); scene.add(rim); // ---- backdrop wall const ZMIN = -1.0, ZMAX = 1.3; const wallMat = new THREE.MeshStandardMaterial({ color: params.backdrop, roughness: 0.95 }); const wall = new THREE.Mesh(new THREE.PlaneGeometry(60, 60), wallMat); wall.position.z = ZMIN - 0.02; wall.receiveShadow = true; scene.add(wall); // ---- bean geometry (soft body particles = vertices) const geo = new THREE.SphereGeometry(1, 40, 26); geo.rotateZ(Math.PI / 2); const pos = geo.attributes.position; const N = pos.count; const q = new Float32Array(N * 3); let mx = 0, my = 0, mz = 0; for (let i = 0; i < N; i++) { const x = pos.getX(i), y = pos.getY(i), z = pos.getZ(i); let px = x * 1.5, py = y * 0.82, pz = z * 0.78; py += 0.32 * x * x; py -= Math.max(0, y) * Math.exp(-x * x * 4) * 0.14; q[i * 3] = px; q[i * 3 + 1] = py; q[i * 3 + 2] = pz; mx += px; my += py; mz += pz; } mx /= N; my /= N; mz /= N; for (let i = 0; i < N; i++) { q[i * 3] -= mx; q[i * 3 + 1] -= my; q[i * 3 + 2] -= mz; } // seam duplicates for smooth normals const groups = new Map(); for (let i = 0; i < N; i++) { const k = `${q[i*3].toFixed(4)},${q[i*3+1].toFixed(4)},${q[i*3+2].toFixed(4)}`; if (!groups.has(k)) groups.set(k, []); groups.get(k).push(i); } const dupGroups = [...groups.values()].filter((g) => g.length > 1); const tex = textures.get('tex_0gzj16PtcXQu', { repeat: [3, 2] }); tex.anisotropy = 8; const beanMat = new THREE.MeshPhysicalMaterial({ map: tex, color: params.tint, roughness: 0.3, clearcoat: 1, clearcoatRoughness: 0.1, sheen: 0.5, sheenColor: new THREE.Color('#ffc6dc'), sheenRoughness: 0.45, emissive: new THREE.Color('#ff9fbf'), emissiveIntensity: 0.05, }); const bean = new THREE.Mesh(geo, beanMat); bean.castShadow = true; bean.frustumCulled = false; scene.add(bean); // ---- state const X = new Float32Array(N * 3), V = new Float32Array(N * 3), P = new Float32Array(N * 3); const RV = new Float32Array(N * 3), RF = new Uint8Array(N * 3); const qR = new THREE.Quaternion(), tq = new THREE.Quaternion(), m4 = new THREE.Matrix4(), axis = new THREE.Vector3(); const lo = [0, 0, ZMIN], hi = [0, 0, ZMAX]; let halfW = 3, halfH = 2.2; let soundCd = 0, impactMax = 0, impactX = 0; function layout(aspect) { const t = Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)); const z0 = 0.7; const d = Math.max(2.25 / t, 2.4 / (t * Math.max(aspect, 0.1))); camera.position.set(0, 0, z0 + d); camera.lookAt(0, 0, 0); halfH = d * t; halfW = halfH * aspect; lo[0] = -halfW; hi[0] = halfW; lo[1] = -halfH; hi[1] = halfH; } layout(size.width / size.height); function reset() { qR.setFromEuler(new THREE.Euler(0.15, 0.2, 0.5)); m4.makeRotationFromQuaternion(qR); const e = m4.elements; const cy = halfH * 0.35, cx = -halfW * 0.25; for (let i = 0; i < N; i++) { const a = q[i*3], b = q[i*3+1], c = q[i*3+2]; const rx = e[0]*a + e[4]*b + e[8]*c, ry = e[1]*a + e[5]*b + e[9]*c, rz = e[2]*a + e[6]*b + e[10]*c; X[i*3] = cx + rx; X[i*3+1] = cy + ry; X[i*3+2] = rz; // spin about z: w x r V[i*3] = 2.5 + 2.2 * ry; V[i*3+1] = -2.2 * rx; V[i*3+2] = 0; } } reset(); // ---- interaction const raycaster = new THREE.Raycaster(); const ndc = new THREE.Vector2(); const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0); const target = new THREE.Vector3(), tmp = new THREE.Vector3(); let grabId = null, grabIdx = [], grabW = [], grabOff = [], grabbing = false; function setNdc(e) { const r = canvas.getBoundingClientRect(); ndc.set(((e.clientX - r.left) / r.width) * 2 - 1, -((e.clientY - r.top) / r.height) * 2 + 1); } function cmVel() { let vx = 0, vy = 0; for (let i = 0; i < N; i++) { vx += V[i*3]; vy += V[i*3+1]; } return [vx / N, vy / N]; } function onDown(e) { if (grabId !== null) return; setNdc(e); raycaster.setFromCamera(ndc, camera); const hit = raycaster.intersectObject(bean, false)[0]; if (hit) { grabId = e.pointerId; grabbing = true; try { canvas.setPointerCapture(e.pointerId); } catch (_) {} plane.constant = -hit.point.z; target.copy(hit.point); grabIdx = []; grabW = []; grabOff = []; const R = 0.85; for (let i = 0; i < N; i++) { const dx = X[i*3] - hit.point.x, dy = X[i*3+1] - hit.point.y, dz = X[i*3+2] - hit.point.z; const d = Math.sqrt(dx*dx + dy*dy + dz*dz); if (d < R) { const w = 1 - d / R; grabIdx.push(i); grabW.push(w * w); grabOff.push(dx, dy, dz); } } if (sfx) sfx.play(SFX_GRAB, { volume: 0.6, rate: 0.9 + Math.random() * 0.25 }); } else { // flick: tap empty space pulls the bean toward the pointer raycaster.setFromCamera(ndc, camera); plane.constant = 0; if (raycaster.ray.intersectPlane(plane, tmp)) { let cx = 0, cy = 0; for (let i = 0; i < N; i++) { cx += X[i*3]; cy += X[i*3+1]; } cx /= N; cy /= N; let dx = tmp.x - cx, dy = tmp.y - cy; const l = Math.hypot(dx, dy) || 1; dx /= l; dy /= l; for (let i = 0; i < N; i++) { V[i*3] += dx * 7; V[i*3+1] += dy * 7 + 3; } if (sfx) sfx.play(SFX_WHOOSH, { volume: 0.4, rate: 1 + Math.random() * 0.2 }); } } } function onMove(e) { if (e.pointerId !== grabId) return; setNdc(e); } function onUp(e) { if (e.pointerId !== grabId) return; grabId = null; grabbing = false; grabIdx = []; const [vx, vy] = cmVel(); if (Math.hypot(vx, vy) > 5 && sfx) sfx.play(SFX_WHOOSH, { volume: Math.min(0.8, Math.hypot(vx, vy) / 15), rate: 0.9 + Math.random() * 0.3 }); } canvas.addEventListener('pointerdown', onDown); canvas.addEventListener('pointermove', onMove); canvas.addEventListener('pointerup', onUp); canvas.addEventListener('pointercancel', onUp); canvas.style.touchAction = 'none'; // ---- controls gui.add(params, 'wobble', 0, 1, 0.01).name('Wobble'); gui.add(params, 'gravity', 0, 30, 0.1).name('Gravity'); gui.add(params, 'bounce', 0, 0.9, 0.01).name('Bounciness'); gui.addColor(params, 'tint').name('Bean tint').onChange((v) => beanMat.color.set(v)); gui.addColor(params, 'backdrop').name('Backdrop').onChange((v) => { scene.background.set(v); wallMat.color.set(v); }); gui.add(params, 'volume', 0, 1, 0.01).name('Sound volume').onChange((v) => { if (sfx) sfx.volume = v; }); gui.add(params, 'drop').name('Drop again'); if (sfx) sfx.volume = params.volume; // ---- physics substep function substep(h) { const g = params.gravity, e = params.bounce; const stiff = 0.6 + (0.05 - 0.6) * params.wobble; const damp = 1 - 0.12 * h; for (let i = 0; i < N * 3; i += 3) { V[i+1] -= g * h; V[i] *= damp; V[i+1] *= damp; V[i+2] *= damp; P[i] = X[i] + V[i] * h; P[i+1] = X[i+1] + V[i+1] * h; P[i+2] = X[i+2] + V[i+2] * h; } // grab if (grabbing) { for (let k = 0; k < grabIdx.length; k++) { const i = grabIdx[k] * 3, w = grabW[k] * 0.45; P[i] += (target.x + grabOff[k*3] - P[i]) * w; P[i+1] += (target.y + grabOff[k*3+1] - P[i+1]) * w; P[i+2] += (target.z + grabOff[k*3+2] - P[i+2]) * w; } } // shape matching let cx = 0, cy = 0, cz = 0; for (let i = 0; i < N * 3; i += 3) { cx += P[i]; cy += P[i+1]; cz += P[i+2]; } cx /= N; cy /= N; cz /= N; let a00=0,a01=0,a02=0,a10=0,a11=0,a12=0,a20=0,a21=0,a22=0; for (let i = 0; i < N * 3; i += 3) { const px = P[i]-cx, py = P[i+1]-cy, pz = P[i+2]-cz; const qx = q[i], qy = q[i+1], qz = q[i+2]; a00 += px*qx; a01 += px*qy; a02 += px*qz; a10 += py*qx; a11 += py*qy; a12 += py*qz; a20 += pz*qx; a21 += pz*qy; a22 += pz*qz; } for (let it = 0; it < 3; it++) { m4.makeRotationFromQuaternion(qR); const r = m4.elements; // R columns: (r0,r1,r2), (r4,r5,r6), (r8,r9,r10); A columns: (a00,a10,a20) ... const ox = (r[1]*a20 - r[2]*a10) + (r[5]*a21 - r[6]*a11) + (r[9]*a22 - r[10]*a12); const oy = (r[2]*a00 - r[0]*a20) + (r[6]*a01 - r[4]*a21) + (r[10]*a02 - r[8]*a22); const oz = (r[0]*a10 - r[1]*a00) + (r[4]*a11 - r[5]*a01) + (r[8]*a12 - r[9]*a02); const den = Math.abs(r[0]*a00 + r[1]*a10 + r[2]*a20 + r[4]*a01 + r[5]*a11 + r[6]*a21 + r[8]*a02 + r[9]*a12 + r[10]*a22) + 1e-9; const wx = ox / den, wy = oy / den, wz = oz / den; const w = Math.sqrt(wx*wx + wy*wy + wz*wz); if (!(w > 1e-9)) break; axis.set(wx / w, wy / w, wz / w); tq.setFromAxisAngle(axis, Math.min(w, 1)); qR.premultiply(tq).normalize(); } m4.makeRotationFromQuaternion(qR); const r = m4.elements; for (let i = 0; i < N * 3; i += 3) { const a = q[i], b = q[i+1], c = q[i+2]; const gx = cx + r[0]*a + r[4]*b + r[8]*c; const gy = cy + r[1]*a + r[5]*b + r[9]*c; const gz = cz + r[2]*a + r[6]*b + r[10]*c; P[i] += (gx - P[i]) * stiff; P[i+1] += (gy - P[i+1]) * stiff; P[i+2] += (gz - P[i+2]) * stiff; } // collisions with the frame const fr = 0.18; for (let i = 0; i < N * 3; i += 3) { for (let ax = 0; ax < 3; ax++) { const idx = i + ax; let side = 0; if (P[idx] < lo[ax]) side = -1; else if (P[idx] > hi[ax]) side = 1; if (!side) { RF[idx] = 0; continue; } const vpre = (P[idx] - X[idx]) / h; P[idx] = side < 0 ? lo[ax] : hi[ax]; for (let o = 1; o < 3; o++) { const t = i + (ax + o) % 3; P[t] -= (P[t] - X[t]) * fr; } const into = -side * vpre; // negative = moving into wall if (into < -1.5) { RF[idx] = 1; RV[idx] = side < 0 ? -e * vpre : -e * vpre; if (ax < 2 && -into > impactMax) { impactMax = -into; impactX = P[i]; } } else RF[idx] = 0; } } for (let i = 0; i < N * 3; i++) { let v = (P[i] - X[i]) / h; if (RF[i]) { v = RV[i]; RF[i] = 0; } V[i] = v > 40 ? 40 : v < -40 ? -40 : v; X[i] = P[i]; } } const nrm = geo.attributes.normal; return { update({ delta }) { const dt = Math.min(Math.max(delta, 0), 1 / 30); if (grabbing) { raycaster.setFromCamera(ndc, camera); if (raycaster.ray.intersectPlane(plane, tmp)) { tmp.x = THREE.MathUtils.clamp(tmp.x, -halfW + 0.3, halfW - 0.3); tmp.y = THREE.MathUtils.clamp(tmp.y, -halfH + 0.3, halfH - 0.3); target.copy(tmp); } } if (dt > 0) { const steps = 3; impactMax = 0; for (let s = 0; s < steps; s++) substep(dt / steps); soundCd -= dt; if (impactMax > 2.2 && soundCd <= 0 && sfx) { soundCd = 0.12; sfx.play(SFX_SQUISH, { volume: Math.min(1, 0.15 + impactMax / 12), rate: 0.85 + Math.random() * 0.3, pan: THREE.MathUtils.clamp(impactX / halfW, -1, 1) * 0.7, }); } } pos.array.set(X); pos.needsUpdate = true; geo.computeVertexNormals(); const na = nrm.array; for (const g of dupGroups) { let sx = 0, sy = 0, sz = 0; for (const i of g) { sx += na[i*3]; sy += na[i*3+1]; sz += na[i*3+2]; } const l = Math.hypot(sx, sy, sz) || 1; for (const i of g) { na[i*3] = sx / l; na[i*3+1] = sy / l; na[i*3+2] = sz / l; } } nrm.needsUpdate = true; geo.computeBoundingSphere(); }, resize({ width, height }) { layout(width / height); }, dispose() { canvas.removeEventListener('pointerdown', onDown); canvas.removeEventListener('pointermove', onMove); canvas.removeEventListener('pointerup', onUp); canvas.removeEventListener('pointercancel', onUp); pmrem.dispose(); }, }; }