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'; export const xr = ['vr', 'ar']; export default async function sketch(ctx) { const { scene, camera, renderer, gui, size, pointer, sfx, assets, rendering } = ctx; const XR = ctx.xr; const SOUND = { orb: 'sfx_WbFCJUDeERKq', crash: 'sfx_KLqLJnGTHKYF', engine: 'sfx_bxMsnUHJHCGv' }; const hum = sfx?.loop(SOUND.engine, { volume: 0.35 }); const params = { speed: 1, sound: 0.8, density: 0.55, glow: 1, grid: '#ff2bd6', walls: '#27e8ff', sun: '#ffb03a', newRun: () => reset(), }; renderer.toneMapping = THREE.NeutralToneMapping; scene.background = new THREE.Color('#05020c'); camera.near = 0.05; camera.far = 400; const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; scene.environmentIntensity = 0.45; const LANES = 7; const LANE_W = 2; const HALF = ((LANES - 1) / 2) * LANE_W; const FAR = -150; const ROW_GAP = 13; const AR_SCALE = 0.06; const AR_CLIP = -55; // Everything the game shows lives in one group (scaled to a tabletop in AR) const world = new THREE.Group(); scene.add(world); // Floor: a scrolling neon grid that fades into the haze (masked to the track in AR) const floorUniforms = { uOffset: { value: 0 }, uColor: { value: new THREE.Color(params.grid) }, uFade: { value: new THREE.Color('#2a0838') }, uLocal: { value: new THREE.Matrix4() }, uAR: { value: 0 }, }; const floor = new THREE.Mesh( new THREE.PlaneGeometry(400, 400), new THREE.ShaderMaterial({ uniforms: floorUniforms, transparent: true, vertexShader: /* glsl */ ` uniform mat4 uLocal; varying vec3 vGame; void main() { vGame = (uLocal * vec4(position, 1.0)).xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: /* glsl */ ` uniform float uOffset; uniform vec3 uColor; uniform vec3 uFade; uniform float uAR; varying vec3 vGame; void main() { vec2 p = vec2(vGame.x / 2.0 + 0.5, (vGame.z + uOffset) / 2.0); vec2 w = fwidth(p); vec2 l = 1.0 - smoothstep(w, w * 2.0, 0.5 - abs(fract(p) - 0.5)); float line = max(l.x, l.y); float dist = -vGame.z; float fade = exp(-max(dist, 0.0) * 0.018); vec3 col = uColor * line * 1.6 * fade + uFade * (1.0 - fade) * 0.55; col += uFade * 0.25 * fade; float alpha = 1.0; if (uAR > 0.5) { float mask = (1.0 - smoothstep(${(HALF + 0.4).toFixed(1)}, ${(HALF + 1.8).toFixed(1)}, abs(vGame.x))) * smoothstep(${(AR_CLIP - 3).toFixed(1)}, ${(AR_CLIP + 9).toFixed(1)}, vGame.z) * (1.0 - smoothstep(2.0, 6.0, vGame.z)); if (mask < 0.01) discard; alpha = mask * (0.45 + line * 0.55); col = uColor * line * 1.8 + uFade * 0.6; } gl_FragColor = vec4(col, alpha); }`, }), ); floor.rotation.x = -Math.PI / 2; floor.position.z = -150; floor.updateMatrix(); floorUniforms.uLocal.value.copy(floor.matrix); world.add(floor); // Striped synthwave sun on the horizon (backdrop: the room replaces it in AR) const sunUniforms = { uColor: { value: new THREE.Color(params.sun) }, uTime: { value: 0 } }; const sun = new THREE.Mesh( new THREE.CircleGeometry(38, 96), new THREE.ShaderMaterial({ uniforms: sunUniforms, transparent: true, depthWrite: false, vertexShader: /* glsl */ ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: /* glsl */ ` uniform vec3 uColor; uniform float uTime; varying vec2 vUv; void main() { float y = vUv.y; float gap = clamp((0.55 - y) * 0.9, 0.0, 0.45); if (fract(y * 12.0 - uTime * 0.3) < gap) discard; vec3 col = mix(uColor * vec3(1.0, 0.35, 0.6), uColor * 1.4, y); gl_FragColor = vec4(col, 1.0); }`, }), ); sun.position.set(0, 14, FAR - 40); (XR?.backdrop || scene).add(sun); // Obstacles: instanced boxes with glowing edges const MAX_BLOCKS = 160; const blockUniforms = { uEdge: { value: new THREE.Color(params.walls) } }; const blocks = new THREE.InstancedMesh( new THREE.BoxGeometry(1, 1, 1), new THREE.ShaderMaterial({ uniforms: blockUniforms, vertexShader: /* glsl */ ` varying vec2 vUv; varying float vDepth; void main() { vUv = uv; vec4 gp = instanceMatrix * vec4(position, 1.0); vDepth = max(5.5 - gp.z, 0.0); gl_Position = projectionMatrix * viewMatrix * modelMatrix * gp; }`, fragmentShader: /* glsl */ ` uniform vec3 uEdge; varying vec2 vUv; varying float vDepth; void main() { vec2 d = fwidth(vUv) * 1.6; vec2 g = smoothstep(vec2(0.0), d, vUv) * smoothstep(vec2(0.0), d, 1.0 - vUv); float edge = 1.0 - g.x * g.y; float fade = exp(-vDepth * 0.02); vec3 col = mix(vec3(0.02, 0.01, 0.05), uEdge * 2.2, edge) * fade; gl_FragColor = vec4(col, 1.0); }`, }), MAX_BLOCKS, ); blocks.frustumCulled = false; world.add(blocks); // Orbs to collect const MAX_ORBS = 24; const orbs = new THREE.InstancedMesh( new THREE.IcosahedronGeometry(0.32, 1), new THREE.MeshBasicMaterial({ color: new THREE.Color('#fff2a8').multiplyScalar(2.2) }), MAX_ORBS, ); orbs.frustumCulled = false; world.add(orbs); // Ship: the starfighter model with a hot engine const ship = new THREE.Group(); let tailZ = 0.75; try { const { scene: model, size: ms } = await assets.model('model_aT7cvrxM7MRO', { size: 1.5 }); model.rotation.y = Math.PI / 2; // The model faces +x; turn it to face -z, the way the ship flies. ship.add(model); tailZ = ms.x / 2; } catch (e) { const hull = new THREE.Mesh( new THREE.ConeGeometry(0.42, 1.5, 3), new THREE.MeshStandardMaterial({ color: '#15102a', emissive: '#6a4dff', emissiveIntensity: 0.6, roughness: 0.3, metalness: 0.6, flatShading: true }), ); hull.rotation.x = -Math.PI / 2; hull.rotation.y = Math.PI; ship.add(hull); } const engine = new THREE.Mesh(new THREE.SphereGeometry(0.16, 16, 8), new THREE.MeshBasicMaterial({ color: new THREE.Color('#ffffff').multiplyScalar(3) })); engine.position.z = tailZ; const engineGlow = new THREE.PointLight('#ff6ad5', 6, 4, 2); engineGlow.position.z = tailZ + 0.3; ship.add(engine, engineGlow); ship.position.y = 0.55; world.add(ship); scene.add(new THREE.HemisphereLight('#b89bff', '#200630', 1.2)); const shipLight = new THREE.DirectionalLight('#ff8ff0', 2); shipLight.position.set(0, 4, -4); scene.add(shipLight); const keyLight = new THREE.DirectionalLight('#9fe8ff', 1.2); keyLight.position.set(-3, 5, 6); scene.add(keyLight); // Debris for crashes const DEBRIS = 260; const debrisPos = new Float32Array(DEBRIS * 3); const debrisVel = new Float32Array(DEBRIS * 3); const debrisGeo = new THREE.BufferGeometry(); debrisGeo.setAttribute('position', new THREE.BufferAttribute(debrisPos, 3)); const debris = new THREE.Points( debrisGeo, new THREE.PointsMaterial({ color: new THREE.Color('#ffd0f4').multiplyScalar(2), size: 0.12, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending }), ); debris.frustumCulled = false; debris.visible = false; world.add(debris); // HUD: overlay on screen, a floating panel in VR / AR const hudCanvas = document.createElement('canvas'); hudCanvas.width = 1024; hudCanvas.height = 256; const hud = hudCanvas.getContext('2d'); const hudTexture = new THREE.CanvasTexture(hudCanvas); hudTexture.colorSpace = THREE.SRGBColorSpace; const hudScene = new THREE.Scene(); const hudCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const hudPlane = new THREE.Mesh( new THREE.PlaneGeometry(1, 0.25), new THREE.MeshBasicMaterial({ map: hudTexture, transparent: true, toneMapped: false, depthTest: false }), ); hudScene.add(hudPlane); const hudPanel = new THREE.Mesh( new THREE.PlaneGeometry(10, 2.5), new THREE.MeshBasicMaterial({ map: hudTexture, transparent: true, toneMapped: false, depthWrite: false }), ); hudPanel.visible = false; world.add(hudPanel); let hudKey = ''; // Post (screen only) const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1, { type: THREE.HalfFloatType, samples: 4 })); composer.addPass(new RenderPass(scene, camera)); const bloom = new UnrealBloomPass(new THREE.Vector2(1, 1), 0.9, 0.35, 0.3); composer.addPass(bloom); composer.addPass(new OutputPass()); const layout = ({ width, height, pixelRatio }) => { const samples = pixelRatio < 2 ? 4 : 0; composer.renderTarget1.samples = samples; composer.renderTarget2.samples = samples; composer.setPixelRatio(pixelRatio); composer.setSize(width, height); const aspect = width / Math.max(height, 1); camera.fov = aspect < 1 ? 78 : 58; camera.updateProjectionMatrix(); hudCamera.left = -aspect; hudCamera.right = aspect; hudCamera.updateProjectionMatrix(); const s = Math.min(1.6, aspect * 1.6); hudPlane.scale.setScalar(s); hudPlane.position.set(0, 1 - 0.16 * s, 0); }; layout(size); gui.add(params, 'speed', 0.5, 2).name('Speed'); gui.add(params, 'density', 0.2, 0.9).name('Density'); gui.add(params, 'sound', 0, 1).name('Sound').onChange((v) => sfx && (sfx.volume = v)); if (sfx) sfx.volume = params.sound; gui.add(params, 'glow', 0, 2.5).name('Glow'); gui.addColor(params, 'grid').name('Grid').onChange((v) => floorUniforms.uColor.value.set(v)); gui.addColor(params, 'walls').name('Walls').onChange((v) => blockUniforms.uEdge.value.set(v)); gui.addColor(params, 'sun').name('Sun').onChange((v) => sunUniforms.uColor.value.set(v)); gui.add(params, 'newRun').name('New Run'); // Game state let items = []; let orbItems = []; let rows = []; let lastGap = 3; let distance = 0; let bonus = 0; let best = 0; let pace = 22; let dead = false; let deadTime = 0; let travelled = 0; let shipX = 0; let shipVX = 0; let idle = 99; let keyDir = 0; let lastPx = pointer.px; let lastPy = pointer.py; let lastAim = 0; let xrMode = null; let userPlaced = false; let tablePlaced = false; const spawnRow = (z) => { lastGap = THREE.MathUtils.clamp(lastGap + Math.round((Math.random() - 0.5) * 4), 0, LANES - 1); const gapX = lastGap * LANE_W - HALF; const row = { z, gapX }; rows.push(row); for (let l = 0; l < LANES; l++) { if (Math.abs(l - lastGap) <= 0 || Math.random() > params.density) continue; if (items.length >= MAX_BLOCKS) break; items.push({ x: l * LANE_W - HALF, z, w: 1.7, d: 1.7 + Math.random() * 1.2, h: 0.8 + Math.random() * 3.2, row }); } if (Math.random() < 0.5 && orbItems.length < MAX_ORBS) orbItems.push({ x: gapX, z: z - ROW_GAP / 2, spin: Math.random() * 6 }); }; const reset = () => { items = []; orbItems = []; rows = []; lastGap = 3; distance = 0; bonus = 0; pace = 22; dead = false; debris.visible = false; ship.visible = true; hum?.setVolume(0.35); for (let z = -40; z > FAR; z -= ROW_GAP) spawnRow(z); }; reset(); const crash = () => { dead = true; deadTime = 0; best = Math.max(best, Math.floor(distance) + bonus); ship.visible = false; debris.visible = true; sfx?.play(SOUND.crash); hum?.setVolume(0); for (const c of XR?.controllers || []) if (c.connected && !c.isHand) c.pulse?.(0.8, 180); for (let i = 0; i < DEBRIS; i++) { debrisPos[i * 3] = shipX; debrisPos[i * 3 + 1] = 0.55; debrisPos[i * 3 + 2] = 0; const a = Math.random() * Math.PI * 2; const u = Math.random() * 2 - 1; const s = 3 + Math.random() * 9; const r = Math.sqrt(1 - u * u); debrisVel[i * 3] = Math.cos(a) * r * s; debrisVel[i * 3 + 1] = Math.abs(u) * s; debrisVel[i * 3 + 2] = Math.sin(a) * r * s - 4; } }; // XR placement const head = new THREE.Vector3(); const fwd = new THREE.Vector3(); const tmpDir = new THREE.Vector3(); const placeInFront = () => { XR.unpin?.(world); camera.getWorldPosition(head); camera.getWorldDirection(fwd); const yaw = Math.atan2(-fwd.x, -fwd.z); if (XR.handheld) { const horiz = Math.max(Math.hypot(fwd.x, fwd.z), 1e-4); const pitch = THREE.MathUtils.clamp(Math.atan2(fwd.y, horiz), -1.0, -0.2); tmpDir.set(-Math.sin(yaw) * Math.cos(pitch), Math.sin(pitch), -Math.cos(yaw) * Math.cos(pitch)); world.position.copy(head).addScaledVector(tmpDir, 0.9); } else { world.position.set(head.x - Math.sin(yaw) * 0.75, head.y - 0.5, head.z - Math.cos(yaw) * 0.75); } world.rotation.set(0, yaw, 0); world.updateMatrixWorld(true); XR.pin?.(world); }; const placeOnTable = () => { if (userPlaced || tablePlaced || xrMode !== 'ar') return; const t = XR.surface?.('table'); if (!t) return; tablePlaced = true; XR.unpin?.(world); camera.getWorldPosition(head); const yaw = Math.atan2(-(t.center.x - head.x), -(t.center.z - head.z)); world.position.copy(t.center); world.position.y += 0.01; world.rotation.set(0, yaw, 0); world.updateMatrixWorld(true); XR.pin?.(world); }; const setMode = (mode) => { xrMode = mode; XR?.unpin?.(world); if (mode === 'ar') { world.scale.setScalar(AR_SCALE); floorUniforms.uAR.value = 1; debris.material.size = 0.12 * AR_SCALE; hudPanel.position.set(0, 6, -16); hudPanel.visible = true; userPlaced = false; tablePlaced = false; placeInFront(); placeOnTable(); } else { world.scale.setScalar(1); world.position.set(0, 0, 0); world.rotation.set(0, 0, 0); floorUniforms.uAR.value = 0; debris.material.size = 0.12; if (mode === 'vr') { XR.rig.position.set(0, 0, 4.5); hudPanel.position.set(0, 4.4, -14); hudPanel.visible = true; } else { if (XR?.rig) XR.rig.position.set(0, 0, 0); hudPanel.visible = false; } } hudKey = ''; }; const offs = []; if (XR) { offs.push(XR.on('enter', (e) => setMode(e?.mode || XR.mode))); offs.push(XR.on('exit', () => setMode(null))); offs.push(XR.on('surfaces', placeOnTable)); offs.push(XR.on('recentre', () => { if (xrMode === 'ar') { placeInFront(); userPlaced = true; } })); offs.push(XR.on('select', () => { idle = 0; if (dead && deadTime > 0.6) reset(); })); } // Screen input const onKeyDown = (e) => { if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') keyDir = -1; else if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') keyDir = 1; else if (e.code === 'Space' && dead) reset(); else return; idle = 0; }; const onKeyUp = (e) => { if ((e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') && keyDir < 0) keyDir = 0; if ((e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') && keyDir > 0) keyDir = 0; }; const onDown = () => { idle = 0; if (dead && deadTime > 0.6) reset(); }; window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp); renderer.domElement.addEventListener('pointerdown', onDown); const drawHud = (auto) => { const score = Math.floor(distance) + bonus; const hand = !!XR?.handheld; const next = `${score}|${best}|${dead}|${auto}|${xrMode}|${hand}`; if (next === hudKey) return; hudKey = next; hud.clearRect(0, 0, 1024, 256); hud.textAlign = 'center'; hud.fillStyle = 'rgba(255,255,255,0.95)'; hud.font = '800 96px system-ui, sans-serif'; hud.fillText(String(score), 512, 104); hud.font = '600 26px ui-monospace, monospace'; hud.fillStyle = 'rgba(255,220,250,0.75)'; let hint; if (xrMode) { if (dead) hint = hand ? 'CRASHED · TAP TO RUN AGAIN' : 'CRASHED · PULL TRIGGER TO RUN AGAIN'; else if (auto) hint = hand ? 'DEMO · DRAG TO STEER' : 'DEMO · AIM OR STICK TO STEER'; else hint = hand ? 'DRAG TO STEER' : 'AIM OR STICK TO STEER'; } else { hint = dead ? 'CRASHED · TAP TO RUN AGAIN' : auto ? 'DEMO · MOVE TO STEER' : 'STEER WITH POINTER OR ← →'; } if (!rendering) hud.fillText(hint, 512, 152); if (best) hud.fillText(`BEST ${best}`, 512, 194); hudTexture.needsUpdate = true; }; const dummy = new THREE.Object3D(); const look = new THREE.Vector3(); const rayO = new THREE.Vector3(); const rayP = new THREE.Vector3(); const rayD = new THREE.Vector3(); // Where an XR controller (or a finger on a phone) aims across the track const aimTarget = () => { if (!XR?.presenting) return null; let c = XR.right?.connected ? XR.right : XR.left?.connected ? XR.left : null; if (!c) c = (XR.controllers || []).find((k) => k.connected) || null; if (!c || !c.ray) return null; c.ray.getWorldPosition(rayO); c.ray.getWorldDirection(rayD).negate(); rayP.copy(rayO).add(rayD); world.worldToLocal(rayO); world.worldToLocal(rayP); rayD.subVectors(rayP, rayO); if (rayD.z > -1e-3) return null; const t = -rayO.z / rayD.z; return rayO.x + rayD.x * t * 1.2; }; const stickX = () => { if (!XR?.presenting) return 0; for (const c of XR.controllers || []) { if (c.connected && c.stick && Math.abs(c.stick.x) > 0.25) return c.stick.x; } return 0; }; return { update({ time, delta }) { const dt = Math.min(delta, 0.05); const presenting = !!XR?.presenting; if (!presenting && xrMode) setMode(null); if (pointer.px !== lastPx || pointer.py !== lastPy) { if (pointer.inside && !presenting) idle = 0; lastPx = pointer.px; lastPy = pointer.py; } const aim = aimTarget(); if (aim !== null && Math.abs(aim - lastAim) > 0.06) { idle = 0; lastAim = aim; } const stick = stickX(); if (stick) idle = 0; idle += dt; const auto = idle > 4; // Speed and scrolling const speed = dead ? pace * 0.15 : pace * params.speed; const step = speed * dt; travelled += step; if (!dead) { distance += step * 0.5; pace = Math.min(55, pace + dt * 0.35); } else { deadTime += dt; if (auto && deadTime > 2) reset(); } floorUniforms.uOffset.value = travelled % 2; for (const it of items) it.z += step; for (const o of orbItems) o.z += step; for (const r of rows) r.z += step; items = items.filter((it) => it.z < 8); orbItems = orbItems.filter((o) => o.z < 6 && !o.taken); rows = rows.filter((r) => r.z < 6); let farthest = rows.length ? Math.min(...rows.map((r) => r.z)) : 0; while (farthest > FAR + ROW_GAP) { farthest -= ROW_GAP; spawnRow(farthest); } // Steering: XR stick or aim, keys, pointer, or the autopilot threading the next gap let target = shipX; if (stick) target = shipX + stick * 4; else if (keyDir) target = shipX + keyDir * 4; else if (auto) { const next = rows.filter((r) => r.z < 0.8).sort((a, b) => b.z - a.z); const lead = next[0]; if (lead) { const after = next[1]; target = lead.z > -ROW_GAP * 0.35 && after ? after.gapX : lead.gapX; if (lead.z > -3) target = lead.gapX; } } else if (presenting) { if (aim !== null) target = aim; } else if (pointer.inside) target = pointer.x * (HALF + 1.2); target = THREE.MathUtils.clamp(target, -HALF - 0.6, HALF + 0.6); const prevX = shipX; shipX += (target - shipX) * (1 - Math.exp(-(auto ? 7 : 10) * dt)); shipVX = (shipX - prevX) / Math.max(dt, 1e-4); ship.position.x = shipX; ship.position.y = 0.55 + Math.sin(time * 3) * 0.05; ship.rotation.z = THREE.MathUtils.clamp(-shipVX * 0.06, -0.7, 0.7); ship.rotation.y = THREE.MathUtils.clamp(-shipVX * 0.02, -0.3, 0.3); engine.scale.setScalar(0.85 + Math.random() * 0.35); hum?.setRate(0.8 + (pace / 55) * 0.6 * params.speed); hum?.setPan(THREE.MathUtils.clamp(shipX / HALF, -1, 1) * 0.3); // Collisions if (!dead) { for (const it of items) { if (Math.abs(it.z) < it.d / 2 + 0.6 && Math.abs(it.x - shipX) < it.w / 2 + 0.3) { crash(); break; } } for (const o of orbItems) { if (Math.abs(o.z) < 0.9 && Math.abs(o.x - shipX) < 0.9) { o.taken = true; bonus += 50; sfx?.play(SOUND.orb, { volume: 0.7, rate: 0.92 + Math.random() * 0.16, pan: THREE.MathUtils.clamp(shipX / HALF, -1, 1) * 0.5 }); for (const c of XR?.controllers || []) if (c.connected && !c.isHand) c.pulse?.(0.3, 40); } } } // Write instances (in XR blocks sink away before reaching the viewer; in AR they rise at the track's end) const clipZ = xrMode === 'ar' ? AR_CLIP : -1e9; blocks.count = items.length; items.forEach((it, i) => { let k = 1; if (xrMode) k *= 1 - THREE.MathUtils.smoothstep(it.z, 1.5, 3.8); if (xrMode === 'ar') k *= THREE.MathUtils.smoothstep(it.z, clipZ, clipZ + 10); const h = Math.max(it.h * k, 1e-4); dummy.position.set(it.x, h / 2, it.z); dummy.rotation.set(0, 0, 0); dummy.scale.set(it.w, h, it.d); dummy.updateMatrix(); blocks.setMatrixAt(i, dummy.matrix); }); blocks.instanceMatrix.needsUpdate = true; orbs.count = orbItems.length; orbItems.forEach((o, i) => { dummy.position.set(o.x, 0.7 + Math.sin(time * 3 + o.spin) * 0.15, o.z); dummy.rotation.set(time * 2 + o.spin, time * 1.3, 0); dummy.scale.setScalar(o.z < clipZ ? 1e-4 : 1); dummy.updateMatrix(); orbs.setMatrixAt(i, dummy.matrix); }); orbs.instanceMatrix.needsUpdate = true; if (debris.visible) { for (let i = 0; i < DEBRIS; i++) { debrisVel[i * 3 + 1] -= 14 * dt; debrisPos[i * 3] += debrisVel[i * 3] * dt; debrisPos[i * 3 + 1] = Math.max(0.02, debrisPos[i * 3 + 1] + debrisVel[i * 3 + 1] * dt); debrisPos[i * 3 + 2] += debrisVel[i * 3 + 2] * dt + step; } debrisGeo.attributes.position.needsUpdate = true; debris.material.opacity = Math.max(0, 1 - deadTime * 0.6); } // Chase camera leaning into the turns (screen only; in XR the headset is the camera) if (!presenting) { const aspect = size.width / Math.max(size.height, 1); const back = aspect < 1 ? 7 : 5.5; camera.position.set(shipX * 0.55, 2.4 + (aspect < 1 ? 1 : 0), back); camera.lookAt(look.set(shipX * 0.8, 0.9, -12)); camera.rotateZ(THREE.MathUtils.clamp(-shipVX * 0.012, -0.12, 0.12)); } sunUniforms.uTime.value = time; bloom.strength = 0.35 + params.glow * 0.55; drawHud(auto); }, render() { composer.render(); renderer.autoClear = false; renderer.clearDepth(); renderer.render(hudScene, hudCamera); renderer.autoClear = true; }, resize: layout, dispose() { hum?.stop(); offs.forEach((off) => typeof off === 'function' && off()); window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); renderer.domElement.removeEventListener('pointerdown', onDown); composer.dispose(); blocks.dispose(); orbs.dispose(); hudTexture.dispose(); pmrem.dispose(); }, }; }