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'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js'; export const xr = 'vr'; const SFX = { thrust: 'sfx_NqLLfFn4WQfs', hum: 'sfx_BpXD4PgVI5Cn', clamp: 'sfx_LUakeXalyelj', impact: 'sfx_dlGumSvbZWUW', alarm: 'sfx_coESf78yTutJ', chime: 'sfx_VUND39CCsHSD', }; const TEX = { hull: 'tex_OvCaq7PnWa80', rock: 'tex_lB6lU4bvsNkc', nebula: 'tex_ONQfP9Tfkhss' }; export default function sketch(ctx) { const { scene, camera, renderer, gui, size, canvas } = ctx; const XR = ctx.xr || null; const sfx = ctx.sfx || null; const touchScreen = typeof matchMedia !== 'undefined' && matchMedia('(pointer: coarse)').matches; const PI = Math.PI; const params = { startLevel: 1, assist: true, rollPower: 1, glow: 0.9, accent: '#38e1ff', volume: 0.7, restart: () => startLevel(G.state === 'title' ? params.startLevel : G.level), }; if (sfx) sfx.volume = params.volume; // ---------- renderer / scene ---------- renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.1; scene.background = new THREE.Color('#02030a'); scene.fog = new THREE.FogExp2('#050812', 0.0045); const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; scene.environmentIntensity = 0.25; const sun = new THREE.DirectionalLight('#ffe2bf', 3.2); sun.position.set(30, 22, 25); const fill = new THREE.DirectionalLight('#4a6cff', 0.8); fill.position.set(-25, -12, -10); scene.add(sun, fill, new THREE.HemisphereLight('#7fa8ff', '#120a08', 0.6)); const rig = (XR && XR.rig) ? XR.rig : (() => { const g = new THREE.Group(); scene.add(g); return g; })(); function getTex(id, rep) { try { const t = ctx.textures && ctx.textures.get(id, rep ? { repeat: rep } : undefined); return t || null; } catch (e) { return null; } } function cloneRep(t, rx, ry) { if (!t) return null; const c = t.clone(); c.wrapS = c.wrapT = THREE.RepeatWrapping; c.repeat.set(rx, ry); c.needsUpdate = true; return c; } const hullBase = getTex(TEX.hull, 1); const rockTex = getTex(TEX.rock, 2); const nebTex = getTex(TEX.nebula); // ---------- backdrop ---------- if (nebTex) { const neb = new THREE.Mesh(new THREE.PlaneGeometry(2600, 1733), new THREE.MeshBasicMaterial({ map: nebTex, color: '#7c8296', fog: false, depthWrite: false })); neb.position.set(0, 80, -1150); scene.add(neb); } { const N = 2600, p = new Float32Array(N * 3), c = new Float32Array(N * 3); const col = new THREE.Color(); for (let i = 0; i < N; i++) { const u = Math.random() * 2 - 1, th = Math.random() * PI * 2, r = 850 + Math.random() * 120; const s = Math.sqrt(1 - u * u); p[i * 3] = Math.cos(th) * s * r; p[i * 3 + 1] = u * r; p[i * 3 + 2] = Math.sin(th) * s * r; col.setHSL(0.55 + Math.random() * 0.12, 0.4, 0.55 + Math.random() * 0.4); c[i * 3] = col.r; c[i * 3 + 1] = col.g; c[i * 3 + 2] = col.b; } const g = new THREE.BufferGeometry(); g.setAttribute('position', new THREE.BufferAttribute(p, 3)); g.setAttribute('color', new THREE.BufferAttribute(c, 3)); scene.add(new THREE.Points(g, new THREE.PointsMaterial({ size: 1.6, sizeAttenuation: false, vertexColors: true, fog: false, depthWrite: false }))); } // ---------- station ---------- const SW = 3.6, SH = 1.6, FACE = 4; const stationRoot = new THREE.Group(); stationRoot.position.set(0, 1.6, 0); const spin = new THREE.Group(); stationRoot.add(spin); scene.add(stationRoot); const hullMat = new THREE.MeshStandardMaterial({ map: cloneRep(hullBase, 6, 2), color: '#c9ced6', metalness: 0.55, roughness: 0.5 }); const capMat = new THREE.MeshStandardMaterial({ map: cloneRep(hullBase, 0.25, 0.25), color: '#b9c0ca', metalness: 0.55, roughness: 0.5 }); const ringMat = new THREE.MeshStandardMaterial({ map: cloneRep(hullBase, 28, 1.5), color: '#d3d7dd', metalness: 0.5, roughness: 0.5 }); const darkMetal = new THREE.MeshStandardMaterial({ color: '#2a303a', metalness: 0.7, roughness: 0.45 }); const hub = new THREE.Mesh(new THREE.CylinderGeometry(5, 5, 8, 64, 1, true), hullMat); hub.rotation.x = PI / 2; spin.add(hub); { const shape = new THREE.Shape(); shape.absarc(0, 0, 5, 0, PI * 2, false); const hole = new THREE.Path(); hole.moveTo(-SW / 2, -SH / 2); hole.lineTo(-SW / 2, SH / 2); hole.lineTo(SW / 2, SH / 2); hole.lineTo(SW / 2, -SH / 2); hole.lineTo(-SW / 2, -SH / 2); shape.holes.push(hole); const front = new THREE.Mesh(new THREE.ShapeGeometry(shape, 64), capMat); front.position.z = FACE; spin.add(front); const back = new THREE.Mesh(new THREE.CircleGeometry(5, 64), capMat); back.position.z = -FACE; back.rotation.y = PI; spin.add(back); // rim bands const band = new THREE.Mesh(new THREE.TorusGeometry(5.02, 0.18, 10, 80), darkMetal); band.position.z = FACE - 0.1; spin.add(band); const band2 = band.clone(); band2.position.z = -FACE + 0.1; spin.add(band2); } // hangar tunnel const tunnelMat = new THREE.MeshStandardMaterial({ color: '#1c222c', metalness: 0.6, roughness: 0.6, side: THREE.DoubleSide }); const TD = 7, tz = FACE - TD / 2; { const top = new THREE.Mesh(new THREE.PlaneGeometry(SW, TD), tunnelMat); top.rotation.x = PI / 2; top.position.set(0, SH / 2, tz); const bot = new THREE.Mesh(new THREE.PlaneGeometry(SW, TD), tunnelMat); bot.rotation.x = -PI / 2; bot.position.set(0, -SH / 2, tz); const lw = new THREE.Mesh(new THREE.PlaneGeometry(TD, SH), tunnelMat); lw.rotation.y = PI / 2; lw.position.set(-SW / 2, 0, tz); const rw = new THREE.Mesh(new THREE.PlaneGeometry(TD, SH), tunnelMat); rw.rotation.y = -PI / 2; rw.position.set(SW / 2, 0, tz); const pad = new THREE.Mesh(new THREE.PlaneGeometry(SW, SH), new THREE.MeshStandardMaterial({ color: '#0b1118', emissive: '#9fdcff', emissiveIntensity: 1.2 })); pad.position.z = FACE - TD; spin.add(top, bot, lw, rw, pad); } const accentMat = new THREE.MeshStandardMaterial({ color: '#000000', emissive: params.accent, emissiveIntensity: 3 }); for (const sx of [-1, 1]) for (const sy of [-1, 1]) { const s = new THREE.Mesh(new THREE.BoxGeometry(0.06, 0.06, TD), accentMat); s.position.set(sx * (SW / 2 - 0.05), sy * (SH / 2 - 0.05), tz); spin.add(s); } const chase = []; for (let i = 0; i < 7; i++) { const m = new THREE.MeshStandardMaterial({ color: '#000000', emissive: '#ffb347', emissiveIntensity: 0.3 }); const b = new THREE.Mesh(new THREE.BoxGeometry(1.4, 0.03, 0.14), m); b.position.set(0, -SH / 2 + 0.02, FACE - 0.4 - i * 0.9); spin.add(b); chase.push(m); } const bayLight = new THREE.PointLight(params.accent, 25, 14, 2); bayLight.position.set(0, 0, FACE - 2); spin.add(bayLight); // slot frame const frameMat = new THREE.MeshStandardMaterial({ color: '#000000', emissive: '#ff4d5e', emissiveIntensity: 3 }); { const t = 0.14; const a = new THREE.Mesh(new THREE.BoxGeometry(SW + 2 * t, t, 0.22), frameMat); a.position.set(0, SH / 2 + t / 2, FACE + 0.06); const b = a.clone(); b.position.y = -SH / 2 - t / 2; const c = new THREE.Mesh(new THREE.BoxGeometry(t, SH, 0.22), frameMat); c.position.set(-SW / 2 - t / 2, 0, FACE + 0.06); const d = c.clone(); d.position.x = SW / 2 + t / 2; spin.add(a, b, c, d); } const beaconMat = new THREE.MeshStandardMaterial({ color: '#000000', emissive: '#ff3344', emissiveIntensity: 2 }); for (let i = 0; i < 8; i++) { const a = (i / 8) * PI * 2 + PI / 8; const s = new THREE.Mesh(new THREE.SphereGeometry(0.16, 12, 8), beaconMat); s.position.set(Math.cos(a) * 4.5, Math.sin(a) * 4.5, FACE + 0.12); spin.add(s); } // ring, spokes, windows spin.add(new THREE.Mesh(new THREE.TorusGeometry(14, 1.2, 24, 140), ringMat)); for (let i = 0; i < 4; i++) { const a = i * PI / 2 + PI / 4; const sp = new THREE.Mesh(new THREE.CylinderGeometry(0.42, 0.42, 9, 14), darkMetal); sp.position.set(Math.cos(a) * 9.5, Math.sin(a) * 9.5, 0); sp.rotation.z = a - PI / 2; spin.add(sp); } { const winMat = new THREE.MeshStandardMaterial({ color: '#000000', emissive: '#ffd59a', emissiveIntensity: 2.2 }); const W = 72, win = new THREE.InstancedMesh(new THREE.BoxGeometry(0.55, 0.22, 0.05), winMat, W); const d = new THREE.Object3D(); for (let i = 0; i < W; i++) { const a = (i / W) * PI * 2; d.position.set(Math.cos(a) * 14, Math.sin(a) * 14, 1.18); d.rotation.set(0, 0, a + PI / 2); d.updateMatrix(); win.setMatrixAt(i, d.matrix); } spin.add(win); } { const mod = new THREE.Mesh(new THREE.CylinderGeometry(2.4, 2.4, 6, 40), hullMat); mod.rotation.x = PI / 2; mod.position.z = -7; spin.add(mod); const panelMat = new THREE.MeshStandardMaterial({ color: '#16224a', metalness: 0.85, roughness: 0.25, emissive: '#0a1430', emissiveIntensity: 0.6 }); for (const sx of [-1, 1]) { const truss = new THREE.Mesh(new THREE.BoxGeometry(5, 0.25, 0.25), darkMetal); truss.position.set(sx * 4.6, 0, -8); spin.add(truss); for (let k = 0; k < 3; k++) { const pn = new THREE.Mesh(new THREE.BoxGeometry(3.6, 0.08, 3.8), panelMat); pn.position.set(sx * (8.6 + k * 3.8), 0, -8); spin.add(pn); } } const ant = new THREE.Mesh(new THREE.CylinderGeometry(0.06, 0.06, 4, 6), darkMetal); ant.rotation.x = PI / 2; ant.position.z = -12; spin.add(ant); const tip = new THREE.Mesh(new THREE.SphereGeometry(0.2, 10, 8), beaconMat); tip.position.z = -14; spin.add(tip); } // holographic approach guides (do not spin) const guideMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(params.accent).multiplyScalar(1.6), transparent: true, opacity: 0.45, blending: THREE.AdditiveBlending, depthWrite: false, fog: false }); const guides = []; for (let i = 0; i < 3; i++) { const g = new THREE.Group(), t = 0.05, w = SW, h = SH; const a = new THREE.Mesh(new THREE.BoxGeometry(w + t, t, t), guideMat); a.position.y = h / 2; const b = a.clone(); b.position.y = -h / 2; const c = new THREE.Mesh(new THREE.BoxGeometry(t, h, t), guideMat); c.position.x = -w / 2; const d = c.clone(); d.position.x = w / 2; g.add(a, b, c, d); g.position.z = FACE + 6 + i * 7; g.scale.setScalar(1 + i * 0.35); stationRoot.add(g); guides.push(g); } // ---------- asteroids and junk ---------- const MAX_AST = 90, MAX_JUNK = 60; const astGeo = (() => { const g = new THREE.IcosahedronGeometry(1, 3), n = new ImprovedNoise(), pos = g.attributes.position, v = new THREE.Vector3(); for (let i = 0; i < pos.count; i++) { v.fromBufferAttribute(pos, i); const k = 1 + n.noise(v.x * 1.5, v.y * 1.5, v.z * 1.5) * 0.4 + n.noise(v.x * 4 + 9, v.y * 4, v.z * 4) * 0.12; v.multiplyScalar(k); pos.setXYZ(i, v.x, v.y, v.z); } g.computeVertexNormals(); return g; })(); const astMesh = new THREE.InstancedMesh(astGeo, new THREE.MeshStandardMaterial({ map: rockTex, color: '#a39484', roughness: 0.95, metalness: 0.05, flatShading: true }), MAX_AST); const junkMesh = new THREE.InstancedMesh(new THREE.BoxGeometry(1.6, 0.22, 0.9), new THREE.MeshStandardMaterial({ map: cloneRep(hullBase, 1, 0.6), color: '#b7a88f', metalness: 0.7, roughness: 0.45 }), MAX_JUNK); astMesh.count = 0; junkMesh.count = 0; astMesh.frustumCulled = false; junkMesh.frustumCulled = false; scene.add(astMesh, junkMesh); const tmpCol = new THREE.Color(); function mkObj(kind) { return { kind, p: new THREE.Vector3(), v: new THREE.Vector3(), axis: new THREE.Vector3(0, 1, 0), ang: 0, spin: 0, s: new THREE.Vector3(1, 1, 1), r: 1 }; } const asts = Array.from({ length: MAX_AST }, () => mkObj('ast')); const junk = Array.from({ length: MAX_JUNK }, () => mkObj('junk')); for (let i = 0; i < MAX_AST; i++) { tmpCol.setHSL(0.07, 0.15, 0.35 + Math.random() * 0.3); astMesh.setColorAt(i, tmpCol); } for (let i = 0; i < MAX_JUNK; i++) { tmpCol.setHSL(Math.random() < 0.5 ? 0.08 : 0.58, 0.2, 0.5 + Math.random() * 0.3); junkMesh.setColorAt(i, tmpCol); } const rand = (a, b) => a + Math.random() * (b - a); let cfg = null; function spawn(o, initial) { const dir = Math.random() < 0.5 ? -1 : 1; o.p.set(initial ? rand(-19, 19) : -dir * 20, 1.6 + rand(-9, 9) * (Math.random() < 0.5 ? 0.45 : 1), rand(FACE + 5, 40)); o.v.set(dir * rand(0.5, 1.2) * cfg.drift, rand(-0.2, 0.2), rand(-0.15, 0.15)); o.axis.set(rand(-1, 1), rand(-1, 1), rand(-1, 1)).normalize(); if (o.axis.lengthSq() < 0.01) o.axis.set(0, 1, 0); o.ang = rand(0, 6.28); o.spin = rand(-1.2, 1.2); if (o.kind === 'ast') { const k = rand(0.5, 1.6); o.s.set(k, k * rand(0.75, 1), k * rand(0.8, 1.1)); o.r = k * 1.05; } else { const k = rand(0.5, 1.3); o.s.set(k * rand(0.6, 1.6), k, k * rand(0.6, 1.4)); o.r = k * 0.9 * Math.max(o.s.x / k, 1) * 0.8; } } // sparks const SPARKS = 80; const sparkPos = new Float32Array(SPARKS * 3), sparkVel = new Float32Array(SPARKS * 3); let sparkLife = 0; const sparkGeo = new THREE.BufferGeometry(); sparkGeo.setAttribute('position', new THREE.BufferAttribute(sparkPos, 3)); const sparkMat = new THREE.PointsMaterial({ color: '#ffb066', size: 0.12, transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false }); const sparks = new THREE.Points(sparkGeo, sparkMat); sparks.frustumCulled = false; scene.add(sparks); function burst(at) { for (let i = 0; i < SPARKS; i++) { sparkPos[i * 3] = at.x; sparkPos[i * 3 + 1] = at.y; sparkPos[i * 3 + 2] = at.z; const u = rand(-1, 1), th = rand(0, 6.28), s = Math.sqrt(1 - u * u), sp = rand(1, 5); sparkVel[i * 3] = Math.cos(th) * s * sp; sparkVel[i * 3 + 1] = u * sp; sparkVel[i * 3 + 2] = Math.sin(th) * s * sp; } sparkLife = 1; } // space dust for motion cues const DUST = 320, dustPos = new Float32Array(DUST * 3); for (let i = 0; i < DUST; i++) { dustPos[i * 3] = rand(-15, 15); dustPos[i * 3 + 1] = rand(-15, 15) + 1.6; dustPos[i * 3 + 2] = rand(-15, 15) + 45; } const dustGeo = new THREE.BufferGeometry(); dustGeo.setAttribute('position', new THREE.BufferAttribute(dustPos, 3)); const dust = new THREE.Points(dustGeo, new THREE.PointsMaterial({ color: '#8fb4ff', size: 0.035, transparent: true, opacity: 0.6, depthWrite: false })); dust.frustumCulled = false; scene.add(dust); // ---------- cockpit (in rig) ---------- const cockpit = new THREE.Group(); rig.add(cockpit); const dashMat = new THREE.MeshStandardMaterial({ color: '#1a1f27', metalness: 0.6, roughness: 0.5 }); const dash = new THREE.Mesh(new THREE.BoxGeometry(1.5, 0.08, 0.5), dashMat); dash.position.set(0, 0.95, -0.6); cockpit.add(dash); for (const sx of [-1, 1]) { const pil = new THREE.Mesh(new THREE.BoxGeometry(0.06, 1.5, 0.06), dashMat); pil.position.set(sx * 0.78, 1.65, -0.75); pil.rotation.z = sx * 0.18; pil.rotation.x = 0.25; cockpit.add(pil); } const trim = new THREE.Mesh(new THREE.BoxGeometry(1.5, 0.015, 0.015), accentMat); trim.position.set(0, 0.995, -0.36); cockpit.add(trim); const panelCanvas = document.createElement('canvas'); panelCanvas.width = 1024; panelCanvas.height = 512; const pctx = panelCanvas.getContext('2d'); const panelTex = new THREE.CanvasTexture(panelCanvas); panelTex.colorSpace = THREE.SRGBColorSpace; const panel = new THREE.Mesh(new THREE.PlaneGeometry(0.84, 0.42), new THREE.MeshBasicMaterial({ map: panelTex, transparent: true, toneMapped: false })); panel.position.set(0, 1.13, -0.66); panel.rotation.x = -0.55; cockpit.add(panel); const msgCanvas = document.createElement('canvas'); msgCanvas.width = 1024; msgCanvas.height = 256; const mctx = msgCanvas.getContext('2d'); const msgTex = new THREE.CanvasTexture(msgCanvas); msgTex.colorSpace = THREE.SRGBColorSpace; const msgPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.8, 0.45), new THREE.MeshBasicMaterial({ map: msgTex, transparent: true, toneMapped: false, depthTest: false })); msgPlane.position.set(0, 2.1, -2.6); msgPlane.renderOrder = 998; rig.add(msgPlane); const fadeMat = new THREE.MeshBasicMaterial({ color: '#000000', transparent: true, opacity: 0, side: THREE.BackSide, depthTest: false, depthWrite: false }); const fader = new THREE.Mesh(new THREE.SphereGeometry(1.2, 16, 12), fadeMat); fader.position.set(0, 1.6, 0); fader.renderOrder = 999; rig.add(fader); // ---------- 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.8); composer.addPass(bloom); composer.addPass(new OutputPass()); // ---------- screen HUD overlay ---------- const hudCanvas = document.createElement('canvas'); const hctx = hudCanvas.getContext('2d'); let hudTex = new THREE.CanvasTexture(hudCanvas); const hudMat = new THREE.MeshBasicMaterial({ map: hudTex, transparent: true, depthTest: false, depthWrite: false, toneMapped: false }); const hudScene = new THREE.Scene(); const hudCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); hudScene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), hudMat)); let W = 1, H = 1, hp = 1; const buttons = { rollL: {}, rollR: {}, fwd: {}, back: {} }; const stickPad = { cx: 0, cy: 0, r: 70 }; function layout() { W = Math.max(1, size.width); H = Math.max(1, size.height); hp = Math.min(size.pixelRatio || 1, 1.5); hudCanvas.width = Math.round(W * hp); hudCanvas.height = Math.round(H * hp); hudTex.dispose(); hudTex = new THREE.CanvasTexture(hudCanvas); hudTex.colorSpace = THREE.SRGBColorSpace; hudMat.map = hudTex; hudMat.needsUpdate = true; const b = Math.max(58, Math.min(78, W * 0.19)), g = 14, m = 22, bm = 28; buttons.rollR = { x: W - m - b, y: H - bm - b, w: b, h: b, label: 'ROLL ▶' }; buttons.rollL = { x: W - m - 2 * b - g, y: H - bm - b, w: b, h: b, label: '◀ ROLL' }; buttons.fwd = { x: W - m - b, y: H - bm - 2 * b - g, w: b, h: b, label: 'THRUST' }; buttons.back = { x: W - m - 2 * b - g, y: H - bm - 2 * b - g, w: b, h: b, label: 'BRAKE' }; stickPad.r = Math.max(52, Math.min(72, W * 0.15)); stickPad.cx = 24 + stickPad.r + 10; stickPad.cy = H - bm - stickPad.r - 10; } layout(); // ---------- sound ---------- function play(id, o) { try { return sfx ? sfx.play(id, o) : null; } catch (e) { return null; } } let thrustVoice = null, humVoice = null; try { if (sfx) { thrustVoice = sfx.loop(SFX.thrust, { volume: 0 }); humVoice = sfx.loop(SFX.hum, { volume: 0.25 }); } } catch (e) {} let thrustVol = 0; // ---------- game state ---------- const G = { state: 'title', level: 1, hull: 3, stateT: 0, relAngle: 0, stationRate: 0.12, playerRate: 0, msg: '', sub: '', msgT: 0, flash: 0, shake: 0, invuln: 0, alarmCd: 0, clamped: false, time: 0 }; const vel = new THREE.Vector3(); const START = new THREE.Vector3(0, 0, 45); const eye = new THREE.Vector3(), local = new THREE.Vector3(), tmp = new THREE.Vector3(), proj = new THREE.Vector3(); let prevLocalZ = 99; const T = { range: 0, closing: 0, delta: 0, ang: 0, angleOK: false, spinOK: false, speedOK: true, lateral: 0 }; function levelCfg(L) { return { rate: Math.min(0.12 + 0.06 * (L - 1), 0.62) * (L % 2 ? 1 : -1), ast: Math.min(MAX_AST, 3 + (L - 1) * 9), junk: Math.min(MAX_JUNK, (L - 1) * 6), drift: 0.8 + 0.35 * L, sway: Math.max(0, Math.min(3, (L - 3) * 0.8)), }; } function setupLevel(L) { G.level = L; cfg = levelCfg(L); G.stationRate = cfg.rate; G.playerRate = 0; G.relAngle = rand(0.5, PI - 0.5); rig.position.copy(START); vel.set(0, 0, 0); prevLocalZ = 99; for (let i = 0; i < cfg.ast; i++) spawn(asts[i], true); for (let i = 0; i < cfg.junk; i++) spawn(junk[i], true); astMesh.count = cfg.ast; junkMesh.count = cfg.junk; if (astMesh.instanceColor) astMesh.instanceColor.needsUpdate = true; if (junkMesh.instanceColor) junkMesh.instanceColor.needsUpdate = true; } function message(m, s, t) { G.msg = m; G.sub = s || ''; G.msgT = t || 2.5; } function startLevel(L) { setupLevel(L); G.hull = 3; G.state = 'fly'; G.stateT = 0; G.invuln = 1.5; G.clamped = false; const n = cfg.ast + cfg.junk; message('LEVEL ' + L, n ? n + ' OBJECTS IN APPROACH' : 'MATCH SPIN · ALIGN · DOCK', 3); } function onAction() { if (G.state === 'title') startLevel(params.startLevel); else if (G.state === 'dead' && G.stateT > 1) startLevel(G.level); } setupLevel(params.startLevel); function pulseAll(s, ms) { if (!XR || !XR.controllers) return; for (const c of XR.controllers) { try { if (c && c.connected && c.pulse) c.pulse(s, ms); } catch (e) {} } } function damage(reason, at) { if (G.invuln > 0 || G.state !== 'fly') return; G.hull--; G.invuln = 1.4; G.flash = 1; G.shake = 1; play(SFX.impact, { volume: 0.9, rate: rand(0.85, 1.1) }); pulseAll(1, 180); if (at) burst(at); if (G.hull <= 0) { G.state = 'dead'; G.stateT = 0; message('HULL BREACH', 'RESTARTING LEVEL ' + G.level, 99); play(SFX.alarm, { volume: 0.8 }); } else { message(reason, 'HULL ' + G.hull + ' / 3', 2); if (G.hull === 1) play(SFX.alarm, { volume: 0.7 }); } } const wrapHalf = (a) => ((((a + PI / 2) % PI) + PI) % PI) - PI / 2; // ---------- input ---------- const keys = new Set(); const onKeyDown = (e) => { keys.add(e.code); if (e.code === 'Space' || e.code === 'Enter') onAction(); if (['Space', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.code)) e.preventDefault(); }; const onKeyUp = (e) => keys.delete(e.code); window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp); canvas.style.touchAction = 'none'; const held = new Map(); // pointerId -> button key const stick = { id: null, x: 0, y: 0 }; function localXY(e) { const r = canvas.getBoundingClientRect(); return [(e.clientX - r.left) * (W / Math.max(1, r.width)), (e.clientY - r.top) * (H / Math.max(1, r.height))]; } function hitButton(x, y) { for (const k in buttons) { const b = buttons[k]; if (x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) return k; } return null; } const onDown = (e) => { if (G.state === 'title' || G.state === 'dead') { onAction(); return; } if (!touchScreen || G.state !== 'fly') return; const [x, y] = localXY(e); const b = hitButton(x, y); if (b) { held.set(e.pointerId, b); return; } if (x < W * 0.5 && stick.id === null) { stick.id = e.pointerId; updStick(x, y); } }; function updStick(x, y) { let dx = (x - stickPad.cx) / stickPad.r, dy = (y - stickPad.cy) / stickPad.r; const l = Math.hypot(dx, dy); if (l > 1) { dx /= l; dy /= l; } stick.x = dx; stick.y = dy; } const onMove = (e) => { if (e.pointerId === stick.id) { const [x, y] = localXY(e); updStick(x, y); } else if (held.has(e.pointerId)) { const [x, y] = localXY(e); const b = hitButton(x, y); if (b) held.set(e.pointerId, b); } }; const onUp = (e) => { held.delete(e.pointerId); if (e.pointerId === stick.id) { stick.id = null; stick.x = 0; stick.y = 0; } }; canvas.addEventListener('pointerdown', onDown); canvas.addEventListener('pointermove', onMove); canvas.addEventListener('pointerup', onUp); canvas.addEventListener('pointercancel', onUp); const offs = []; if (XR && XR.on) { try { offs.push(XR.on('select', () => onAction())); } catch (e) {} } function heldBtn(k) { for (const v of held.values()) if (v === k) return true; return false; } const inp = { x: 0, y: 0, z: 0, roll: 0, brake: false }; function readInput() { let x = 0, y = 0, z = 0, roll = 0, brake = false; if (keys.has('KeyA')) x -= 1; if (keys.has('KeyD')) x += 1; if (keys.has('KeyW')) z += 1; if (keys.has('KeyS')) z -= 1; if (keys.has('ArrowUp') || keys.has('KeyR')) y += 1; if (keys.has('ArrowDown') || keys.has('KeyF')) y -= 1; if (keys.has('KeyQ') || keys.has('ArrowLeft')) roll += 1; if (keys.has('KeyE') || keys.has('ArrowRight')) roll -= 1; if (keys.has('Space')) brake = true; if (stick.id !== null) { x += stick.x; y -= stick.y; } if (heldBtn('fwd')) z += 1; if (heldBtn('back')) brake = true; if (heldBtn('rollL')) roll += 1; if (heldBtn('rollR')) roll -= 1; if (XR && XR.presenting) { const L = XR.left, R = XR.right; const dz = (v) => (Math.abs(v) < 0.15 ? 0 : v); if (L) { x += dz(L.stick ? L.stick.x : 0); z += dz(L.stick ? L.stick.y : 0); if ((L.trigger || 0) > 0.3) brake = true; if ((L.squeeze || 0) > 0.3) roll += 0.5; } if (R) { roll -= dz(R.stick ? R.stick.x : 0); y += dz(R.stick ? R.stick.y : 0); z += (R.trigger || 0); if ((R.squeeze || 0) > 0.3) roll -= 0.5; if (R.a) brake = true; } } inp.x = THREE.MathUtils.clamp(x, -1, 1); inp.y = THREE.MathUtils.clamp(y, -1, 1); inp.z = THREE.MathUtils.clamp(z, -1, 1); inp.roll = THREE.MathUtils.clamp(roll, -1, 1); inp.brake = brake; } // ---------- gui ---------- gui.add(params, 'startLevel', 1, 12, 1).name('Start level').onChange((v) => { if (G.state === 'title') setupLevel(v); }); gui.add(params, 'assist').name('Spin assist'); gui.add(params, 'rollPower', 0.4, 2).name('Roll power'); gui.add(params, 'glow', 0, 2).name('Glow'); gui.addColor(params, 'accent').name('Hangar light').onChange((v) => { accentMat.emissive.set(v); bayLight.color.set(v); guideMat.color.set(v).multiplyScalar(1.6); }); gui.add(params, 'volume', 0, 1).name('Sound volume').onChange((v) => { if (sfx) sfx.volume = v; }); gui.add(params, 'restart').name('Restart level'); // ---------- HUD drawing ---------- const FONT = 'ui-monospace, Menlo, Consolas, monospace'; const col = { ok: '#5dff9a', warn: '#ffb347', bad: '#ff4d5e', ink: '#cfe9ff', dim: 'rgba(160,200,230,0.55)' }; function txt(g, s, x, y, px, color, align, weight) { g.font = (weight || 600) + ' ' + px + 'px ' + FONT; g.fillStyle = color; g.textAlign = align || 'left'; g.fillText(s, x, y); } function drawStats(g, x, y, s, right) { txt(g, 'LEVEL ' + String(G.level).padStart(2, '0'), x, y, 22 * s, col.ink, 'left', 700); txt(g, 'HULL', x, y + 30 * s, 14 * s, col.dim); for (let i = 0; i < 3; i++) { g.fillStyle = i < G.hull ? (G.hull === 1 ? col.bad : col.ok) : 'rgba(255,255,255,0.12)'; g.fillRect(x + 52 * s + i * 26 * s, y + 18 * s, 20 * s, 14 * s); } txt(g, 'RANGE ' + T.range.toFixed(1).padStart(5) + ' m', right, y, 18 * s, col.ink, 'right'); txt(g, 'CLOSE ' + T.closing.toFixed(1).padStart(5) + ' m/s', right, y + 28 * s, 18 * s, T.speedOK ? col.ink : (T.range < 15 ? col.bad : col.warn), 'right'); } function drawGauge(g, cx, y, w, s) { const d = THREE.MathUtils.clamp(T.delta / 0.5, -1, 1); g.fillStyle = 'rgba(10,20,30,0.55)'; g.fillRect(cx - w / 2, y, w, 14 * s); g.fillStyle = 'rgba(93,255,154,0.25)'; const okw = (0.06 / 0.5) * w / 2; g.fillRect(cx - okw, y, okw * 2, 14 * s); g.fillStyle = 'rgba(255,255,255,0.5)'; g.fillRect(cx - 1, y - 4 * s, 2, 22 * s); g.fillStyle = T.spinOK ? col.ok : col.warn; g.fillRect(cx + d * w / 2 - 3 * s, y - 6 * s, 6 * s, 26 * s); let hint = 'SPIN MATCHED'; if (!T.spinOK) hint = T.delta > 0 ? '◀ ROLL LEFT' : 'ROLL RIGHT ▶'; txt(g, 'SPIN Δ ' + (T.delta >= 0 ? '+' : '') + T.delta.toFixed(2), cx - w / 2, y - 12 * s, 15 * s, col.dim); txt(g, hint, cx + w / 2, y - 12 * s, 15 * s, T.spinOK ? col.ok : col.warn, 'right', 700); // alignment dial const ax = cx, ay = y + 58 * s, r = 24 * s; g.strokeStyle = 'rgba(255,255,255,0.25)'; g.lineWidth = 2 * s; g.beginPath(); g.arc(ax, ay, r, 0, PI * 2); g.stroke(); g.beginPath(); g.moveTo(ax - r - 8 * s, ay); g.lineTo(ax - r + 4 * s, ay); g.moveTo(ax + r - 4 * s, ay); g.lineTo(ax + r + 8 * s, ay); g.stroke(); g.save(); g.translate(ax, ay); g.rotate(-T.ang); g.fillStyle = T.angleOK ? col.ok : col.bad; g.fillRect(-r * 0.8, -4 * s, r * 1.6, 8 * s); g.restore(); txt(g, 'ALIGN ' + Math.round(Math.abs(T.ang) * 180 / PI) + '°', ax - r - 16 * s, ay + 6 * s, 15 * s, T.angleOK ? col.ok : col.dim, 'right'); txt(g, T.lateral < 0.8 ? 'CENTRED' : 'OFF AXIS ' + T.lateral.toFixed(1) + 'm', ax + r + 16 * s, ay + 6 * s, 15 * s, T.lateral < 0.8 ? col.ok : col.warn, 'left'); } function drawMsg(g, cx, cy, s) { if (G.msgT <= 0 && G.state !== 'title') return; const a = Math.min(1, G.msgT * 2); g.globalAlpha = G.state === 'title' ? 1 : a; let m = G.msg, sub = G.sub; if (G.state === 'title') { m = 'ORBITAL DOCK'; sub = ctx.rendering ? 'MATCH THE SPIN · THREAD THE HANGAR' : (XR && XR.presenting ? 'PULL TRIGGER TO LAUNCH' : (touchScreen ? 'TAP TO LAUNCH' : 'CLICK OR PRESS SPACE TO LAUNCH')); } g.shadowColor = 'rgba(0,0,0,0.8)'; g.shadowBlur = 12 * s; txt(g, m, cx, cy, 52 * s, G.state === 'dead' ? col.bad : col.ink, 'center', 800); if (sub) txt(g, sub, cx, cy + 40 * s, 18 * s, col.dim, 'center', 600); if (G.state === 'dead' && G.stateT > 1 && !ctx.rendering) txt(g, XR && XR.presenting ? 'PULL TRIGGER TO RETRY' : (touchScreen ? 'TAP TO RETRY' : 'PRESS SPACE TO RETRY'), cx, cy + 70 * s, 16 * s, col.warn, 'center'); g.shadowBlur = 0; g.globalAlpha = 1; } function drawScreenHud() { const g = hctx; g.setTransform(hp, 0, 0, hp, 0, 0); g.clearRect(0, 0, W, H); if (G.flash > 0) { g.fillStyle = 'rgba(255,40,50,' + (G.flash * 0.3).toFixed(3) + ')'; g.fillRect(0, 0, W, H); } const s = Math.max(0.6, Math.min(1.3, Math.min(W, H) / 720)); const playing = G.state === 'fly' || G.state === 'docking'; if (playing) { drawStats(g, 24, 40 * s, s, W - 24); const gw = Math.min(440 * s, W * 0.6); const gy = touchScreen ? H * 0.16 + 40 * s : H - 110 * s; drawGauge(g, W / 2, gy, gw, s); if (!ctx.rendering) { g.strokeStyle = 'rgba(200,235,255,0.5)'; g.lineWidth = 1.5; const cx = W / 2, cy = H / 2, r = 18 * s; g.beginPath(); g.moveTo(cx - r * 2, cy); g.lineTo(cx - r, cy); g.moveTo(cx + r, cy); g.lineTo(cx + r * 2, cy); g.moveTo(cx, cy - r * 2); g.lineTo(cx, cy - r); g.moveTo(cx, cy + r); g.lineTo(cx, cy + r * 2); g.stroke(); } // hangar marker proj.set(stationRoot.position.x, stationRoot.position.y, stationRoot.position.z + FACE).project(camera); if (proj.z < 1) { const mx = (proj.x * 0.5 + 0.5) * W, my = (-proj.y * 0.5 + 0.5) * H, r = 10 * s; g.strokeStyle = T.angleOK && T.spinOK ? col.ok : col.warn; g.lineWidth = 2; g.beginPath(); g.moveTo(mx, my - r); g.lineTo(mx + r, my); g.lineTo(mx, my + r); g.lineTo(mx - r, my); g.closePath(); g.stroke(); } } drawMsg(g, W / 2, H * 0.3, s); if (touchScreen && !ctx.rendering && G.state === 'fly') { g.strokeStyle = 'rgba(180,220,255,0.35)'; g.lineWidth = 2; g.beginPath(); g.arc(stickPad.cx, stickPad.cy, stickPad.r, 0, PI * 2); g.stroke(); g.fillStyle = stick.id !== null ? 'rgba(56,225,255,0.5)' : 'rgba(180,220,255,0.2)'; g.beginPath(); g.arc(stickPad.cx + stick.x * stickPad.r, stickPad.cy + stick.y * stickPad.r, stickPad.r * 0.38, 0, PI * 2); g.fill(); txt(g, 'STRAFE', stickPad.cx, stickPad.cy - stickPad.r - 10, 12, col.dim, 'center'); for (const k in buttons) { const b = buttons[k], on = heldBtn(k); g.fillStyle = on ? 'rgba(56,225,255,0.45)' : 'rgba(20,35,50,0.5)'; g.strokeStyle = on ? 'rgba(160,240,255,0.9)' : 'rgba(180,220,255,0.35)'; g.beginPath(); g.roundRect ? g.roundRect(b.x, b.y, b.w, b.h, 12) : g.rect(b.x, b.y, b.w, b.h); g.fill(); g.stroke(); txt(g, b.label, b.x + b.w / 2, b.y + b.h / 2 + 5, 12, col.ink, 'center', 700); } } hudTex.needsUpdate = true; } function drawPanel() { const g = pctx; g.clearRect(0, 0, 1024, 512); g.fillStyle = 'rgba(6,14,22,0.82)'; g.fillRect(0, 0, 1024, 512); g.strokeStyle = params.accent; g.lineWidth = 4; g.strokeRect(6, 6, 1012, 500); if (G.flash > 0) { g.fillStyle = 'rgba(255,40,50,' + (G.flash * 0.4).toFixed(3) + ')'; g.fillRect(0, 0, 1024, 512); } if (G.state === 'title') { txt(g, 'ORBITAL DOCK', 512, 170, 64, col.ink, 'center', 800); txt(g, 'LEFT STICK move · RIGHT TRIGGER thrust', 512, 260, 26, col.dim, 'center'); txt(g, 'RIGHT STICK roll ◀▶ & rise · LEFT TRIGGER brake', 512, 300, 26, col.dim, 'center'); txt(g, 'PULL TRIGGER TO LAUNCH', 512, 390, 34, col.warn, 'center', 700); } else { drawStats(g, 40, 70, 2, 984); drawGauge(g, 512, 230, 760, 1.6); } panelTex.needsUpdate = true; } let lastMsgKey = ''; function drawMsgPanel() { const show = G.state === 'title' ? false : G.msgT > 0; msgPlane.visible = !!(XR && XR.presenting) && show; if (!msgPlane.visible) return; const key = G.msg + '|' + G.sub + '|' + Math.round(Math.min(1, G.msgT * 2) * 10) + '|' + (G.state === 'dead' && G.stateT > 1); if (key === lastMsgKey) return; lastMsgKey = key; mctx.clearRect(0, 0, 1024, 256); drawMsg(mctx, 512, 110, 1.6); msgTex.needsUpdate = true; } // ---------- update ---------- let panelTimer = 0; const frameCol = new THREE.Color(), cOk = new THREE.Color(col.ok), cWarn = new THREE.Color(col.warn), cBad = new THREE.Color(col.bad); const dummy = new THREE.Object3D(); function updateObjects(list, mesh, n, dt, checkHit) { for (let i = 0; i < n; i++) { const o = list[i]; o.p.addScaledVector(o.v, dt); o.ang += o.spin * dt; if (Math.abs(o.p.x) > 21) { const vx = o.v.x; spawn(o, false); o.p.x = -Math.sign(vx || 1) * 20; o.v.x = Math.abs(o.v.x) * Math.sign(vx || 1); } if (checkHit) { const rr = o.r + 0.75; if (o.p.distanceToSquared(eye) < rr * rr) { tmp.copy(eye).sub(o.p); const l = tmp.length() || 1; tmp.multiplyScalar(1 / l); vel.addScaledVector(tmp, 3.5); proj.copy(o.p).addScaledVector(tmp, o.r); damage(o.kind === 'ast' ? 'ASTEROID IMPACT' : 'DEBRIS STRIKE', proj); spawn(o, false); } } dummy.position.copy(o.p); dummy.quaternion.setFromAxisAngle(o.axis, o.ang); dummy.scale.copy(o.s); dummy.updateMatrix(); mesh.setMatrixAt(i, dummy.matrix); } mesh.instanceMatrix.needsUpdate = true; } return { update({ time, delta }) { const dt = Math.min(0.05, Math.max(0, delta || 0)); G.time = time; G.stateT += dt; if (G.msgT > 0 && G.msgT < 90) G.msgT -= dt; G.flash = Math.max(0, G.flash - dt * 1.8); G.shake = Math.max(0, G.shake - dt * 2.5); G.invuln = Math.max(0, G.invuln - dt); G.alarmCd = Math.max(0, G.alarmCd - dt); bloom.strength = params.glow; readInput(); // station sway stationRoot.position.x = Math.sin(time * 0.23) * cfg.sway; stationRoot.position.y = 1.6 + Math.cos(time * 0.17) * cfg.sway * 0.5; let thrustAmt = 0; if (G.state === 'fly') { vel.x += inp.x * 3 * dt; vel.y += inp.y * 3 * dt; vel.z -= inp.z * 4 * dt; vel.x *= Math.exp(-0.9 * dt); vel.y *= Math.exp(-0.9 * dt); vel.z *= Math.exp(-0.22 * dt); if (inp.brake) vel.multiplyScalar(Math.exp(-2.8 * dt)); if (vel.length() > 10) vel.setLength(10); rig.position.addScaledVector(vel, dt); rig.position.x = THREE.MathUtils.clamp(rig.position.x, -30, 30); rig.position.y = THREE.MathUtils.clamp(rig.position.y, -30, 30); if (rig.position.z > 70) { rig.position.z = 70; vel.z = Math.min(0, vel.z); } G.playerRate += inp.roll * 0.45 * params.rollPower * dt; G.playerRate = THREE.MathUtils.clamp(G.playerRate, -1.2, 1.2); const d0 = G.stationRate - G.playerRate; if (params.assist && inp.roll === 0 && Math.abs(d0) < 0.03) G.playerRate += d0 * Math.min(1, 3 * dt); thrustAmt = Math.min(1, Math.abs(inp.x) * 0.5 + Math.abs(inp.y) * 0.5 + Math.abs(inp.z) + Math.abs(inp.roll) * 0.6 + (inp.brake ? 0.5 : 0)); } if (G.state === 'docking') G.playerRate = G.stationRate; G.relAngle += (G.stationRate - G.playerRate) * dt; if (params.assist && G.state === 'fly' && Math.abs(G.stationRate - G.playerRate) < 0.02) { const a = wrapHalf(G.relAngle); if (Math.abs(a) < 0.12) G.relAngle -= a * Math.min(1, 1.5 * dt); } spin.rotation.z = G.relAngle; // telemetry eye.set(rig.position.x, rig.position.y + 1.6, rig.position.z); local.copy(eye).sub(stationRoot.position); const c = Math.cos(G.relAngle), s = Math.sin(G.relAngle); const lx = c * local.x + s * local.y, ly = -s * local.x + c * local.y; const rad = Math.hypot(local.x, local.y); T.range = Math.max(0, local.z - FACE); T.closing = -vel.z; T.delta = G.stationRate - G.playerRate; T.ang = wrapHalf(G.relAngle); T.angleOK = Math.abs(T.ang) < 0.14; T.spinOK = Math.abs(T.delta) < 0.06; T.speedOK = T.closing < 3.2; T.lateral = rad; if (G.state === 'fly') { if (T.range < 12 && !T.speedOK && G.alarmCd <= 0) { play(SFX.alarm, { volume: 0.45 }); G.alarmCd = 1.8; } // hangar face if (local.z < FACE + 0.3 && prevLocalZ >= FACE + 0.3 && rad < 5.4) { const inSlot = Math.abs(lx) < SW / 2 - 0.35 && Math.abs(ly) < SH / 2 - 0.3; if (inSlot && T.angleOK && T.spinOK && T.speedOK) { G.state = 'docking'; G.stateT = 0; G.clamped = false; vel.set(0, 0, 0); message('DOCKING', 'CLAMPS ENGAGING', 2.6); } else { const reason = !inSlot ? 'HULL CONTACT' : (!T.spinOK ? 'SPIN MISMATCH' : (!T.angleOK ? 'MISALIGNED' : 'TOO FAST')); proj.set(eye.x, eye.y, stationRoot.position.z + FACE); G.invuln = 0; damage(reason, proj); rig.position.z = stationRoot.position.z + FACE + 1.6 - 0 + 0.6; vel.z = 2.5; } } else if (rad < 5.6 && local.z < FACE + 0.3 && local.z > -11) { tmp.set(local.x, local.y, 0); if (tmp.lengthSq() < 1e-4) tmp.set(1, 0, 0); tmp.normalize(); rig.position.x += tmp.x * 0.8; rig.position.y += tmp.y * 0.8; vel.set(tmp.x * 3, tmp.y * 3, vel.z); damage('HULL CONTACT', eye); } else if (Math.abs(rad - 14) < 1.9 && Math.abs(local.z) < 1.9) { const sgn = local.z >= 0 ? 1 : -1; rig.position.z += sgn * 1; vel.z = sgn * 3; damage('RING CONTACT', eye); } } prevLocalZ = local.z; if (G.state === 'docking') { const k = 1 - Math.exp(-1.6 * dt); tmp.set(stationRoot.position.x, stationRoot.position.y - 1.6, stationRoot.position.z + 0.6); rig.position.lerp(tmp, k); G.relAngle -= wrapHalf(G.relAngle) * Math.min(1, 3 * dt); if (!G.clamped && G.stateT > 1.1) { G.clamped = true; play(SFX.clamp, { volume: 0.9 }); pulseAll(0.6, 250); } if (G.stateT > 2.8) { G.state = 'cleared'; G.stateT = 0; message('DOCKED', 'LEVEL ' + G.level + ' COMPLETE', 3); play(SFX.chime, { volume: 0.8 }); } } else if (G.state === 'cleared') { tmp.set(stationRoot.position.x, stationRoot.position.y - 1.6, stationRoot.position.z + 0.6); rig.position.lerp(tmp, 1 - Math.exp(-2 * dt)); if (G.stateT > 3.2) startLevel(G.level + 1); } else if (G.state === 'dead') { vel.multiplyScalar(Math.exp(-1 * dt)); rig.position.addScaledVector(vel, dt); if (G.stateT > 5) startLevel(G.level); } // fade let fade = 0; if (G.state === 'cleared') fade = THREE.MathUtils.clamp((G.stateT - 2.4) / 0.8, 0, 1); else if (G.state === 'fly' && G.stateT < 0.8) fade = 1 - G.stateT / 0.8; fadeMat.opacity = fade; fader.visible = fade > 0.001; // objects updateObjects(asts, astMesh, cfg.ast, dt, G.state === 'fly'); updateObjects(junk, junkMesh, cfg.junk, dt, G.state === 'fly'); // sparks if (sparkLife > 0) { sparkLife = Math.max(0, sparkLife - dt * 0.9); for (let i = 0; i < SPARKS * 3; i++) { sparkPos[i] += sparkVel[i] * dt; sparkVel[i] *= Math.exp(-1.2 * dt); } sparkGeo.attributes.position.needsUpdate = true; } sparkMat.opacity = sparkLife; // dust wrap for (let i = 0; i < DUST; i++) { for (let a = 0; a < 3; a++) { const e = a === 0 ? eye.x : a === 1 ? eye.y : eye.z; let v = dustPos[i * 3 + a]; if (v - e > 15) v -= 30; else if (v - e < -15) v += 30; dustPos[i * 3 + a] = v; } } dustGeo.attributes.position.needsUpdate = true; // lights and colours const aligned = T.angleOK && T.spinOK; frameCol.copy(aligned ? cOk : (T.spinOK ? cWarn : cBad)); frameMat.emissive.lerp(frameCol, Math.min(1, 6 * dt)); beaconMat.emissiveIntensity = 0.6 + 2.4 * Math.pow(0.5 + 0.5 * Math.sin(time * 4), 6); for (let i = 0; i < chase.length; i++) { const ph = ((time * 1.6 - i * 0.18) % 1 + 1) % 1; chase[i].emissiveIntensity = 0.2 + 3.5 * Math.pow(1 - ph, 8); } for (let i = 0; i < guides.length; i++) guides[i].children[0].material.opacity = 0.25 + 0.25 * (0.5 + 0.5 * Math.sin(time * 2 - i)); // sound const tv = THREE.MathUtils.lerp(thrustVol, thrustAmt * 0.45, Math.min(1, 8 * dt)); if (thrustVoice && Math.abs(tv - thrustVol) > 0.01) { try { thrustVoice.setVolume(tv); } catch (e) {} thrustVol = tv; } else thrustVol = tv; // camera (screen) const presenting = !!(XR && XR.presenting); if (!presenting) { camera.position.copy(eye); const sh = G.shake * 0.02; const px = ctx.pointer && ctx.pointer.inside && !touchScreen ? ctx.pointer.x : 0; const py = ctx.pointer && ctx.pointer.inside && !touchScreen ? ctx.pointer.y : 0; camera.rotation.set(py * 0.06 + (Math.random() - 0.5) * sh, -px * 0.08 + (Math.random() - 0.5) * sh, 0); if (G.state === 'title') camera.rotation.y += Math.sin(time * 0.15) * 0.05; } cockpit.visible = presenting; // HUDs if (!presenting) drawScreenHud(); panelTimer -= dt; if (presenting && panelTimer <= 0) { panelTimer = 1 / 15; drawPanel(); } drawMsgPanel(); }, 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(); }, dispose() { window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); canvas.removeEventListener('pointerdown', onDown); canvas.removeEventListener('pointermove', onMove); canvas.removeEventListener('pointerup', onUp); canvas.removeEventListener('pointercancel', onUp); for (const f of offs) { try { if (typeof f === 'function') f(); } catch (e) {} } try { thrustVoice && thrustVoice.stop(); humVoice && humVoice.stop(); } catch (e) {} hudTex.dispose(); panelTex.dispose(); msgTex.dispose(); pmrem.dispose(); composer.dispose && composer.dispose(); }, }; }