import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.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, canvas } = ctx; const sfx = ctx.sfx; const SND = { beat: 'sfx_mk7H5GN0C4Ab', fwd: 'sfx_JTmZNU1Qj2wo', back: 'sfx_oFiXj9wx2U8i', spin: 'sfx_PN66JwOBYVLC', needle: 'sfx_xpV7Q9F92LSv', click: 'sfx_0hh3IJJ7ThDn', }; const TAU = Math.PI * 2; const touchScreen = matchMedia('(pointer: coarse)').matches; let playing = true; const params = { pitch: 0, rpm: '33', torque: 7, sound: 0.8, plinth: '#1c1d20', label: '#e0452a', glow: 0.7, startStop: () => toggle(), }; // ---------- renderer & scene ---------- renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.05; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; scene.background = new THREE.Color('#0a090b'); scene.fog = new THREE.Fog('#0a090b', 10, 22); const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; scene.environmentIntensity = 0.55; const key = new THREE.DirectionalLight('#ffe4c4', 2.6); key.position.set(3.5, 7, 3); key.castShadow = true; key.shadow.mapSize.set(2048, 2048); Object.assign(key.shadow.camera, { left: -5, right: 5, top: 5, bottom: -5, near: 1, far: 20 }); key.shadow.bias = -0.0004; key.shadow.radius = 4; const rim = new THREE.DirectionalLight('#6f86ff', 1.3); rim.position.set(-5, 3, -5); const hemi = new THREE.HemisphereLight('#c8b8ff', '#120d0a', 0.35); const under = new THREE.PointLight('#ff7a3a', 0, 6, 2); under.position.set(0, 0.2, 2.6); scene.add(key, rim, hemi, under); const floor = new THREE.Mesh(new THREE.PlaneGeometry(60, 60), new THREE.MeshStandardMaterial({ color: '#141215', roughness: 0.82, metalness: 0.1 })); floor.rotation.x = -Math.PI / 2; floor.position.y = -0.12; floor.receiveShadow = true; scene.add(floor); // ---------- materials ---------- const plinthMat = new THREE.MeshPhysicalMaterial({ color: params.plinth, metalness: 0.55, roughness: 0.42, clearcoat: 0.35, clearcoatRoughness: 0.4 }); const alu = new THREE.MeshStandardMaterial({ color: '#c8cbd0', metalness: 1, roughness: 0.27 }); const chrome = new THREE.MeshStandardMaterial({ color: '#ececee', metalness: 1, roughness: 0.1 }); const rubber = new THREE.MeshStandardMaterial({ color: '#0d0d0e', roughness: 0.9 }); const darkBtn = new THREE.MeshStandardMaterial({ color: '#2a2b2f', metalness: 0.6, roughness: 0.35 }); const shadowAll = (o) => o.traverse((m) => { if (m.isMesh) { m.castShadow = true; m.receiveShadow = true; } }); // ---------- plinth ---------- const plinth = new THREE.Mesh(new RoundedBoxGeometry(4.5, 0.4, 3.5, 4, 0.06), plinthMat); plinth.position.y = 0.2; scene.add(plinth); for (const [x, z] of [[-1.9, -1.4], [1.9, -1.4], [-1.9, 1.4], [1.9, 1.4]]) { const f = new THREE.Mesh(new THREE.CylinderGeometry(0.26, 0.3, 0.12, 32), rubber); f.position.set(x, -0.06, z); scene.add(f); } function textPlane(text, w, h, font, color = '#d9d6cf', align = 'center') { const c = document.createElement('canvas'); c.width = 512; c.height = Math.round(512 * h / w); const g = c.getContext('2d'); g.fillStyle = color; g.font = font; g.textAlign = align; g.textBaseline = 'middle'; g.fillText(text, align === 'left' ? 4 : c.width / 2, c.height / 2); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; t.anisotropy = 8; const m = new THREE.Mesh(new THREE.PlaneGeometry(w, h), new THREE.MeshBasicMaterial({ map: t, transparent: true, depthWrite: false })); m.rotation.x = -Math.PI / 2; return m; } const brand = textPlane('PERLIN', 1.1, 0.2, 'bold 70px sans-serif', '#e6e3dc', 'left'); brand.position.set(-1.62, 0.402, -1.55); const sub = textPlane('DIRECT DRIVE TURNTABLE SYSTEM SL-1200', 2.2, 0.1, '30px sans-serif', '#9c9a95', 'left'); sub.position.set(-1.07, 0.402, -1.42); scene.add(brand, sub); // ---------- platter & record ---------- const PX = -0.45, PZ = 0, REC_Y = 0.577; const spin = new THREE.Group(); spin.position.set(PX, 0, PZ); scene.add(spin); const platter = new THREE.Mesh(new THREE.CylinderGeometry(1.58, 1.6, 0.14, 128), alu); platter.position.y = 0.49; spin.add(platter); const dc = document.createElement('canvas'); dc.width = 4096; dc.height = 128; { const g = dc.getContext('2d'); g.fillStyle = '#3c3e43'; g.fillRect(0, 0, 4096, 128); const rows = [[20, 180], [48, 186], [76, 177], [104, 183]]; g.fillStyle = '#eceef2'; for (const [y, n] of rows) for (let i = 0; i < n; i++) { g.beginPath(); g.arc((i + 0.5) * 4096 / n, y, 6, 0, TAU); g.fill(); } } const dotsTex = new THREE.CanvasTexture(dc); dotsTex.colorSpace = THREE.SRGBColorSpace; dotsTex.anisotropy = 8; const dots = new THREE.Mesh(new THREE.CylinderGeometry(1.603, 1.603, 0.1, 256, 1, true), new THREE.MeshStandardMaterial({ map: dotsTex, metalness: 0.85, roughness: 0.3 })); dots.position.y = 0.49; spin.add(dots); const slip = new THREE.Mesh(new THREE.CylinderGeometry(1.52, 1.52, 0.012, 96), new THREE.MeshStandardMaterial({ color: '#121213', roughness: 1 })); slip.position.y = 0.566; spin.add(slip); const rc = document.createElement('canvas'); rc.width = rc.height = 1024; const recTex = new THREE.CanvasTexture(rc); recTex.colorSpace = THREE.SRGBColorSpace; recTex.anisotropy = 8; function drawRecord() { const g = rc.getContext('2d'), c = 512; g.fillStyle = '#040404'; g.fillRect(0, 0, 1024, 1024); let s = 7; const rnd = () => (s = (s * 16807) % 2147483647) / 2147483647; for (let r = 509; r > 172; r -= 1.25) { const v = 13 + rnd() * 11 + Math.sin(r * 0.05) * 4; g.strokeStyle = `rgb(${v | 0},${v | 0},${(v + 2) | 0})`; g.lineWidth = 1.3; g.beginPath(); g.arc(c, c, r, 0, TAU); g.stroke(); } for (const r of [496, 448, 392, 329, 268, 214, 180]) { g.strokeStyle = '#020202'; g.lineWidth = r === 496 ? 10 : 4; g.beginPath(); g.arc(c, c, r, 0, TAU); g.stroke(); } const grad = g.createRadialGradient(c, c, 10, c, c, 172); grad.addColorStop(0, params.label); grad.addColorStop(1, params.label); g.fillStyle = grad; g.beginPath(); g.arc(c, c, 172, 0, TAU); g.fill(); g.fillStyle = 'rgba(0,0,0,0.18)'; g.beginPath(); g.arc(c, c, 172, 0, TAU); g.arc(c, c, 158, 0, TAU, true); g.fill(); g.fillStyle = '#f7efe1'; g.textAlign = 'center'; g.textBaseline = 'middle'; g.font = 'bold 50px sans-serif'; g.fillText('PERLIN', c, c - 78); g.font = '21px monospace'; g.fillText('BOOM BAP SESSIONS', c, c - 40); g.font = '18px monospace'; g.fillText('SIDE A · 33⅓ RPM', c, c + 62); g.fillText('VYBE.ART · ℗ 1994', c, c + 92); g.fillStyle = '#fbfbf6'; g.fillRect(c - 7, c - 168, 14, 44); g.fillStyle = '#000'; g.fillRect(c - 2, c - 160, 4, 30); g.fillStyle = '#151515'; g.beginPath(); g.arc(c, c, 9, 0, TAU); g.fill(); recTex.needsUpdate = true; } drawRecord(); const disc = new THREE.Mesh(new THREE.CircleGeometry(1.5, 180), new THREE.MeshPhysicalMaterial({ map: recTex, roughness: 0.4, metalness: 0, clearcoat: 0.85, clearcoatRoughness: 0.22 })); disc.rotation.x = -Math.PI / 2; disc.position.y = REC_Y; const discEdge = new THREE.Mesh(new THREE.CylinderGeometry(1.5, 1.5, 0.012, 180, 1, true), new THREE.MeshStandardMaterial({ color: '#070707', roughness: 0.35 })); discEdge.position.y = REC_Y - 0.006; const spindle = new THREE.Mesh(new THREE.CylinderGeometry(0.022, 0.022, 0.07, 16), chrome); spindle.position.y = REC_Y + 0.03; spin.add(disc, discEdge, spindle); shadowAll(spin); disc.castShadow = false; // ---------- strobe illuminator ---------- const strobe = new THREE.Group(); strobe.position.set(-2.03, 0.4, 1.0); const sBody = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.11, 0.16, 32), alu); sBody.position.y = 0.08; const lensMat = new THREE.MeshStandardMaterial({ color: '#330000', emissive: '#ff2414', emissiveIntensity: 3 }); const lens = new THREE.Mesh(new THREE.SphereGeometry(0.06, 24, 12), lensMat); lens.position.set(0.05, 0.12, -0.03); const sLight = new THREE.PointLight('#ff2a18', 5, 3.5, 2); sLight.position.set(0.12, 0.14, -0.08); strobe.add(sBody, lens, sLight); scene.add(strobe); // ---------- buttons ---------- const startBtn = new THREE.Mesh(new RoundedBoxGeometry(0.52, 0.07, 0.32, 2, 0.02), darkBtn); startBtn.position.set(-1.83, 0.42, 1.47); const startLbl = textPlane('START • STOP', 0.5, 0.08, 'bold 40px sans-serif', '#cfcac0'); startLbl.position.set(0, 0.036, 0); startLbl.rotation.x = -Math.PI / 2; startBtn.add(startLbl); const btn33 = new THREE.Mesh(new RoundedBoxGeometry(0.24, 0.05, 0.15, 2, 0.015), darkBtn); btn33.position.set(-1.2, 0.41, 1.6); const btn45 = btn33.clone(); btn45.position.x = -0.88; const l33 = textPlane('33', 0.16, 0.08, 'bold 150px sans-serif'); l33.position.set(-1.2, 0.402, 1.43); const l45 = textPlane('45', 0.16, 0.08, 'bold 150px sans-serif'); l45.position.set(-0.88, 0.402, 1.43); const ledMat33 = new THREE.MeshStandardMaterial({ color: '#221000', emissive: '#ff8a2a', emissiveIntensity: 0 }); const ledMat45 = ledMat33.clone(); const led33 = new THREE.Mesh(new THREE.SphereGeometry(0.018, 12, 8), ledMat33); led33.position.set(-1.07, 0.41, 1.6); const led45 = new THREE.Mesh(new THREE.SphereGeometry(0.018, 12, 8), ledMat45); led45.position.set(-0.75, 0.41, 1.6); scene.add(startBtn, btn33, btn45, l33, l45, led33, led45); // ---------- pitch fader ---------- const FX = 2.03, FZ = 0.8, FR = 0.55; const slot = new THREE.Mesh(new THREE.BoxGeometry(0.05, 0.01, 1.25), rubber); slot.position.set(FX, 0.402, FZ); for (let i = -8; i <= 8; i += 2) { const tick = new THREE.Mesh(new THREE.BoxGeometry(i === 0 ? 0.12 : 0.07, 0.004, 0.012), new THREE.MeshBasicMaterial({ color: i === 0 ? '#e9e4da' : '#8b8882' })); tick.position.set(FX - 0.15, 0.402, FZ + (i / 8) * FR); scene.add(tick); } const knob = new THREE.Mesh(new RoundedBoxGeometry(0.2, 0.1, 0.13, 2, 0.02), alu); knob.position.set(FX, 0.45, FZ); const quartzMat = new THREE.MeshStandardMaterial({ color: '#002205', emissive: '#3dff6a', emissiveIntensity: 2 }); const quartz = new THREE.Mesh(new THREE.SphereGeometry(0.02, 12, 8), quartzMat); quartz.position.set(FX, 0.41, 0.08); const pLbl = textPlane('PITCH ADJ', 0.4, 0.07, 'bold 46px sans-serif', '#a9a69f'); pLbl.position.set(FX - 0.02, 0.402, 1.55); scene.add(slot, knob, quartz, pLbl); shadowAll(startBtn); shadowAll(btn33); shadowAll(btn45); shadowAll(knob); // ---------- tonearm ---------- const AX = 1.65, AZ = -1.0, L = 2.2; const armBase = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.32, 0.06, 48), alu); armBase.position.set(AX, 0.43, AZ); const tower = new THREE.Mesh(new THREE.CylinderGeometry(0.11, 0.14, 0.24, 32), alu); tower.position.set(AX, 0.56, AZ); const restPost = new THREE.Mesh(new THREE.CylinderGeometry(0.028, 0.034, 0.24, 16), chrome); const REST_YAW = 0.05; restPost.position.set(AX + Math.sin(REST_YAW) * 1.9, 0.52, AZ + Math.cos(REST_YAW) * 1.9); scene.add(armBase, tower, restPost); const armYawG = new THREE.Group(); armYawG.position.set(AX, 0.68, AZ); const armPitchG = new THREE.Group(); armYawG.add(armPitchG); const gimbal = new THREE.Mesh(new RoundedBoxGeometry(0.2, 0.13, 0.17, 2, 0.03), darkBtn); const tube = new THREE.Mesh(new THREE.CylinderGeometry(0.022, 0.022, 2.1, 16), chrome); tube.rotation.x = Math.PI / 2; tube.position.z = 1.05; const stub = new THREE.Mesh(new THREE.CylinderGeometry(0.03, 0.03, 0.4, 16), chrome); stub.rotation.x = Math.PI / 2; stub.position.z = -0.25; const cw = new THREE.Mesh(new THREE.CylinderGeometry(0.11, 0.11, 0.2, 40), alu); cw.rotation.x = Math.PI / 2; cw.position.z = -0.42; const head = new THREE.Mesh(new RoundedBoxGeometry(0.15, 0.03, 0.32, 2, 0.01), darkBtn); head.position.set(0, -0.02, 2.17); const lift = new THREE.Mesh(new THREE.BoxGeometry(0.12, 0.012, 0.03), chrome); lift.position.set(0.11, -0.01, 2.26); const cart = new THREE.Mesh(new THREE.BoxGeometry(0.09, 0.06, 0.15), new THREE.MeshStandardMaterial({ color: '#f0602a', roughness: 0.4, metalness: 0.2 })); cart.position.set(0, -0.06, 2.2); const stylus = new THREE.Mesh(new THREE.ConeGeometry(0.008, 0.014, 8), chrome); stylus.rotation.x = Math.PI; stylus.position.set(0, -0.096, 2.2); armPitchG.add(gimbal, tube, stub, cw, head, lift, cart, stylus); scene.add(armYawG); shadowAll(armYawG); shadowAll(armBase); shadowAll(tower); shadowAll(restPost); plinth.castShadow = true; plinth.receiveShadow = true; // ---------- dust motes ---------- const DUST = 500; const dPos = new Float32Array(DUST * 3), dSeed = new Float32Array(DUST); for (let i = 0; i < DUST; i++) { dPos[i * 3] = (Math.random() - 0.5) * 9; dPos[i * 3 + 1] = Math.random() * 4; dPos[i * 3 + 2] = (Math.random() - 0.5) * 7; dSeed[i] = Math.random(); } const dGeo = new THREE.BufferGeometry(); dGeo.setAttribute('position', new THREE.BufferAttribute(dPos, 3)); const dust = new THREE.Points(dGeo, new THREE.PointsMaterial({ color: '#ffd9b0', size: 0.018, transparent: true, opacity: 0.45, blending: THREE.AdditiveBlending, depthWrite: false })); scene.add(dust); // ---------- camera & orbit ---------- const target = new THREE.Vector3(0, 0.3, 0.15); const camDir = new THREE.Vector3(0.15, 4.0, 5.0).normalize(); function fitCamera(aspect) { const d = 7.0 / Math.pow(Math.min(1, aspect), 0.85); camera.position.copy(target).addScaledVector(camDir, d); camera.lookAt(target); } fitCamera(size.width / Math.max(1, size.height)); // pointer listeners added before OrbitControls so they can veto orbiting const ray = new THREE.Raycaster(); const ndc = new THREE.Vector2(); const recPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -REC_Y); const fadPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.45); const hitP = new THREE.Vector3(); const recordParts = [disc, slip, platter, dots, discEdge, spindle]; const clickables = [startBtn, btn33, btn45, knob, ...recordParts]; let dragId = null, faderId = null, uiId = null; let lastAng = 0, hasLast = false, dragAccum = 0; function setRay(e) { const r = canvas.getBoundingClientRect(); ndc.set(((e.clientX - r.left) / r.width) * 2 - 1, -((e.clientY - r.top) / r.height) * 2 + 1); ray.setFromCamera(ndc, camera); } function recordAngle(e) { setRay(e); if (!ray.ray.intersectPlane(recPlane, hitP)) return null; const dx = hitP.x - PX, dz = hitP.z - PZ; if (dx * dx + dz * dz < 0.03) return null; return Math.atan2(dz, dx); } const wrap = (a) => { while (a > Math.PI) a -= TAU; while (a < -Math.PI) a += TAU; return a; }; let orbit; function onDown(e) { setRay(e); const hits = ray.intersectObjects(clickables, false); if (!hits.length) return; const o = hits[0].object; if (orbit) orbit.enabled = false; try { canvas.setPointerCapture(e.pointerId); } catch (err) { /* ignore */ } if (o === startBtn) { toggle(); uiId = e.pointerId; return; } if (o === btn33) { setRpm('33'); uiId = e.pointerId; return; } if (o === btn45) { setRpm('45'); uiId = e.pointerId; return; } if (o === knob) { faderId = e.pointerId; return; } dragId = e.pointerId; const a = recordAngle(e); hasLast = a !== null; if (hasLast) lastAng = a; dragAccum = 0; hideHint(); } function onMove(e) { if (e.pointerId === dragId) { const a = recordAngle(e); if (a === null) { hasLast = false; return; } if (hasLast) dragAccum += wrap(a - lastAng); lastAng = a; hasLast = true; } else if (e.pointerId === faderId) { setRay(e); if (ray.ray.intersectPlane(fadPlane, hitP)) { const z = THREE.MathUtils.clamp(hitP.z, FZ - FR, FZ + FR); let p = ((z - FZ) / FR) * 8; if (Math.abs(p) < 0.35) p = 0; params.pitch = Math.round(p * 10) / 10; pitchCtrl.updateDisplay(); } } } function onUp(e) { if (e.pointerId === dragId) { dragId = null; if (angVel < -6) playOne(SND.spin, 0.9, THREE.MathUtils.clamp(0.85 + -angVel / 40, 0.85, 1.25)); } if (e.pointerId === faderId) faderId = null; if (e.pointerId === uiId) uiId = null; if (dragId === null && faderId === null && uiId === null && orbit) orbit.enabled = true; } canvas.addEventListener('pointerdown', onDown); canvas.addEventListener('pointermove', onMove); canvas.addEventListener('pointerup', onUp); canvas.addEventListener('pointercancel', onUp); const onKey = (e) => { if (e.code === 'Space') { e.preventDefault(); toggle(); } }; window.addEventListener('keydown', onKey); orbit = new OrbitControls(camera, renderer.domElement); orbit.enableDamping = true; orbit.enablePan = false; orbit.target.copy(target); orbit.minDistance = 3.5; orbit.maxDistance = 13; orbit.maxPolarAngle = 1.38; orbit.update(); // ---------- hint ---------- const hint = document.createElement('div'); hint.textContent = touchScreen ? 'drag the record to scratch · tap START•STOP · drag around to orbit' : 'drag the record to scratch · click START•STOP or Space · drag around to orbit'; Object.assign(hint.style, { position: 'absolute', left: '50%', bottom: '18px', transform: 'translateX(-50%)', font: '12px monospace', letterSpacing: '0.08em', color: 'rgba(235,225,210,0.55)', pointerEvents: 'none', transition: 'opacity 1.5s', textAlign: 'center', width: '90%', }); (canvas.parentElement || document.body).appendChild(hint); let hintTimer = setTimeout(() => hideHint(), 12000); function hideHint() { hint.style.opacity = '0'; } // ---------- audio ---------- if (sfx) sfx.volume = params.sound; const beatVoice = sfx ? sfx.loop(SND.beat, { volume: 0 }) : null; let lastRate = 1, scratchVoice = null, lastScratch = 0, scratchDir = 0; function playOne(id, vol = 1, rate = 1) { if (!sfx) return null; return sfx.play(id, { volume: vol, rate, pan: 0 }); } // ---------- state ---------- let angle = 0, angVel = 0, armYaw = -0.5, armLift = 0, armOn = 1, prog = 0; let needleDown = true, btnPress = 0, clock = 0; const omega33 = TAU * (100 / 3) / 60; const nominal = () => omega33 * (params.rpm === '45' ? 1.35 : 1); angVel = nominal(); function toggle() { playing = !playing; btnPress = 1; playOne(SND.click, 0.8, 0.95 + Math.random() * 0.1); hideHint(); } function setRpm(v) { if (params.rpm !== v) { params.rpm = v; rpmCtrl.updateDisplay(); } playOne(SND.click, 0.5, 1.15 + Math.random() * 0.1); } // ---------- 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.5, 0.82); composer.addPass(bloom); composer.addPass(new OutputPass()); // ---------- controls ---------- const pitchCtrl = gui.add(params, 'pitch', -8, 8, 0.1).name('Pitch %'); const rpmCtrl = gui.add(params, 'rpm', ['33', '45']).name('Speed RPM'); gui.add(params, 'torque', 1.5, 16, 0.1).name('Motor Torque'); gui.add(params, 'sound', 0, 1, 0.01).name('Sound').onChange((v) => { if (sfx) sfx.volume = v; }); gui.addColor(params, 'plinth').name('Plinth').onChange((v) => plinthMat.color.set(v)); gui.addColor(params, 'label').name('Label').onChange(drawRecord); gui.add(params, 'glow', 0, 2, 0.01).name('Glow'); gui.add(params, 'startStop').name('Start / Stop'); const smooth = (a, b, x) => { const t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t); }; return { update({ time, delta }) { const dt = Math.min(0.05, Math.max(1e-4, delta)); clock += dt; const nom = nominal(); const motorTarget = playing ? nom * (1 + params.pitch / 100) : 0; // record physics if (dragId !== null) { const inst = dragAccum / dt; angle += dragAccum; dragAccum = 0; angVel += (inst - angVel) * 0.45; } else { const k = playing ? params.torque : params.torque * 0.45; angVel += (motorTarget - angVel) * (1 - Math.exp(-k * dt)); angle += angVel * dt; } spin.rotation.y = -angle; const ratio = angVel / omega33; // tonearm if (needleDown && angVel > 0) prog += angVel * dt / (TAU * 220); const playYaw = -0.5 - 0.25 * (prog % 1); const yawTarget = playing ? playYaw : REST_YAW; armYaw += (yawTarget - armYaw) * (1 - Math.exp(-2.2 * dt)); const settled = Math.abs(yawTarget - armYaw) < 0.015; const liftTarget = playing && settled ? 0 : 1; armLift += (liftTarget - armLift) * (1 - Math.exp(-6 * dt)); armYawG.rotation.y = armYaw; armPitchG.rotation.x = -armLift * 0.06 - (playing ? 0 : 0.012); const down = playing && settled && armLift < 0.08; if (down && !needleDown) playOne(SND.needle, 0.7, 0.95 + Math.random() * 0.1); needleDown = down; armOn += ((needleDown ? 1 : 0) - armOn) * (1 - Math.exp(-10 * dt)); // beat follows the platter const r = Math.abs(ratio); if (beatVoice) { const vol = armOn * smooth(0.04, 0.35, r) * (ratio < 0 ? 0.3 : 1) * 0.85; beatVoice.setVolume(vol); const rate = THREE.MathUtils.clamp(r, 0.3, 2.2); if (Math.abs(rate - lastRate) > 0.008) { beatVoice.setRate(rate); lastRate = rate; } } // scratch strokes if (dragId !== null && armOn > 0.5) { const v = angVel; let dir = scratchDir; if (v > 1.4) dir = 1; else if (v < -1.4) dir = -1; else if (Math.abs(v) < 0.5) dir = 0; if (dir !== 0 && dir !== scratchDir && clock - lastScratch > 0.07) { if (scratchVoice) scratchVoice.stop(); const rr = THREE.MathUtils.clamp(0.8 + Math.abs(v) / 14, 0.8, 1.35); scratchVoice = playOne(dir > 0 ? SND.fwd : SND.back, 0.75 + Math.random() * 0.2, rr * (0.95 + Math.random() * 0.1)); lastScratch = clock; } scratchDir = dir; } else scratchDir = 0; // UI feedback btnPress = Math.max(0, btnPress - dt * 5); startBtn.position.y = 0.42 - btnPress * 0.018; knob.position.z += (FZ + (params.pitch / 8) * FR - knob.position.z) * 0.3; quartzMat.emissiveIntensity = params.pitch === 0 ? 2.2 : 0; const lv = sfx && sfx.levels ? sfx.levels() : null; const bass = lv ? lv.bass : 0; ledMat33.emissiveIntensity = params.rpm === '33' ? (playing ? 2.5 + bass * 4 : 0.6) : 0; ledMat45.emissiveIntensity = params.rpm === '45' ? (playing ? 2.5 + bass * 4 : 0.6) : 0; lensMat.emissiveIntensity = 2.6 + bass * 1.5; sLight.intensity = 5 + bass * 2.5; rim.intensity = 1.3 + bass * 1.4; under.intensity = bass * 6; // dust drift for (let i = 0; i < DUST; i++) { const s = dSeed[i]; dPos[i * 3] += Math.sin(time * 0.2 + s * 40) * 0.0015; dPos[i * 3 + 1] += 0.0012 + s * 0.0015; dPos[i * 3 + 2] += Math.cos(time * 0.17 + s * 30) * 0.0015; if (dPos[i * 3 + 1] > 4) dPos[i * 3 + 1] = 0; } dGeo.attributes.position.needsUpdate = true; bloom.strength = params.glow; orbit.update(); }, render() { composer.render(); }, resize({ width, height }) { composer.setSize(width, height); bloom.setSize(width, height); const a = width / Math.max(1, height); const d = 7.0 / Math.pow(Math.min(1, a), 0.85); const dir = camera.position.clone().sub(orbit.target).normalize(); camera.position.copy(orbit.target).addScaledVector(dir, d); }, dispose() { clearTimeout(hintTimer); canvas.removeEventListener('pointerdown', onDown); canvas.removeEventListener('pointermove', onMove); canvas.removeEventListener('pointerup', onUp); canvas.removeEventListener('pointercancel', onUp); window.removeEventListener('keydown', onKey); if (hint.parentElement) hint.parentElement.removeChild(hint); if (beatVoice) beatVoice.stop(); orbit.dispose(); pmrem.dispose(); composer.dispose(); }, }; }