import * as THREE from 'three'; 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 const xr = 'vr'; export default function sketch(ctx) { const { scene, camera, renderer, gui, size, pointer, canvas } = ctx; const XR = ctx.xr; let vrOn = false; const sfx = ctx.sfx; const textures = ctx.textures; const touch = matchMedia('(pointer: coarse)').matches; const TOP = 0.76, HL = 1.37, HW = 0.7625, NET = 0.1525, R = 0.02, G = 9.81; const clamp = THREE.MathUtils.clamp; const params = { difficulty: 'Club', front: '#c8102e', back: '#141414', blade: '#e3bf8a', edge: '#d4af37', cpu: '#1f5fd6', volume: 0.8, trail: true, assist: 0.6, hand: 'Right', glow: 0.15, haze: 0.6, dust: 200, newMatch: () => showMenu(), }; const DIFF = { Easy: { speed: 1.5, reach: 0.15, react: 0.32, err: 0.26, pace: 0.25, miss: 0.2 }, Club: { speed: 2.3, reach: 0.17, react: 0.22, err: 0.19, pace: 0.5, miss: 0.11 }, Pro: { speed: 3.3, reach: 0.19, react: 0.14, err: 0.13, pace: 0.8, miss: 0.05 }, Legend: { speed: 4.6, reach: 0.22, react: 0.07, err: 0.08, pace: 1.05, miss: 0.02 }, }; // ---------- renderer & environment renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; scene.background = new THREE.Color('#05070c'); scene.fog = new THREE.FogExp2('#05070c', 0.035); const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; scene.environmentIntensity = 0.3; const maxAniso = renderer.capabilities.getMaxAnisotropy(); const tTable = textures.get('tex_aAx8lXUSIU60', { repeat: [2, 3.4] }); const tRubber = textures.get('tex_ECzB34ldOIej', { repeat: [1.5, 1.5] }); const tWood = textures.get('tex_2F1mEy05ix4C', { repeat: [1, 1] }); const tFloor = textures.get('tex_WbnyiYYQGPyK', { repeat: [14, 14] }); const tArena = textures.get('tex_Q4hXbn71xGVx', { repeat: [4, 1] }); tTable.anisotropy = maxAniso; tFloor.anisotropy = maxAniso; // ---------- arena const arena = new THREE.Mesh( new THREE.CylinderGeometry(16, 16, 14, 64, 1, true), new THREE.MeshBasicMaterial({ map: tArena, side: THREE.BackSide, color: '#7c7c84', fog: false }) ); arena.position.y = 5.2; scene.add(arena); const floor = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), new THREE.MeshStandardMaterial({ map: tFloor, roughness: 0.72, metalness: 0 })); floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true; scene.add(floor); const boardMat = new THREE.MeshStandardMaterial({ color: '#0c1834', roughness: 0.55 }); const stripMat = new THREE.MeshStandardMaterial({ color: '#f2c14e', emissive: '#f2c14e', emissiveIntensity: 0.9 }); const addBoard = (w, d, x, z) => { const b = new THREE.Mesh(new THREE.BoxGeometry(w, 0.7, d), boardMat); b.position.set(x, 0.35, z); b.receiveShadow = true; scene.add(b); const s = new THREE.Mesh(new THREE.BoxGeometry(w + 0.01, 0.025, d + 0.01), stripMat); s.position.set(x, 0.62, z); scene.add(s); }; addBoard(9, 0.04, 0, -7); addBoard(9, 0.04, 0, 7); addBoard(0.04, 14, -4.5, 0); addBoard(0.04, 14, 4.5, 0); // ---------- table const topMat = new THREE.MeshStandardMaterial({ map: tTable, roughness: 0.5, metalness: 0 }); const edgeTMat = new THREE.MeshStandardMaterial({ color: '#0a1b40', roughness: 0.6 }); const tableTop = new THREE.Mesh(new THREE.BoxGeometry(HW * 2, 0.025, HL * 2), [edgeTMat, edgeTMat, topMat, edgeTMat, edgeTMat, edgeTMat]); tableTop.position.y = TOP - 0.0125; tableTop.castShadow = true; tableTop.receiveShadow = true; scene.add(tableTop); const lineMat = new THREE.MeshStandardMaterial({ color: '#f3f2ec', roughness: 0.45 }); const addLine = (w, d, x, z) => { const m = new THREE.Mesh(new THREE.PlaneGeometry(w, d), lineMat); m.rotation.x = -Math.PI / 2; m.position.set(x, TOP + 0.0006, z); m.receiveShadow = true; scene.add(m); }; addLine(0.02, HL * 2, HW - 0.01, 0); addLine(0.02, HL * 2, -HW + 0.01, 0); addLine(HW * 2, 0.02, 0, HL - 0.01); addLine(HW * 2, 0.02, 0, -HL + 0.01); addLine(0.003, HL * 2, 0, 0); const metal = new THREE.MeshStandardMaterial({ color: '#1b1e26', metalness: 0.7, roughness: 0.35 }); for (const sx of [-1, 1]) for (const sz of [-1, 1]) { const leg = new THREE.Mesh(new THREE.BoxGeometry(0.05, TOP - 0.025, 0.05), metal); leg.position.set(sx * 0.62, (TOP - 0.025) / 2, sz * 1.1); leg.castShadow = true; scene.add(leg); } for (const sz of [-1, 1]) { const bar = new THREE.Mesh(new THREE.BoxGeometry(1.3, 0.04, 0.04), metal); bar.position.set(0, 0.66, sz * 1.1); bar.castShadow = true; scene.add(bar); } for (const sx of [-1, 1]) { const bar = new THREE.Mesh(new THREE.BoxGeometry(0.04, 0.04, 2.24), metal); bar.position.set(sx * 0.62, 0.66, 0); bar.castShadow = true; scene.add(bar); } // net const netC = document.createElement('canvas'); netC.width = netC.height = 32; const nctx = netC.getContext('2d'); nctx.strokeStyle = 'rgba(16,20,34,1)'; nctx.lineWidth = 4; nctx.beginPath(); nctx.moveTo(0, 2); nctx.lineTo(32, 2); nctx.moveTo(2, 0); nctx.lineTo(2, 32); nctx.stroke(); const netTex = new THREE.CanvasTexture(netC); netTex.colorSpace = THREE.SRGBColorSpace; netTex.wrapS = netTex.wrapT = THREE.RepeatWrapping; netTex.repeat.set(1.83 / 0.014, NET / 0.014); const net = new THREE.Mesh(new THREE.PlaneGeometry(1.83, NET), new THREE.MeshStandardMaterial({ map: netTex, transparent: true, alphaTest: 0.3, side: THREE.DoubleSide, roughness: 0.9 })); net.position.set(0, TOP + NET / 2, 0); scene.add(net); const band = new THREE.Mesh(new THREE.BoxGeometry(1.83, 0.016, 0.006), lineMat); band.position.set(0, TOP + NET - 0.008, 0); band.castShadow = true; scene.add(band); for (const sx of [-1, 1]) { const post = new THREE.Mesh(new THREE.BoxGeometry(0.02, NET + 0.02, 0.03), metal); post.position.set(sx * 0.925, TOP + NET / 2, 0); post.castShadow = true; scene.add(post); } // ---------- lights scene.add(new THREE.HemisphereLight('#7f8fb8', '#1a0f0a', 0.35)); const key = new THREE.SpotLight('#fff1dc', 60, 14, 0.62, 0.55, 2); key.position.set(0, 4.6, 0.4); key.target.position.set(0, TOP, 0); key.castShadow = true; key.shadow.mapSize.set(2048, 2048); key.shadow.bias = -0.0002; key.shadow.normalBias = 0.02; key.shadow.camera.near = 1; key.shadow.camera.far = 8; scene.add(key, key.target); const rimL = new THREE.SpotLight('#ffb36b', 90, 25, 0.5, 0.7, 2); rimL.position.set(-5, 5, -5); rimL.target = key.target; scene.add(rimL); const rimR = new THREE.SpotLight('#6f9cff', 90, 25, 0.5, 0.7, 2); rimR.position.set(5, 5, -4); rimR.target = key.target; scene.add(rimR); const fill = new THREE.SpotLight('#ffe6c7', 40, 20, 0.6, 0.8, 2); fill.position.set(0, 3, 5); fill.target = key.target; scene.add(fill); const cone = new THREE.Mesh(new THREE.ConeGeometry(1.9, 4.0, 48, 1, true), new THREE.MeshBasicMaterial({ color: '#ffe9c4', transparent: true, opacity: 0.028, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide, fog: false })); cone.position.set(0, 4.6 - 2.0, 0.4); scene.add(cone); const DUST = 600; const dustPos = new Float32Array(DUST * 3), dustSeed = new Float32Array(DUST * 4); for (let i = 0; i < DUST; i++) { dustSeed[i * 4] = (Math.random() - 0.5) * 3.6; dustSeed[i * 4 + 1] = 0.9 + Math.random() * 3.4; dustSeed[i * 4 + 2] = (Math.random() - 0.5) * 3.6; dustSeed[i * 4 + 3] = Math.random() * 100; } const dustGeo = new THREE.BufferGeometry(); dustGeo.setAttribute('position', new THREE.BufferAttribute(dustPos, 3)); const dust = new THREE.Points(dustGeo, new THREE.PointsMaterial({ color: '#ffe9c4', size: 0.012, transparent: true, opacity: 0.45, blending: THREE.AdditiveBlending, depthWrite: false })); scene.add(dust); // ---------- bats function makeBat(frontColor) { const outer = new THREE.Group(), inner = new THREE.Group(); outer.add(inner); const rubGeo = new THREE.CylinderGeometry(0.074, 0.074, 0.0022, 48); rubGeo.rotateX(Math.PI / 2); rubGeo.scale(1, 1.07, 1); const coreGeo = new THREE.CylinderGeometry(0.075, 0.075, 0.0062, 48); coreGeo.rotateX(Math.PI / 2); coreGeo.scale(1, 1.07, 1); const tapeGeo = new THREE.CylinderGeometry(0.0758, 0.0758, 0.003, 48); tapeGeo.rotateX(Math.PI / 2); tapeGeo.scale(1, 1.07, 1); const frontMat = new THREE.MeshPhysicalMaterial({ map: tRubber, color: frontColor, roughness: 0.42, clearcoat: 0.3, clearcoatRoughness: 0.45, sheen: 0.4, sheenColor: new THREE.Color('#ffffff') }); const backMat = new THREE.MeshPhysicalMaterial({ map: tRubber, color: params.back, roughness: 0.42, clearcoat: 0.3, clearcoatRoughness: 0.45, sheen: 0.4, sheenColor: new THREE.Color('#ffffff') }); const woodMat = new THREE.MeshStandardMaterial({ map: tWood, color: params.blade, roughness: 0.55 }); const tapeMat = new THREE.MeshStandardMaterial({ color: params.edge, metalness: 0.55, roughness: 0.3 }); const core = new THREE.Mesh(coreGeo, woodMat); const tape = new THREE.Mesh(tapeGeo, tapeMat); const fr = new THREE.Mesh(rubGeo, frontMat); fr.position.z = -0.0042; const bk = new THREE.Mesh(rubGeo, backMat); bk.position.z = 0.0042; const shoulder = new THREE.Mesh(new RoundedBoxGeometry(0.042, 0.03, 0.02, 3, 0.007), woodMat); shoulder.position.y = -0.079; const handle = new THREE.Mesh(new RoundedBoxGeometry(0.03, 0.1, 0.026, 3, 0.009), woodMat); handle.position.y = -0.128; const plate = new THREE.Mesh(new THREE.BoxGeometry(0.02, 0.026, 0.028), tapeMat); plate.position.y = -0.115; for (const m of [core, tape, fr, bk, shoulder, handle, plate]) { m.castShadow = true; inner.add(m); } outer.scale.setScalar(1.15); scene.add(outer); return { outer, inner, frontMat, backMat, woodMat, tapeMat }; } const pBat = makeBat(params.front); const cBat = makeBat(params.cpu); cBat.outer.rotation.y = Math.PI; function applyColors() { pBat.frontMat.color.set(params.front); cBat.frontMat.color.set(params.cpu); for (const b of [pBat, cBat]) { b.backMat.color.set(params.back); b.woodMat.color.set(params.blade); b.tapeMat.color.set(params.edge); } hudDirty = true; } // ---------- ball, trail, ring const ballMesh = new THREE.Mesh(new THREE.SphereGeometry(R, 32, 16), new THREE.MeshPhysicalMaterial({ color: '#fffaf0', roughness: 0.38, clearcoat: 0.4, emissive: '#ffffff', emissiveIntensity: 0.12 })); ballMesh.scale.setScalar(1.1); ballMesh.castShadow = true; scene.add(ballMesh); const TN = 26; const trailPos = new Float32Array(TN * 3), trailCol = new Float32Array(TN * 3); const trailGeo = new THREE.BufferGeometry(); trailGeo.setAttribute('position', new THREE.BufferAttribute(trailPos, 3)); trailGeo.setAttribute('color', new THREE.BufferAttribute(trailCol, 3)); for (let i = 0; i < TN; i++) { const f = Math.pow(1 - i / TN, 1.6) * 0.7; trailCol[i * 3] = f; trailCol[i * 3 + 1] = f * 0.88; trailCol[i * 3 + 2] = f * 0.65; } const trail = new THREE.Line(trailGeo, new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false })); trail.frustumCulled = false; scene.add(trail); const ring = new THREE.Mesh(new THREE.RingGeometry(0.03, 0.038, 48), new THREE.MeshBasicMaterial({ color: '#ffe2a8', transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide })); scene.add(ring); let ringT = 10; // ---------- post const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); const bloom = new UnrealBloomPass(new THREE.Vector2(size.width, size.height), 0.35, 0.5, 0.85); composer.addPass(bloom); composer.addPass(new OutputPass()); // ---------- HUD const hudCanvas = document.createElement('canvas'); const hctx = hudCanvas.getContext('2d'); let hudTex = new THREE.CanvasTexture(hudCanvas); const hudScene = new THREE.Scene(); const hudCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 2); const hudMat = new THREE.MeshBasicMaterial({ transparent: true, depthTest: false, depthWrite: false, toneMapped: false }); const hudPlane = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), hudMat); hudPlane.position.z = -1; hudScene.add(hudPlane); let hudDirty = true; let hudDpr = 1, menuBtns = [], hoverBtn = -1; const VW = 1280, VH = 720; const vrCanvas = document.createElement('canvas'); vrCanvas.width = VW; vrCanvas.height = VH; const vctx = vrCanvas.getContext('2d'); const vrTex = new THREE.CanvasTexture(vrCanvas); vrTex.colorSpace = THREE.SRGBColorSpace; const vrPanel = new THREE.Mesh(new THREE.PlaneGeometry(3.0, 3.0 * VH / VW), new THREE.MeshBasicMaterial({ map: vrTex, transparent: true, toneMapped: false, fog: false, depthWrite: false })); vrPanel.position.set(0, 2.05, -2.6); vrPanel.visible = false; scene.add(vrPanel); let vrBtns = []; const LEVELS = ['Easy', 'Club', 'Pro', 'Legend']; const DESC = { Easy: 'Relaxed rallies, forgiving returns', Club: 'A steady club player', Pro: 'Fast, accurate, punishing', Legend: 'Near flawless. Good luck.' }; function sizeHud() { const dpr = Math.min(size.pixelRatio || 1, 2); hudDpr = dpr; hudCanvas.width = Math.max(2, Math.round(size.width * dpr)); hudCanvas.height = Math.max(2, Math.round(size.height * dpr)); hudTex.dispose(); hudTex = new THREE.CanvasTexture(hudCanvas); hudTex.colorSpace = THREE.SRGBColorSpace; hudTex.generateMipmaps = false; hudTex.minFilter = THREE.LinearFilter; hudMat.map = hudTex; hudMat.needsUpdate = true; hudDirty = true; } function rr(c, x, y, w, h, r) { c.beginPath(); c.moveTo(x + r, y); c.lineTo(x + w - r, y); c.quadraticCurveTo(x + w, y, x + w, y + r); c.lineTo(x + w, y + h - r); c.quadraticCurveTo(x + w, y + h, x + w - r, y + h); c.lineTo(x + r, y + h); c.quadraticCurveTo(x, y + h, x, y + h - r); c.lineTo(x, y + r); c.quadraticCurveTo(x, y, x + r, y); c.closePath(); } const FONT = '"Helvetica Neue", Helvetica, Arial, sans-serif'; function drawMenu(c, W, H, dpr, vr) { const cw = W / dpr, ch = H / dpr; c.save(); c.scale(dpr, dpr); const g = c.createRadialGradient(cw / 2, ch * 0.5, 0, cw / 2, ch * 0.5, Math.max(cw, ch) * 0.7); g.addColorStop(0, 'rgba(4,6,12,0.35)'); g.addColorStop(1, 'rgba(4,6,12,0.88)'); c.fillStyle = g; c.fillRect(0, 0, cw, ch); const s = clamp(Math.min(cw, ch) / 700, 0.6, 1.4); const bw = Math.min(380 * s, cw * 0.86), bh = 62 * s, gap = 12 * s; const y0 = ch * 0.5 - (4 * bh + 3 * gap) / 2 + 40 * s; c.textBaseline = 'middle'; c.textAlign = 'center'; c.font = `800 ${44 * s}px ${FONT}`; c.shadowColor = 'rgba(242,193,78,0.5)'; c.shadowBlur = 22 * s; c.fillStyle = '#ffffff'; c.fillText('CENTER COURT', cw / 2, y0 - 100 * s); c.shadowBlur = 0; c.font = `600 ${14 * s}px ${FONT}`; c.fillStyle = '#f2c14e'; c.fillText('CHOOSE YOUR OPPONENT', cw / 2, y0 - 52 * s); const btns = []; LEVELS.forEach((n, i) => { const x = (cw - bw) / 2, y = y0 + i * (bh + gap); btns.push({ x, y, w: bw, h: bh, n }); const hov = i === hoverBtn, cur = n === params.difficulty; c.fillStyle = hov ? 'rgba(242,193,78,0.22)' : 'rgba(10,14,24,0.78)'; rr(c, x, y, bw, bh, 12 * s); c.fill(); c.strokeStyle = hov || cur ? 'rgba(242,193,78,0.9)' : 'rgba(255,255,255,0.18)'; c.lineWidth = (hov ? 2 : 1.2) * s; c.stroke(); c.textAlign = 'left'; c.font = `700 ${20 * s}px ${FONT}`; c.fillStyle = '#ffffff'; c.fillText(n.toUpperCase(), x + 20 * s, y + bh * 0.38); c.font = `500 ${12.5 * s}px ${FONT}`; c.fillStyle = 'rgba(255,255,255,0.6)'; c.fillText(DESC[n], x + 20 * s, y + bh * 0.7); for (let k = 0; k < 4; k++) { c.fillStyle = k <= i ? '#f2c14e' : 'rgba(255,255,255,0.15)'; c.beginPath(); c.arc(x + bw - 22 * s - (3 - k) * 14 * s, y + bh / 2, 4.5 * s, 0, Math.PI * 2); c.fill(); } if (!touch && !vr) { c.textAlign = 'right'; c.font = `600 ${11 * s}px ${FONT}`; c.fillStyle = 'rgba(255,255,255,0.35)'; c.fillText(String(i + 1), x + bw - 82 * s, y + bh / 2); } }); c.textAlign = 'center'; c.font = `500 ${13 * s}px ${FONT}`; c.fillStyle = 'rgba(255,255,255,0.55)'; c.fillText(vr ? 'Point at a level and pull the trigger' : touch ? 'Tap a level to start' : 'Click a level or press 1 – 4 to start', cw / 2, y0 + 4 * bh + 3 * gap + 30 * s); c.restore(); return btns; } let msg = '', sub = '', msgTimer = 0, rallyHits = 0; function drawHud() { hudDirty = false; menuBtns = paintHud(hctx, hudCanvas.width, hudCanvas.height, hudDpr, false); hudTex.needsUpdate = true; if (vrOn) { vrBtns = paintHud(vctx, VW, VH, 1, true); vrTex.needsUpdate = true; } } function paintHud(c, W, H, dpr, vr) { const u = Math.min(W, H) / 700; c.clearRect(0, 0, W, H); if (state === 'menu') return drawMenu(c, W, H, dpr, vr); const bw = 460 * u, bh = 88 * u, bx = (W - bw) / 2, by = 16 * u; c.fillStyle = 'rgba(6,8,14,0.66)'; rr(c, bx, by, bw, bh, 14 * u); c.fill(); c.strokeStyle = 'rgba(242,193,78,0.45)'; c.lineWidth = 1.5 * u; c.stroke(); c.textBaseline = 'middle'; c.textAlign = 'center'; c.font = `600 ${15 * u}px ${FONT}`; c.fillStyle = 'rgba(255,255,255,0.72)'; c.fillText('YOU', bx + bw * 0.14, by + bh * 0.42); c.fillText('CPU', bx + bw * 0.86, by + bh * 0.42); c.fillStyle = params.front; c.beginPath(); c.arc(bx + bw * 0.14, by + bh * 0.72, 6 * u, 0, Math.PI * 2); c.fill(); c.fillStyle = params.cpu; c.beginPath(); c.arc(bx + bw * 0.86, by + bh * 0.72, 6 * u, 0, Math.PI * 2); c.fill(); if (state !== 'over') { c.fillStyle = '#f2c14e'; c.beginPath(); c.arc(bx + bw * (server === 'player' ? 0.04 : 0.96), by + bh * 0.42, 4.5 * u, 0, Math.PI * 2); c.fill(); } c.font = `700 ${52 * u}px ${FONT}`; c.fillStyle = '#ffffff'; c.fillText(String(scoreP), bx + bw * 0.36, by + bh * 0.54); c.fillText(String(scoreC), bx + bw * 0.64, by + bh * 0.54); c.fillStyle = 'rgba(242,193,78,0.85)'; c.fillRect(bx + bw / 2 - u, by + bh * 0.3, 2 * u, bh * 0.4); c.font = `600 ${12 * u}px ${FONT}`; c.fillStyle = 'rgba(255,255,255,0.55)'; c.fillText(`${params.difficulty.toUpperCase()} · FIRST TO 11`, W / 2, by + bh + 16 * u); if (msg) { c.font = `800 ${58 * u}px ${FONT}`; c.shadowColor = 'rgba(242,193,78,0.65)'; c.shadowBlur = 26 * u; c.fillStyle = '#ffffff'; c.fillText(msg, W / 2, H * 0.36); c.shadowBlur = 0; } if (sub) { c.font = `600 ${18 * u}px ${FONT}`; c.fillStyle = 'rgba(255,236,200,0.88)'; c.fillText(sub, W / 2, H * 0.36 + 50 * u); } let hint = ''; if (state === 'serve') hint = server === 'player' ? (vr ? 'Swing through the floating ball to serve' : touch ? 'Tap to serve · drag to move your bat' : 'Click or press Space to serve · move the mouse to play') : 'CPU to serve'; else if (state === 'rally' && rallyHits >= 4) hint = `RALLY ${rallyHits}`; if (hint) { c.font = `600 ${15 * u}px ${FONT}`; c.fillStyle = 'rgba(255,255,255,0.78)'; c.fillText(hint, W / 2, H - 34 * u); } if (state === 'serve' && server === 'player' && scoreP + scoreC === 0) { c.font = `500 ${13 * u}px ${FONT}`; c.fillStyle = 'rgba(255,255,255,0.5)'; c.fillText(vr ? 'Swing forward through the ball for pace · angle the bat face to aim' : touch ? 'Swipe up through the ball for pace · swipe sideways to aim' : 'Push the mouse forward through the ball for pace · sideways to aim', W / 2, H - 58 * u); } return []; } // ---------- game state const ball = { p: new THREE.Vector3(0, 1, 1.4), v: new THREE.Vector3() }; const pb = { x: 0, y: 0.97, z: 1.55, vx: 0, vz: 0, swing: 0, ry: 2.4 }; const cb = { x: 0, y: 0.97, z: -1.7, swing: 0, tx: 0, ty: 0.97, tz: -1.7, react: 0, err: 0, has: false, serveX: 0 }; let state = 'serve', server = 'player', firstServer = 'player', hitter = null; let oppBounces = 0, netTouched = false, pointTimer = 0, aiServeTimer = 0; let scoreP = 0, scoreC = 0, shake = 0, lastBounceSnd = 0, clock = 0; let predX = 0, predY = 0; const tp = new THREE.Vector3(), tv = new THREE.Vector3(); const other = (s) => (s === 'player' ? 'cpu' : 'player'); const gauss = () => (Math.random() + Math.random() + Math.random() - 1.5) * 1.15; function play(id, o) { if (sfx) sfx.play(id, o); } if (sfx) { sfx.volume = params.volume; sfx.loop('sfx_sNAOQbBAAH2Q', { volume: 0.28 }); } function computeServer() { const total = scoreP + scoreC; if (scoreP >= 10 && scoreC >= 10) return total % 2 === 0 ? firstServer : other(firstServer); return Math.floor(total / 2) % 2 === 0 ? firstServer : other(firstServer); } function statusLine() { if (scoreP >= 10 && scoreC >= 10) { if (scoreP === scoreC) return 'Deuce'; return scoreP > scoreC ? 'Advantage you' : 'Advantage CPU'; } if (scoreP === 10 && scoreC < 10) return 'Game point'; if (scoreC === 10 && scoreP < 10) return 'CPU game point'; return ''; } function nextServe() { server = computeServer(); state = 'serve'; hitter = null; oppBounces = 0; netTouched = false; rallyHits = 0; if (server === 'cpu') { aiServeTimer = 1.1 + Math.random() * 0.6; cb.serveX = (Math.random() - 0.5) * 0.7; } sub = statusLine(); msg = ''; hudDirty = true; } function showMenu() { state = 'menu'; msg = ''; sub = ''; msgTimer = 0; hoverBtn = -1; hudDirty = true; } function startMatch(n) { params.difficulty = n; if (diffCtrl && diffCtrl.updateDisplay) diffCtrl.updateDisplay(); play('sfx_hN7TGTHaBBAO', { volume: 0.5, rate: 1.1 }); resetMatch(); } function resetMatch() { scoreP = 0; scoreC = 0; firstServer = 'player'; msg = ''; sub = ''; nextServe(); } function endRally(winner, reason) { if (state !== 'rally') return; if (winner === 'player') scoreP++; else scoreC++; const texts = winner === 'player' ? { out: 'CPU hits out', net: 'CPU hits the net', fault: 'CPU fault', win: rallyHits >= 8 ? 'What a rally!' : 'Point!' } : { out: 'Out', net: 'Net', fault: 'Fault', win: 'Missed' }; msg = texts[reason] || 'Point'; sub = ''; const lead = Math.max(scoreP, scoreC), diff = Math.abs(scoreP - scoreC); if (lead >= 11 && diff >= 2) { state = 'over'; msg = scoreP > scoreC ? 'YOU WIN' : 'CPU WINS'; sub = `${scoreP} – ${scoreC} · ${vrOn ? 'pull the trigger' : touch ? 'tap' : 'click'} to play again`; msgTimer = 0; if (scoreP > scoreC) play('sfx_SZiX6LZ95qTQ', { volume: 0.7 }); else play('sfx_mHeOcawBKdjK', { volume: 0.3, rate: 0.85 }); } else { state = 'point'; pointTimer = 1.7; msgTimer = 1.5; if (winner === 'player') play('sfx_mHeOcawBKdjK', { volume: 0.25 + Math.min(rallyHits, 12) * 0.03, rate: 0.95 + Math.random() * 0.1 }); } hudDirty = true; } function onBounce(side) { if (state !== 'rally') return; if (side === hitter) { endRally(other(hitter), netTouched ? 'net' : 'fault'); return; } oppBounces++; if (oppBounces >= 2) endRally(hitter, 'win'); else if (hitter === 'player') aiPlan(false); } function onDead() { if (state !== 'rally') return; if (oppBounces >= 1) endRally(hitter, 'win'); else endRally(other(hitter), netTouched ? 'net' : 'out'); } function solve(p, tx, tz, speed, out) { const dx = tx - p.x, dz = tz - p.z; const dist = Math.max(0.3, Math.hypot(dx, dz)); let t = dist / speed, vy = 0; for (let i = 0; i < 12; i++) { vy = (TOP + R - p.y) / t + 0.5 * G * t; const vz = dz / t; const tn = Math.abs(vz) > 1e-4 ? -p.z / vz : -1; if (tn > 0 && tn < t) { const yn = p.y + vy * tn - 0.5 * G * tn * tn; if (yn > TOP + NET + R + 0.03) break; } else break; t *= 1.1; } out.set(dx / t, vy, dz / t); } function predict(planeZ) { tp.copy(ball.p); tv.copy(ball.v); const h = 1 / 300; for (let i = 0; i < 900; i++) { tv.y -= G * h; tp.addScaledVector(tv, h); if (tv.y < 0 && tp.y < TOP + R && tp.y > TOP - 0.04 && Math.abs(tp.x) < HW && Math.abs(tp.z) < HL) { tp.y = TOP + R; tv.y = -tv.y * 0.9; tv.x *= 0.97; tv.z *= 0.97; } if ((tv.z < 0 && tp.z <= planeZ) || (tv.z > 0 && tp.z >= planeZ)) { predX = tp.x; predY = tp.y; return true; } if (tp.y < 0) return false; } return false; } function aiPlan(fresh) { const d = DIFF[params.difficulty]; if (fresh) { cb.react = d.react * (0.8 + Math.random() * 0.4); cb.err = Math.random() < d.miss ? (Math.random() < 0.5 ? -1 : 1) * d.reach * (1.3 + Math.random()) : (Math.random() - 0.5) * d.reach * 0.6; } let ok = false; for (const z of [-1.7, -1.5, -1.3]) { if (predict(z)) { cb.tx = predX + cb.err; cb.ty = clamp(predY, 0.8, 1.5); cb.tz = z; ok = true; if (predY > TOP + 0.08) break; } } cb.has = ok; } function hitFx(pan, vol) { play('sfx_hN7TGTHaBBAO', { volume: clamp(vol, 0.3, 1), rate: 0.9 + Math.random() * 0.25, pan }); ring.position.copy(ball.p); ringT = 0; } function playerHit() { const off = (ball.p.x - pb.x) / 0.2; const fwd = clamp(-pb.vz, -1, 4.5); const pace = clamp(0.45 + fwd * 0.22 + Math.abs(pb.vx) * 0.04, 0.3, 1.5); const tx = clamp(pb.vx * 0.13 - off * 0.3 + ball.p.x * 0.15 + (Math.random() - 0.5) * 0.1 * off * off, -0.95, 0.95); const tz = -clamp(0.55 + pace * 0.45 + (Math.random() - 0.5) * 0.15, 0.3, 1.32); solve(ball.p, tx, tz, 4.0 + pace * 4.2, ball.v); hitter = 'player'; oppBounces = 0; netTouched = false; rallyHits++; pb.swing = 1; if (pace > 1.15) shake = 1; hitFx(ball.p.x * 0.5, 0.55 + pace * 0.35); aiPlan(true); if (rallyHits >= 4) hudDirty = true; } function cpuHit() { const d = DIFF[params.difficulty]; const away = pb.x > 0 ? -1 : 1; let tx = away * (0.25 + Math.random() * 0.4) * (0.5 + d.pace * 0.5) + (Math.random() - 0.5) * 0.5 * (1 - d.pace * 0.5); tx += gauss() * d.err; const pace = d.pace * (0.75 + Math.random() * 0.5); const tz = clamp(0.5 + pace * 0.4 + Math.random() * 0.35, 0.3, 1.3) + gauss() * d.err * 0.5; solve(ball.p, clamp(tx, -0.95, 0.95), tz, 3.8 + pace * 4.2, ball.v); hitter = 'cpu'; oppBounces = 0; netTouched = false; rallyHits++; cb.swing = 1; hitFx(ball.p.x * 0.5, 0.4 + pace * 0.3); if (rallyHits >= 4) hudDirty = true; } function playerServe() { if (state !== 'serve' || server !== 'player') return; const tx = clamp(pb.vx * 0.12 + (Math.random() - 0.5) * 0.25 - pb.x * 0.3, -0.6, 0.6); const tz = -(0.7 + Math.random() * 0.45); solve(ball.p, tx, tz, 4.6, ball.v); state = 'rally'; hitter = 'player'; oppBounces = 0; netTouched = false; rallyHits = 1; pb.swing = 1; hitFx(0, 0.6); aiPlan(true); sub = ''; hudDirty = true; } function cpuServe() { const d = DIFF[params.difficulty]; const tx = (Math.random() - 0.5) * 1.0; const tz = 0.6 + Math.random() * 0.5; solve(ball.p, tx, tz, 4.2 + d.pace * 1.2, ball.v); state = 'rally'; hitter = 'cpu'; oppBounces = 0; netTouched = false; rallyHits = 1; cb.swing = 1; hitFx(0, 0.5); sub = ''; hudDirty = true; } function stepPhysics(dt) { const N = 4, h = dt / N; const reachC = DIFF[params.difficulty].reach; for (let s = 0; s < N; s++) { const prevZ = ball.p.z, prevRelP = ball.p.z - pb.z, prevRelC = ball.p.z - cb.z; ball.v.y -= G * h; ball.p.addScaledVector(ball.v, h); ball.v.multiplyScalar(1 - 0.06 * h); const p = ball.p, v = ball.v; // net if (prevZ * p.z <= 0 && prevZ !== p.z && Math.abs(p.x) < 0.925 && p.y < TOP + NET + R && p.y > TOP - 0.02) { p.z = (prevZ >= 0 ? 1 : -1) * (R + 0.003); v.z *= -0.12; v.x *= 0.5; v.y *= 0.4; if (state === 'rally') netTouched = true; play('sfx_AVFbNrXuczOR', { volume: 0.7, rate: 0.9 + Math.random() * 0.2 }); } // table if (v.y < 0 && p.y < TOP + R && p.y > TOP - 0.04 && Math.abs(p.x) < HW && Math.abs(p.z) < HL) { const impact = -v.y; p.y = TOP + R; v.y = -v.y * 0.9; v.x *= 0.97; v.z *= 0.97; if (clock - lastBounceSnd > 0.06 && impact > 0.3) { lastBounceSnd = clock; play('sfx_ZqFLmPf1chEq', { volume: clamp(impact / 4, 0.15, 0.9), rate: 0.92 + Math.random() * 0.18, pan: p.x * 0.5 }); } onBounce(p.z > 0 ? 'player' : 'cpu'); } // floor & walls if (p.y < R) { p.y = R; if (v.y < 0) { if (-v.y > 0.6 && clock - lastBounceSnd > 0.06) { lastBounceSnd = clock; play('sfx_ZqFLmPf1chEq', { volume: clamp(-v.y / 8, 0.08, 0.4), rate: 0.75 }); } v.y = -v.y * 0.6; v.x *= 0.8; v.z *= 0.8; } onDead(); } if (Math.abs(p.z) > 6.9) { p.z = Math.sign(p.z) * 6.9; v.z *= -0.4; onDead(); } if (Math.abs(p.x) > 4.4) { p.x = Math.sign(p.x) * 4.4; v.x *= -0.4; onDead(); } // bats if (state === 'rally' && vrOn) { if (vbValid && hitter === 'cpu' && oppBounces >= 1) { bc.lerpVectors(vbPrev, vbCur, (s + 1) / N); if (batTouch(bc)) vrStrike(false); } } else if (state === 'rally') { if (hitter === 'cpu' && oppBounces >= 1 && v.z > 0 && prevRelP < 0 && p.z - pb.z >= 0 && Math.abs(p.x - pb.x) < 0.2 + params.assist * 0.1 && Math.abs(p.y - pb.y) < 0.24 + params.assist * 0.06) playerHit(); else if (hitter === 'player' && oppBounces >= 1 && v.z < 0 && prevRelC > 0 && p.z - cb.z <= 0 && Math.abs(p.x - cb.x) < reachC && Math.abs(p.y - cb.y) < 0.3) cpuHit(); } } } // ---------- input function onDown(e) { if (state === 'menu') { if (!e || e.clientX === undefined) return; const r = canvas.getBoundingClientRect(); const sx = size.width / Math.max(1, r.width), sy = size.height / Math.max(1, r.height); const x = (e.clientX - r.left) * sx, y = (e.clientY - r.top) * sy; for (const b of menuBtns) if (x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) { startMatch(b.n); return; } return; } if (state === 'over') showMenu(); else if (state === 'serve' && server === 'player') playerServe(); } canvas.addEventListener('pointerdown', onDown); const onKey = (e) => { if (state === 'menu') { const m = /^Digit([1-4])$/.exec(e.code); if (m) { e.preventDefault(); startMatch(LEVELS[+m[1] - 1]); } return; } if (e.code === 'Space') { e.preventDefault(); onDown(); } }; window.addEventListener('keydown', onKey); // ---------- GUI const fb = gui.addFolder('Bat'); fb.addColor(params, 'front').name('Front rubber').onChange(applyColors); fb.addColor(params, 'back').name('Back rubber').onChange(applyColors); fb.addColor(params, 'blade').name('Blade wood').onChange(applyColors); fb.addColor(params, 'edge').name('Edge tape').onChange(applyColors); fb.addColor(params, 'cpu').name('CPU rubber').onChange(applyColors); const fm = gui.addFolder('Match'); const diffCtrl = fm.add(params, 'difficulty', LEVELS).name('Opponent').onChange(() => resetMatch()); fm.add(params, 'assist', 0, 1, 0.01).name('Hit assist'); fm.add(params, 'volume', 0, 1, 0.01).name('Sound volume').onChange((v) => { if (sfx) sfx.volume = v; }); fm.add(params, 'trail').name('Ball trail'); fm.add(params, 'hand', ['Right', 'Left']).name('VR bat hand'); fm.add(params, 'newMatch').name('New match'); const fl = gui.addFolder('Look'); fl.add(params, 'glow', 0, 1.5, 0.01).name('Glow'); fl.add(params, 'haze', 0, 2, 0.01).name('Light haze'); fl.add(params, 'dust', 0, DUST, 1).name('Dust particles'); // ---------- VR play const mount = new THREE.Object3D(); mount.rotation.set(-Math.PI / 2, Math.PI / 2, 0); mount.position.set(0, 0, -0.12); const vbPrev = new THREE.Vector3(), vbCur = new THREE.Vector3(), vbVel = new THREE.Vector3(), vbN = new THREE.Vector3(); const vq = new THREE.Quaternion(), vtmp = new THREE.Vector3(), headW = new THREE.Vector3(); const rel = new THREE.Vector3(), bc = new THREE.Vector3(), rv = new THREE.Vector3(), tanV = new THREE.Vector3(); const outV = new THREE.Vector3(), aimV = new THREE.Vector3(), hitN = new THREE.Vector3(); let vbValid = false, batCtrl = null, lastDn = 0; function batController() { if (!XR) return null; const pref = params.hand === 'Left' ? XR.left : XR.right; if (pref && pref.connected) return pref; const o = params.hand === 'Left' ? XR.right : XR.left; if (o && o.connected) return o; for (const c of XR.controllers) if (c.connected) return c; return null; } function vrBat(dt) { const c = batController(); if (!c || !c.grip) { vbValid = false; return; } if (mount.parent !== c.grip) { c.grip.add(mount); vbValid = false; } batCtrl = c; mount.updateWorldMatrix(true, false); vbPrev.copy(vbCur); mount.getWorldPosition(vbCur); mount.getWorldQuaternion(vq); if (!vbValid) { vbPrev.copy(vbCur); vbVel.set(0, 0, 0); vbValid = true; } vtmp.subVectors(vbCur, vbPrev).multiplyScalar(1 / Math.max(dt, 1e-4)); vbVel.lerp(vtmp, 0.6); vbN.set(0, 0, 1).applyQuaternion(vq); pBat.outer.position.copy(vbCur); pBat.outer.quaternion.copy(vq); pBat.inner.rotation.set(0, 0, 0); pb.x = vbCur.x; pb.y = vbCur.y; pb.z = vbCur.z; pb.vx = vbVel.x; pb.vz = vbVel.z; } function batTouch(center) { rv.subVectors(ball.v, vbVel); hitN.copy(vbN); if (rv.dot(hitN) > 0) hitN.negate(); rel.subVectors(ball.p, center); const dn = rel.dot(hitN); if (dn > R + 0.012 + params.assist * 0.03 || dn < -0.08) return false; const inPlane = Math.sqrt(Math.max(0, rel.lengthSq() - dn * dn)); if (inPlane > 0.085 + params.assist * 0.07) return false; lastDn = dn; return rv.dot(hitN) < -0.05; } function vrStrike(serve) { rv.subVectors(ball.v, vbVel); const vn = rv.dot(hitN); tanV.copy(rv).addScaledVector(hitN, -vn); outV.copy(vbVel).addScaledVector(tanV, 0.35).addScaledVector(hitN, -0.85 * vn); if (lastDn < R + 0.004) ball.p.addScaledVector(hitN, R + 0.004 - lastDn); const spd = vbVel.length(); const pace = clamp(0.3 + spd * 0.22, 0.3, 1.5); let tx = outV.z < -0.3 ? ball.p.x + (outV.x / -outV.z) * (ball.p.z + 0.8) : ball.p.x * 0.4; tx = clamp(tx + (Math.random() - 0.5) * 0.1, -0.92, 0.92); const tz = serve ? -(0.7 + Math.random() * 0.45) : -clamp(0.55 + pace * 0.45 + (Math.random() - 0.5) * 0.15, 0.3, 1.32); solve(ball.p, tx, tz, serve ? 4.2 + pace * 1.5 : 4.0 + pace * 4.2, aimV); ball.v.copy(outV).lerp(aimV, clamp(0.35 + params.assist * 0.65, 0, 1)); if (serve) { state = 'rally'; rallyHits = 0; sub = ''; } hitter = 'player'; oppBounces = 0; netTouched = false; rallyHits++; hitFx(ball.p.x * 0.5, 0.55 + pace * 0.35); if (batCtrl && batCtrl.pulse) batCtrl.pulse(clamp(0.25 + pace * 0.45, 0, 1), 35); aiPlan(true); hudDirty = true; } function btnAt(list, x, y) { for (let i = 0; i < list.length; i++) { const b = list[i]; if (x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) return i; } return -1; } function vrHover() { for (const c of XR.controllers) { if (!c.connected) continue; const h = c.intersect([vrPanel])[0]; if (h && h.uv) { const i = btnAt(vrBtns, h.uv.x * VW, (1 - h.uv.y) * VH); if (i >= 0) return i; } } return -1; } if (XR) { XR.rig.position.set(0, 0, 2.05); XR.on('select', ({ controller }) => { if (state === 'menu') { const h = controller.intersect([vrPanel])[0]; if (h && h.uv) { const i = btnAt(vrBtns, h.uv.x * VW, (1 - h.uv.y) * VH); if (i >= 0) startMatch(vrBtns[i].n); } return; } if (state === 'over') showMenu(); else if (state === 'serve' && server === 'player') playerServe(); }); } // ---------- camera layout const camBase = new THREE.Vector3(0, 1.6, 3.0); const lookT = new THREE.Vector3(0, 0.7, -0.55); let xRange = 0.95, camX = 0; function layout() { const aspect = size.width / Math.max(1, size.height); if (aspect < 1) { camera.fov = 58; camBase.set(0, 1.75 + (1 - aspect) * 0.6, 3.1 + (1 - aspect) * 1.8); } else { camera.fov = 48; camBase.set(0, 1.6, 3.0); } camera.updateProjectionMatrix(); const half = Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)) * aspect * (camBase.z - 1.55); xRange = clamp(half * 0.95, 0.5, 0.95); } layout(); sizeHud(); showMenu(); for (let i = 0; i < TN; i++) { trailPos[i * 3] = ball.p.x; trailPos[i * 3 + 1] = ball.p.y; trailPos[i * 3 + 2] = ball.p.z; } function approach(cur, target, maxStep) { const d = target - cur; return Math.abs(d) <= maxStep ? target : cur + Math.sign(d) * maxStep; } return { update({ time, delta }) { const dt = Math.min(Math.max(delta, 0), 1 / 30); clock = time; const nowVr = !!(XR && XR.presenting); if (nowVr !== vrOn) { vrOn = nowVr; hudDirty = true; vbValid = false; if (!vrOn) { mount.removeFromParent(); pBat.outer.quaternion.identity(); } } vrPanel.visible = vrOn; if (vrOn) { const playing = state === 'rally' || state === 'serve' || state === 'point'; XR.rays = !playing; XR.models = !playing; } // player bat if (vrOn) vrBat(dt); else { let tx = clamp(pointer.x, -1, 1) * xRange; const incoming = state === 'rally' && hitter === 'cpu' && ball.v.z > 0 && predict(pb.z); if (incoming && params.assist > 0) { const gapX = Math.abs(predX - tx); const pull = params.assist * clamp(1.4 - gapX / 0.55, 0, 1); tx += (clamp(predX, -1.1, 1.1) - tx) * pull; } const tz = 1.55 - clamp(pointer.y, -1, 1) * 0.3; const k = 1 - Math.exp(-dt * 24); const nx = pb.x + (tx - pb.x) * k, nz = pb.z + (tz - pb.z) * k; const inv = 1 / Math.max(dt, 1e-4); pb.vx += ((nx - pb.x) * inv - pb.vx) * 0.3; pb.vz += ((nz - pb.z) * inv - pb.vz) * 0.3; pb.x = nx; pb.z = nz; let ty = 0.97; if (incoming) ty = predY; const minY = pb.z < HL + 0.06 ? TOP + 0.07 : 0.8; ty = clamp(ty, minY, 1.45); pb.y += (ty - pb.y) * (1 - Math.exp(-dt * 16)); } // cpu bat const d = DIFF[params.difficulty]; let gx = 0, gy = 0.97, gz = -1.7, spd = 1.2; if (state === 'rally' && hitter === 'player' && cb.has) { if (cb.react > 0) { cb.react -= dt; gx = cb.x; gy = cb.y; gz = cb.z; } else { gx = cb.tx; gy = cb.ty; gz = cb.tz; } spd = d.speed; } else if (state === 'serve' && server === 'cpu') { gx = cb.serveX; gy = 0.95; gz = -1.62; } cb.x = approach(cb.x, gx, spd * dt); cb.y = approach(cb.y, gy, 3.5 * dt); cb.z = approach(cb.z, gz, 2.0 * dt); // ball if (state === 'menu') { ball.p.set(0, TOP + 0.35 + Math.sin(time * 1.6) * 0.08, 0.5); ball.v.set(0, 0, 0); let hb = -1; if (vrOn) hb = vrHover(); else if (!touch && pointer.inside) for (let i = 0; i < menuBtns.length; i++) { const b = menuBtns[i]; if (pointer.px >= b.x && pointer.px <= b.x + b.w && pointer.py >= b.y && pointer.py <= b.y + b.h) hb = i; } if (hb !== hoverBtn) { hoverBtn = hb; hudDirty = true; } } else if (state === 'serve') { const bob = Math.sin(time * 3) * 0.015; if (server === 'player') { if (vrOn) { camera.getWorldPosition(headW); ball.p.set(clamp(headW.x, -0.55, 0.55), TOP + 0.32 + bob, 1.5); ball.v.set(0, 0, 0); if (vbValid && batTouch(vbCur)) vrStrike(true); } else ball.p.set(pb.x, pb.y + 0.17 + bob, pb.z - 0.1); } else { ball.p.set(cb.x, cb.y + 0.17 + bob, cb.z + 0.1); aiServeTimer -= dt; if (aiServeTimer <= 0) cpuServe(); } if (state === 'serve') ball.v.set(0, 0, 0); } else stepPhysics(dt); if (state === 'point') { pointTimer -= dt; if (pointTimer <= 0) nextServe(); } if (msgTimer > 0) { msgTimer -= dt; if (msgTimer <= 0 && state !== 'over') { msg = ''; hudDirty = true; } } // bat visuals pb.swing = Math.max(0, pb.swing - dt * 4); cb.swing = Math.max(0, cb.swing - dt * 4); const show = state !== 'rally'; const ryT = show ? 2.5 : clamp(-pb.vx * 0.05, -0.4, 0.4); pb.ry += (ryT - pb.ry) * (1 - Math.exp(-dt * 10)); const sw = Math.sin(pb.swing * Math.PI); if (!vrOn) { pBat.outer.quaternion.identity(); pBat.outer.position.set(pb.x, pb.y, pb.z - sw * 0.05); pBat.inner.rotation.set(-0.3 - sw * 0.5, pb.ry, clamp(-pb.vx * 0.06, -0.5, 0.5) + 0.15); } const cs = Math.sin(cb.swing * Math.PI); cBat.outer.position.set(cb.x, cb.y, cb.z + cs * 0.05); cBat.inner.rotation.set(-0.3 - cs * 0.5, 0, Math.sin(time * 0.7) * 0.08 - 0.15); ballMesh.position.copy(ball.p); ballMesh.rotation.x += ball.v.z * dt * 25; ballMesh.rotation.z -= ball.v.x * dt * 25; // trail trail.visible = params.trail && state !== 'serve' && state !== 'menu'; for (let i = TN - 1; i > 0; i--) { trailPos[i * 3] = trailPos[(i - 1) * 3]; trailPos[i * 3 + 1] = trailPos[(i - 1) * 3 + 1]; trailPos[i * 3 + 2] = trailPos[(i - 1) * 3 + 2]; } trailPos[0] = ball.p.x; trailPos[1] = ball.p.y; trailPos[2] = ball.p.z; trailGeo.attributes.position.needsUpdate = true; // ring ringT += dt; ring.material.opacity = Math.max(0, 0.9 - ringT * 3); ring.scale.setScalar(1 + ringT * 12); camera.getWorldPosition(headW); ring.lookAt(headW); // dust const dn = Math.min(DUST, Math.round(params.dust)); dustGeo.setDrawRange(0, dn); bloom.strength = params.glow; cone.material.opacity = 0.028 * params.haze; cone.visible = params.haze > 0.001; for (let i = 0; i < dn; i++) { const s = dustSeed[i * 4 + 3]; dustPos[i * 3] = dustSeed[i * 4] + Math.sin(time * 0.11 + s) * 0.25; dustPos[i * 3 + 1] = dustSeed[i * 4 + 1] + Math.sin(time * 0.17 + s * 1.3) * 0.2; dustPos[i * 3 + 2] = dustSeed[i * 4 + 2] + Math.cos(time * 0.09 + s * 0.7) * 0.25; } dustGeo.attributes.position.needsUpdate = true; // camera shake = Math.max(0, shake - dt * 3); camX += (pb.x * 0.18 - camX) * (1 - Math.exp(-dt * 3)); if (!vrOn) { camera.position.set( camBase.x + camX + (Math.random() - 0.5) * shake * 0.02, camBase.y + Math.sin(time * 0.4) * 0.01 + (Math.random() - 0.5) * shake * 0.02, camBase.z ); camera.lookAt(lookT.x + camX * 0.3, lookT.y, lookT.z); } if (hudDirty) drawHud(); }, render() { composer.render(); renderer.autoClear = false; renderer.clearDepth(); renderer.render(hudScene, hudCam); renderer.autoClear = true; }, resize({ width, height }) { composer.setSize(width, height); bloom.setSize(width, height); layout(); sizeHud(); }, dispose() { canvas.removeEventListener('pointerdown', onDown); window.removeEventListener('keydown', onKey); hudTex.dispose(); pmrem.dispose(); }, }; }