import * as THREE from 'three'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; export default function sketch({ scene, camera, renderer, gui, size, pointer }) { const params = { speed: 1.0, rivals: 5, camera: 'chase', glow: 1.2, city: 0.35, neonA: '#19e6ff', neonB: '#ff2bd6' }; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.1; const FOG = new THREE.Color('#140a26'); scene.background = FOG.clone(); scene.fog = new THREE.FogExp2(FOG.clone(), 0.0028); const pmrem = new THREE.PMREMGenerator(renderer); const envTex = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; scene.environment = envTex; scene.environmentIntensity = 0.35; camera.far = 2000; camera.fov = 70; camera.updateProjectionMatrix(); scene.add(new THREE.HemisphereLight('#6a4cff', '#0a0610', 0.8)); const key = new THREE.DirectionalLight('#ffd6f5', 2.2); key.position.set(80, 120, 40); scene.add(key); const rim = new THREE.DirectionalLight('#19e6ff', 1.6); rim.position.set(-100, 40, -120); scene.add(rim); const shared = { uTime: { value: 0 }, uNeonA: { value: new THREE.Color(params.neonA) }, uNeonB: { value: new THREE.Color(params.neonB) }, uFogColor: { value: FOG.clone() }, uFogDensity: { value: 0.0028 }, uCity: { value: params.city }, }; const FOGF = `float fogF(vec3 v){ float d = length(v); return clamp(1.0 - exp(-uFogDensity*uFogDensity*d*d), 0.0, 1.0); }`; const UNI = `uniform float uTime; uniform float uCity; uniform float uFogDensity; uniform vec3 uFogColor; uniform vec3 uNeonA; uniform vec3 uNeonB;`; // ---------- Track curve & frames const W = 16; const ctrl = []; const NC = 24; for (let k = 0; k < NC; k++) { const a = (k / NC) * Math.PI * 2; const r = 150 + 45 * Math.sin(a * 3 + 0.5) + 20 * Math.cos(a * 5); ctrl.push(new THREE.Vector3(Math.cos(a) * r * 1.15, 14 + 8 * Math.sin(a * 2) + 4 * Math.sin(a * 5 + 1), Math.sin(a) * r)); } const curve = new THREE.CatmullRomCurve3(ctrl, true, 'centripetal'); const L = curve.getLength(); const NS = 1600; const TP = new Float32Array(NS * 3), TT = new Float32Array(NS * 3), TU = new Float32Array(NS * 3), TS = new Float32Array(NS * 3); const pts = curve.getSpacedPoints(NS); const tans = []; for (let i = 0; i < NS; i++) tans.push(curve.getTangentAt(i / NS).normalize()); const ds = L / NS; const kr = new Float32Array(NS); const tmpC = new THREE.Vector3(); for (let i = 0; i < NS; i++) { tmpC.crossVectors(tans[i], tans[(i + 1) % NS]); kr[i] = tmpC.y / ds; } const Y = new THREE.Vector3(0, 1, 0); for (let i = 0; i < NS; i++) { let ks = 0; const win = 30; for (let j = -win; j <= win; j++) ks += kr[(i + j + NS) % NS]; ks /= (win * 2 + 1); const b = THREE.MathUtils.clamp(ks * 16, -0.55, 0.55); const t = tans[i]; const up = Y.clone().addScaledVector(t, -t.dot(Y)).normalize(); const side = new THREE.Vector3().crossVectors(t, up).normalize(); const c = Math.cos(b), s = Math.sin(b); const up2 = up.clone().multiplyScalar(c).addScaledVector(side, -s); const side2 = side.clone().multiplyScalar(c).addScaledVector(up, s); const p = pts[i]; TP.set([p.x, p.y, p.z], i * 3); TT.set([t.x, t.y, t.z], i * 3); TU.set([up2.x, up2.y, up2.z], i * 3); TS.set([side2.x, side2.y, side2.z], i * 3); } function lerpArr(arr, j0, j1, a, out) { out.set(arr[j0] + (arr[j1] - arr[j0]) * a, arr[j0 + 1] + (arr[j1 + 1] - arr[j0 + 1]) * a, arr[j0 + 2] + (arr[j1 + 2] - arr[j0 + 2]) * a); } function frameAt(u, oP, oT, oU, oS) { const f = (u - Math.floor(u)) * NS; const fi = Math.floor(f); const i0 = ((fi % NS) + NS) % NS, i1 = (i0 + 1) % NS, a = f - fi; lerpArr(TP, i0 * 3, i1 * 3, a, oP); lerpArr(TT, i0 * 3, i1 * 3, a, oT); oT.normalize(); lerpArr(TU, i0 * 3, i1 * 3, a, oU); oU.normalize(); lerpArr(TS, i0 * 3, i1 * 3, a, oS); oS.normalize(); } function makeStrip(s0, u0, s1, u1) { const pos = new Float32Array((NS + 1) * 2 * 3), uv = new Float32Array((NS + 1) * 2 * 2), idx = []; for (let i = 0; i <= NS; i++) { const j = (i % NS) * 3, d = (i / NS) * L; for (let e = 0; e < 2; e++) { const so = e === 0 ? s0 : s1, uo = e === 0 ? u0 : u1, k = i * 2 + e; pos[k * 3] = TP[j] + TS[j] * so + TU[j] * uo; pos[k * 3 + 1] = TP[j + 1] + TS[j + 1] * so + TU[j + 1] * uo; pos[k * 3 + 2] = TP[j + 2] + TS[j + 2] * so + TU[j + 2] * uo; uv[k * 2] = e; uv[k * 2 + 1] = d; } if (i < NS) { const a = i * 2; idx.push(a, a + 2, a + 1, a + 1, a + 2, a + 3); } } const g = new THREE.BufferGeometry(); g.setAttribute('position', new THREE.BufferAttribute(pos, 3)); g.setAttribute('uv', new THREE.BufferAttribute(uv, 2)); g.setIndex(idx); g.computeBoundingSphere(); return g; } const stripVert = `varying vec2 vUv; varying vec3 vView; void main(){ vUv = uv; vec4 mv = modelViewMatrix * vec4(position,1.0); vView = mv.xyz; gl_Position = projectionMatrix * mv; }`; const trackMat = new THREE.ShaderMaterial({ uniforms: shared, side: THREE.DoubleSide, vertexShader: stripVert, fragmentShader: `${UNI} varying vec2 vUv; varying vec3 vView; ${FOGF} void main(){ float x = vUv.x; float v = vUv.y; vec3 col = vec3(0.018, 0.02, 0.032); float pz = fract(v / 4.0); float seam = smoothstep(0.96, 1.0, pz) + smoothstep(0.04, 0.0, pz); col += vec3(0.02, 0.025, 0.05) * seam; float e = abs(x - 0.5) * 2.0; col += uNeonA * pow(e, 8.0) * 0.35; float edge = smoothstep(0.90, 0.94, e) * (1.0 - smoothstep(0.975, 0.995, e)); float pulse = 0.55 + 0.45 * sin(v * 0.25 - uTime * 10.0); col += uNeonA * edge * 3.2 * pulse; float lane = 1.0 - smoothstep(0.0, 0.012, abs(abs(x - 0.5) - 0.18)); float dash = step(0.55, fract(v / 7.0)); col += vec3(0.85, 0.9, 1.0) * lane * dash * 0.4; float seg = mod(v, 140.0); float pad = step(20.0, seg) * step(seg, 46.0) * step(abs(x - 0.5), 0.15); float chev = step(0.5, fract((seg + abs(x - 0.5) * 16.0) / 4.0 - uTime * 2.5)); col += uNeonB * pad * (0.35 + 2.8 * chev); col = mix(col, uFogColor, fogF(vView)); gl_FragColor = vec4(col, 1.0); }`, }); scene.add(new THREE.Mesh(makeStrip(-W / 2, 0, W / 2, 0), trackMat)); const underMat = new THREE.MeshStandardMaterial({ color: '#0c0c14', metalness: 0.7, roughness: 0.5, side: THREE.DoubleSide }); scene.add(new THREE.Mesh(makeStrip(-W / 2 - 0.3, -0.7, W / 2 + 0.3, -0.7), underMat)); const wallMat = new THREE.ShaderMaterial({ uniforms: shared, side: THREE.DoubleSide, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, vertexShader: stripVert, fragmentShader: `${UNI} varying vec2 vUv; varying vec3 vView; ${FOGF} void main(){ float h = vUv.x; float v = vUv.y; float top = smoothstep(0.82, 0.97, h) * (1.0 - smoothstep(0.97, 1.0, h)); float scan = step(0.88, fract(v / 3.0 - uTime * 3.0)); vec3 col = uNeonA * (top * 2.6 + 0.10 * (1.0 - h) + scan * 0.35 * (1.0 - h)); col += uNeonB * step(0.97, fract(v / 40.0)) * 1.5; col *= 1.0 - fogF(vView); gl_FragColor = vec4(col, 1.0); }`, }); scene.add(new THREE.Mesh(makeStrip(-W / 2, -0.2, -W / 2, 1.4), wallMat)); scene.add(new THREE.Mesh(makeStrip(W / 2, -0.2, W / 2, 1.4), wallMat)); // ---------- Frame temps const vP = new THREE.Vector3(), vT = new THREE.Vector3(), vU = new THREE.Vector3(), vS = new THREE.Vector3(); const vBack = new THREE.Vector3(), m4 = new THREE.Matrix4(), q = new THREE.Quaternion(), qR = new THREE.Quaternion(); const ZA = new THREE.Vector3(0, 0, 1); // ---------- Gates const gateMatA = new THREE.MeshBasicMaterial({ color: new THREE.Color(params.neonA).multiplyScalar(4) }); const gateMatB = new THREE.MeshBasicMaterial({ color: new THREE.Color(params.neonB).multiplyScalar(4) }); const postGeo = new THREE.BoxGeometry(0.35, 9, 0.35); postGeo.translate(0, 4.5, 0); const beamGeo = new THREE.BoxGeometry(W + 1.6, 0.35, 0.35); const gateFrameMat = new THREE.MeshStandardMaterial({ color: '#1a1a24', metalness: 0.9, roughness: 0.3 }); const bulkGeo = new THREE.BoxGeometry(1.0, 9.5, 1.0); bulkGeo.translate(0, 4.75, 0); const NG = 14; for (let k = 0; k < NG; k++) { frameAt(k / NG + 0.013, vP, vT, vU, vS); const g = new THREE.Group(); const mat = k % 2 === 0 ? gateMatB : gateMatA; for (const sx of [-1, 1]) { const bulk = new THREE.Mesh(bulkGeo, gateFrameMat); bulk.position.set(sx * (W / 2 + 1.2), -0.5, 0); g.add(bulk); const p = new THREE.Mesh(postGeo, mat); p.position.set(sx * (W / 2 + 0.6), -0.5, 0.6); g.add(p); } const beam = new THREE.Mesh(beamGeo, mat); beam.position.set(0, 8.8, 0.6); g.add(beam); const beam2 = new THREE.Mesh(beamGeo, gateFrameMat); beam2.scale.set(1.12, 2.5, 3); beam2.position.set(0, 9.3, 0); g.add(beam2); vBack.copy(vT).negate(); m4.makeBasis(vS, vU, vBack); g.quaternion.setFromRotationMatrix(m4); g.position.copy(vP); scene.add(g); } // ---------- Pillars const GROUND = -10; const pillarGeo = new THREE.CylinderGeometry(1.0, 1.4, 1, 12); pillarGeo.translate(0, 0.5, 0); const pillarCount = Math.floor(NS / 20); const pillars = new THREE.InstancedMesh(pillarGeo, new THREE.MeshStandardMaterial({ color: '#181824', metalness: 0.6, roughness: 0.5 }), pillarCount); const dmy = new THREE.Object3D(); for (let i = 0; i < pillarCount; i++) { const j = i * 20 * 3; const h = Math.max(1, TP[j + 1] - 0.7 - GROUND); dmy.position.set(TP[j], GROUND, TP[j + 2]); dmy.scale.set(1, h, 1); dmy.updateMatrix(); pillars.setMatrixAt(i, dmy.matrix); } scene.add(pillars); // ---------- Ground const groundGeo = new THREE.PlaneGeometry(3000, 3000); groundGeo.rotateX(-Math.PI / 2); const groundMat = new THREE.ShaderMaterial({ uniforms: shared, vertexShader: `varying vec3 vW; varying vec3 vView; void main(){ vec4 w = modelMatrix * vec4(position,1.0); vW = w.xyz; vec4 mv = viewMatrix * w; vView = mv.xyz; gl_Position = projectionMatrix * mv; }`, fragmentShader: `${UNI} varying vec3 vW; varying vec3 vView; ${FOGF} void main(){ vec2 p = vW.xz / 12.0; vec2 g = abs(fract(p - 0.5) - 0.5) / max(fwidth(p), vec2(1e-4)); float line = 1.0 - min(min(g.x, g.y), 1.0); vec3 col = vec3(0.006, 0.005, 0.012) + uNeonA * line * 0.12; float pulse = smoothstep(0.9, 1.0, sin(length(vW.xz) * 0.03 - uTime * 1.5)); col += uNeonB * line * pulse * 0.25; col = mix(col, uFogColor, fogF(vView)); gl_FragColor = vec4(col, 1.0); }`, }); const ground = new THREE.Mesh(groundGeo, groundMat); ground.position.y = GROUND; scene.add(ground); // ---------- City const bGeo = new THREE.BoxGeometry(1, 1, 1); bGeo.translate(0, 0.5, 0); const MAXB = 1400; const seeds = new Float32Array(MAXB); const bMat = new THREE.ShaderMaterial({ uniforms: shared, vertexShader: `attribute float aSeed; varying vec3 vW; varying vec3 vN; varying float vSeed; varying vec3 vView; varying vec3 vLocal; void main(){ mat4 im = mat4(1.0); #ifdef USE_INSTANCING im = instanceMatrix; #endif vec4 w = modelMatrix * im * vec4(position, 1.0); vW = w.xyz; vN = normalize(mat3(im) * normal); vSeed = aSeed; vLocal = position; vec4 mv = viewMatrix * w; vView = mv.xyz; gl_Position = projectionMatrix * mv; }`, fragmentShader: `${UNI} varying vec3 vW; varying vec3 vN; varying float vSeed; varying vec3 vView; varying vec3 vLocal; ${FOGF} float h21(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } void main(){ vec3 n = normalize(vN); vec3 col = vec3(0.012, 0.012, 0.024) + vec3(0.02, 0.012, 0.04) * (0.5 + 0.5 * n.y); vec3 neon = fract(vSeed * 7.77) < 0.5 ? uNeonA : uNeonB; float sideF = 1.0 - step(0.5, abs(n.y)); if (sideF > 0.5) { bool xf = abs(n.x) > 0.5; float hor = xf ? vW.z : vW.x; float lh = xf ? vLocal.z : vLocal.x; vec2 g = vec2(hor / 1.8, vW.y / 2.6); vec2 cell = floor(g); vec2 f = fract(g); float win = step(0.18, f.x) * step(f.x, 0.82) * step(0.25, f.y) * step(f.y, 0.8); float r = h21(cell + vSeed * 91.7); float lit = step(1.0 - uCity, r); float fl = 0.85 + 0.15 * sin(uTime * (1.0 + r * 3.0) + r * 40.0); vec3 wc = mix(vec3(1.0, 0.6, 0.3), vec3(0.55, 0.75, 1.0), step(0.5, fract(r * 7.3))); if (fract(vSeed * 13.1) < 0.18) wc = neon; col += wc * win * lit * fl * 1.3; float strip = (1.0 - smoothstep(0.015, 0.03, abs(lh))) * step(0.8, fract(vSeed * 5.1)); col += neon * strip * 2.5 * (0.7 + 0.3 * sin(vW.y * 0.2 - uTime * 3.0)); float topE = smoothstep(0.985, 1.0, vLocal.y) * step(0.55, fract(vSeed * 3.3)); col += neon * topE * 3.0; } col = mix(col, uFogColor, fogF(vView)); gl_FragColor = vec4(col, 1.0); }`, }); const city = new THREE.InstancedMesh(bGeo, bMat, MAXB); let placed = 0; let rs = 12345; const rnd = () => { rs = (rs * 16807) % 2147483647; return (rs - 1) / 2147483646; }; for (let a = 0; a < 6000 && placed < MAXB; a++) { const x = (rnd() * 2 - 1) * 700, z = (rnd() * 2 - 1) * 700; const w = 8 + rnd() * 16, d = 8 + rnd() * 16; const half = Math.hypot(w, d) * 0.5; let md = 1e9; for (let i = 0; i < NS; i += 4) { const dx = TP[i * 3] - x, dz = TP[i * 3 + 2] - z; const dd = dx * dx + dz * dz; if (dd < md) md = dd; } md = Math.sqrt(md); if (md < W / 2 + 10 + half) continue; let h = 15 + Math.pow(rnd(), 2.2) * 150 + Math.min(md, 300) * 0.12; if (md < 60) h = Math.min(h, 48); dmy.position.set(x, GROUND, z); dmy.scale.set(w, h, d); dmy.updateMatrix(); city.setMatrixAt(placed, dmy.matrix); seeds[placed] = rnd(); placed++; } city.count = placed; bGeo.setAttribute('aSeed', new THREE.InstancedBufferAttribute(seeds, 1)); city.frustumCulled = false; scene.add(city); // ---------- Sky const sky = new THREE.Mesh(new THREE.SphereGeometry(1000, 32, 16), new THREE.ShaderMaterial({ uniforms: shared, side: THREE.BackSide, depthWrite: false, vertexShader: `varying vec3 vDir; void main(){ vDir = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: `${UNI} varying vec3 vDir; float h21(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } void main(){ vec3 d = normalize(vDir); float y = d.y; vec3 top = vec3(0.003, 0.002, 0.01); vec3 col = mix(uFogColor, top, smoothstep(0.0, 0.5, y)); col += uNeonB * 0.22 * exp(-abs(y - 0.02) * 16.0); col += uNeonA * 0.04 * exp(-abs(y) * 5.0); vec2 sp = vec2(atan(d.z, d.x) * 200.0, y * 200.0); float st = step(0.997, h21(floor(sp))) * smoothstep(0.1, 0.4, y); col += vec3(0.6, 0.7, 1.0) * st * 0.6; gl_FragColor = vec4(col, 1.0); }`, })); sky.renderOrder = -1; sky.frustumCulled = false; scene.add(sky); // ---------- Dust particles const NP = 3000; const pPos = new Float32Array(NP * 3), pCol = new Float32Array(NP * 3); const cA = new THREE.Color(params.neonA), cB = new THREE.Color(params.neonB); for (let i = 0; i < NP; i++) { const j = Math.floor(rnd() * NS) * 3; const so = (rnd() * 2 - 1) * 35, uo = rnd() * 18 - 2; pPos[i * 3] = TP[j] + TS[j] * so + TU[j] * uo; pPos[i * 3 + 1] = TP[j + 1] + TS[j + 1] * so + TU[j + 1] * uo; pPos[i * 3 + 2] = TP[j + 2] + TS[j + 2] * so + TU[j + 2] * uo; const c = rnd() < 0.5 ? cA : cB; pCol[i * 3] = c.r; pCol[i * 3 + 1] = c.g; pCol[i * 3 + 2] = c.b; } const pGeo = new THREE.BufferGeometry(); pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3)); pGeo.setAttribute('color', new THREE.BufferAttribute(pCol, 3)); scene.add(new THREE.Points(pGeo, new THREE.PointsMaterial({ size: 0.22, vertexColors: true, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false, fog: false }))); // ---------- Ships const SHIPS = 8; const accents = [params.neonB, '#19e6ff', '#ffd400', '#ff5a1f', '#39ff88', '#8a5bff', '#ff3355', '#e8f4ff']; const liveries = ['#f2f2f7', '#1b2a6b', '#ffcc00', '#2a2a30', '#e02030', '#0d6b5a', '#5a2bd6', '#101014']; const shape = new THREE.Shape(); shape.moveTo(0, 2.2); shape.lineTo(0.35, 1.0); shape.lineTo(1.25, -0.6); shape.lineTo(1.1, -1.2); shape.lineTo(-1.1, -1.2); shape.lineTo(-1.25, -0.6); shape.lineTo(-0.35, 1.0); shape.closePath(); const bodyGeo = new THREE.ExtrudeGeometry(shape, { depth: 0.22, bevelEnabled: true, bevelThickness: 0.12, bevelSize: 0.1, bevelSegments: 2 }); bodyGeo.rotateX(-Math.PI / 2); const cockpitGeo = new THREE.SphereGeometry(0.35, 20, 12); cockpitGeo.scale(1, 0.55, 2.4); const finGeo = new THREE.BoxGeometry(0.08, 0.55, 0.7); const engGeo = new THREE.CylinderGeometry(0.24, 0.2, 0.7, 16); engGeo.rotateX(Math.PI / 2); const nozzleGeo = new THREE.CircleGeometry(0.18, 16); const glowGeo = new THREE.PlaneGeometry(3.4, 5.2); glowGeo.rotateX(-Math.PI / 2); const glassMat = new THREE.MeshPhysicalMaterial({ color: '#05070c', metalness: 0.2, roughness: 0.05, clearcoat: 1 }); const darkMat = new THREE.MeshStandardMaterial({ color: '#15161c', metalness: 0.8, roughness: 0.35 }); const ships = []; for (let i = 0; i < SHIPS; i++) { const g = new THREE.Group(); const acc = new THREE.Color(accents[i]); g.add(new THREE.Mesh(bodyGeo, new THREE.MeshPhysicalMaterial({ color: liveries[i], metalness: 0.55, roughness: 0.28, clearcoat: 1, clearcoatRoughness: 0.1 }))); const cp = new THREE.Mesh(cockpitGeo, glassMat); cp.position.set(0, 0.3, -0.2); g.add(cp); const accMat = new THREE.MeshStandardMaterial({ color: acc, emissive: acc, emissiveIntensity: 2 }); const nozMat = new THREE.MeshBasicMaterial({ color: acc.clone().lerp(new THREE.Color('#ffffff'), 0.4).multiplyScalar(6) }); for (const sx of [-1, 1]) { const fin = new THREE.Mesh(finGeo, accMat); fin.position.set(sx * 0.95, 0.45, 0.85); g.add(fin); const eng = new THREE.Mesh(engGeo, darkMat); eng.position.set(sx * 0.5, 0.12, 1.15); g.add(eng); const noz = new THREE.Mesh(nozzleGeo, nozMat); noz.position.set(sx * 0.5, 0.12, 1.51); g.add(noz); } const glowMat = new THREE.ShaderMaterial({ uniforms: { uColor: { value: acc.clone() } }, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }`, fragmentShader: `uniform vec3 uColor; varying vec2 vUv; void main(){ float r = length((vUv - 0.5) * 2.0); float a = pow(max(1.0 - r, 0.0), 2.0); gl_FragColor = vec4(uColor * a * 1.4, 1.0); }`, }); const glow = new THREE.Mesh(glowGeo, glowMat); glow.position.y = -0.6; g.add(glow); scene.add(g); ships.push({ group: g, prevLat: 0, roll: 0, color: acc, glowMat, nozMat }); } // ---------- Trails const HIST = 40; const hist = new Float32Array(SHIPS * HIST * 3), histS = new Float32Array(SHIPS * HIST * 3); const histInit = new Array(SHIPS).fill(false); const tPos = new Float32Array(SHIPS * HIST * 2 * 3), tInfo = new Float32Array(SHIPS * HIST * 2 * 2), tCol = new Float32Array(SHIPS * HIST * 2 * 3); const tIdx = []; for (let s = 0; s < SHIPS; s++) { for (let k = 0; k < HIST; k++) { for (let e = 0; e < 2; e++) { const v = (s * HIST + k) * 2 + e; tInfo[v * 2] = k / (HIST - 1); tInfo[v * 2 + 1] = e === 0 ? -1 : 1; const c = ships[s].color; tCol[v * 3] = c.r; tCol[v * 3 + 1] = c.g; tCol[v * 3 + 2] = c.b; } if (k < HIST - 1) { const a = (s * HIST + k) * 2; tIdx.push(a, a + 2, a + 1, a + 1, a + 2, a + 3); } } } const tGeo = new THREE.BufferGeometry(); const tPosAttr = new THREE.BufferAttribute(tPos, 3); tPosAttr.setUsage(THREE.DynamicDrawUsage); tGeo.setAttribute('position', tPosAttr); tGeo.setAttribute('aInfo', new THREE.BufferAttribute(tInfo, 2)); const tColAttr = new THREE.BufferAttribute(tCol, 3); tGeo.setAttribute('aColor', tColAttr); tGeo.setIndex(tIdx); const trail = new THREE.Mesh(tGeo, new THREE.ShaderMaterial({ transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, vertexShader: `attribute vec2 aInfo; attribute vec3 aColor; varying vec2 vInfo; varying vec3 vCol; void main(){ vInfo = aInfo; vCol = aColor; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }`, fragmentShader: `varying vec2 vInfo; varying vec3 vCol; void main(){ float age = vInfo.x; float ac = abs(vInfo.y); float a = pow(1.0 - age, 1.5) * (1.0 - ac * ac); vec3 col = vCol * a * 2.2 + vec3(1.0) * pow(1.0 - ac, 6.0) * pow(1.0 - age, 4.0) * 1.2; gl_FragColor = vec4(col, 1.0); }`, })); trail.frustumCulled = false; scene.add(trail); // ---------- 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.55, 0.78); composer.addPass(bloom); composer.addPass(new OutputPass()); // ---------- GUI gui.add(params, 'speed', 0, 3, 0.01).name('Speed'); gui.add(params, 'rivals', 0, 7, 1).name('Rivals'); gui.add(params, 'camera', ['chase', 'flyby', 'aerial']).name('Camera'); gui.add(params, 'glow', 0, 3, 0.01).name('Glow'); gui.add(params, 'city', 0, 1, 0.01).name('City Lights'); gui.addColor(params, 'neonA').name('Neon A').onChange((v) => { shared.uNeonA.value.set(v); gateMatA.color.set(v).multiplyScalar(4); }); gui.addColor(params, 'neonB').name('Neon B').onChange((v) => { shared.uNeonB.value.set(v); gateMatB.color.set(v).multiplyScalar(4); const c = new THREE.Color(v); ships[0].color.copy(c); ships[0].glowMat.uniforms.uColor.value.copy(c); ships[0].nozMat.color.copy(c).lerp(new THREE.Color('#ffffff'), 0.4).multiplyScalar(6); for (let k = 0; k < HIST * 2; k++) { tCol[k * 3] = c.r; tCol[k * 3 + 1] = c.g; tCol[k * 3 + 2] = c.b; } tColAttr.needsUpdate = true; }); // ---------- State let uP = 0, latP = 0; const camPos = new THREE.Vector3(), camUp = new THREE.Vector3(0, 1, 0), look = new THREE.Vector3(); const tgtPos = new THREE.Vector3(), tmp = new THREE.Vector3(), playerPos = new THREE.Vector3(); let camInit = false, flyNext = -1, flySign = 1, lastMode = ''; const flyPos = new THREE.Vector3(); return { update({ time, delta }) { const dt = Math.min(delta, 0.1); shared.uTime.value = time; shared.uCity.value = params.city; bloom.strength = params.glow; uP += (dt * 60 * params.speed) / L; const tgt = pointer.inside ? THREE.MathUtils.clamp(pointer.x * 6.5, -6.5, 6.5) : Math.sin(time * 0.35) * 4 + Math.sin(time * 1.1) * 1.5; latP += (tgt - latP) * (1 - Math.exp(-dt * 2.5)); for (let s = 0; s < SHIPS; s++) { const sh = ships[s]; if (s > params.rivals) { sh.group.visible = false; histInit[s] = false; continue; } sh.group.visible = true; let u, lat; if (s === 0) { u = uP; lat = latP; } else { const i = s - 1; u = uP + (-0.004 + i * 0.009) + 0.011 * Math.sin(time * 0.22 * (1 + i * 0.17) + i * 2.1); lat = Math.sin(time * (0.3 + 0.07 * i) + i * 1.7) * 5.3 + Math.sin(time * 0.9 + i) * 1.0; } frameAt(u, vP, vT, vU, vS); const hover = 0.85 + 0.08 * Math.sin(time * 3.1 + s * 1.3); sh.group.position.copy(vP).addScaledVector(vS, lat).addScaledVector(vU, hover); const vel = dt > 0 ? (lat - sh.prevLat) / dt : 0; sh.prevLat = lat; const rollT = THREE.MathUtils.clamp(-vel * 0.07, -0.55, 0.55); sh.roll += (rollT - sh.roll) * (1 - Math.exp(-dt * 6)); vBack.copy(vT).negate(); m4.makeBasis(vS, vU, vBack); q.setFromRotationMatrix(m4); qR.setFromAxisAngle(ZA, sh.roll + Math.sin(time * 1.7 + s) * 0.03); q.multiply(qR); sh.group.quaternion.copy(q); if (s === 0) playerPos.copy(sh.group.position); // trail history tmp.copy(sh.group.position).addScaledVector(vT, -1.8).addScaledVector(vU, 0.05); const base = s * HIST * 3; if (!histInit[s]) { for (let k = 0; k < HIST; k++) { hist.set([tmp.x, tmp.y, tmp.z], base + k * 3); histS.set([vS.x, vS.y, vS.z], base + k * 3); } histInit[s] = true; } else if (dt > 0) { hist.copyWithin(base + 3, base, base + (HIST - 1) * 3); histS.copyWithin(base + 3, base, base + (HIST - 1) * 3); hist[base] = tmp.x; hist[base + 1] = tmp.y; hist[base + 2] = tmp.z; histS[base] = vS.x; histS[base + 1] = vS.y; histS[base + 2] = vS.z; } for (let k = 0; k < HIST; k++) { const hj = base + k * 3; const w = 0.75 * (1 - (k / HIST) * 0.6); const v0 = ((s * HIST + k) * 2) * 3; tPos[v0] = hist[hj] - histS[hj] * w; tPos[v0 + 1] = hist[hj + 1] - histS[hj + 1] * w; tPos[v0 + 2] = hist[hj + 2] - histS[hj + 2] * w; tPos[v0 + 3] = hist[hj] + histS[hj] * w; tPos[v0 + 4] = hist[hj + 1] + histS[hj + 1] * w; tPos[v0 + 5] = hist[hj + 2] + histS[hj + 2] * w; } } tPosAttr.needsUpdate = true; tGeo.setDrawRange(0, (params.rivals + 1) * (HIST - 1) * 6); // camera const mode = params.camera; if (mode !== lastMode) { camera.fov = mode === 'chase' ? 70 : mode === 'flyby' ? 45 : 50; camera.updateProjectionMatrix(); flyNext = -1; camInit = false; lastMode = mode; } if (mode === 'chase') { frameAt(uP - 10 / L, vP, vT, vU, vS); tgtPos.copy(vP).addScaledVector(vS, latP * 0.7).addScaledVector(vU, 3.4 + (pointer.inside ? pointer.y * 1.5 : 0)); const upT = tmp.copy(vU); frameAt(uP + 18 / L, vP, vT, vU, vS); look.copy(vP).addScaledVector(vS, latP * 0.5).addScaledVector(vU, 1.2); const k = camInit ? 1 - Math.exp(-dt * 10) : 1; camPos.lerp(tgtPos, k); camUp.lerp(upT, camInit ? 1 - Math.exp(-dt * 4) : 1).normalize(); camInit = true; camera.position.copy(camPos); camera.up.copy(camUp); camera.lookAt(look); } else if (mode === 'flyby') { if (flyNext < 0 || time > flyNext || time < flyNext - 10) { frameAt(uP + (Math.max(params.speed, 0.2) * 60 * 1.8) / L, vP, vT, vU, vS); flySign = -flySign; flyPos.copy(vP).addScaledVector(vS, (W / 2 + 5) * flySign).addScaledVector(vU, 1.5 + Math.random() * 3); flyNext = time + 3.6; } camera.position.copy(flyPos); camera.up.set(0, 1, 0); camera.lookAt(playerPos); } else { tgtPos.set(playerPos.x + Math.cos(time * 0.12) * 32, playerPos.y + 60, playerPos.z + Math.sin(time * 0.12) * 32); camPos.lerp(tgtPos, camInit ? 1 - Math.exp(-dt * 3) : 1); camInit = true; camera.position.copy(camPos); camera.up.set(0, 1, 0); camera.lookAt(playerPos); } sky.position.copy(camera.position); }, render() { composer.render(); }, resize({ width, height }) { composer.setSize(width, height); bloom.resolution.set(width, height); }, dispose() { pmrem.dispose(); envTex.dispose(); composer.dispose(); }, }; }