霓虹面纱无限超速

import React, { useRef, useEffect, useMemo, useState, useCallback } from 'react'; import * as THREE from 'three'; import { Canvas, useFrame, useThree } from '@react-three/fiber'; import { EffectComposer, Bloom, ChromaticAberration, Glitch, Noise, Vignette, DepthOfField, MotionBlur } from '@react-three/postprocessing'; import { BlendFunction, GlitchMode } from 'postprocessing'; import { OrbitControls } from '@react-three/drei'; import * as dat from 'dat.gui'; // --- Shader Materials --- const HologramShader = { uniforms: { uTime: { value: 0 }, uColor: { value: new THREE.Color(0x00ffff) }, uOpacity: { value: 0.8 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float uTime; uniform vec3 uColor; uniform float uOpacity; varying vec2 vUv; void main() { float scanline = sin(vUv.y * 200.0 + uTime * 5.0) * 0.5 + 0.5; float flicker = sin(uTime * 10.0) * 0.1 + 0.9; float alpha = scanline * flicker * uOpacity; vec3 color = uColor * (1.0 + scanline * 0.5); gl_FragColor = vec4(color, alpha); } ` }; const AuroraShader = { uniforms: { uTime: { value: 0 }, uColor1: { value: new THREE.Color(0x00ff88) }, uColor2: { value: new THREE.Color(0x0088ff) } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float uTime; uniform vec3 uColor1; uniform vec3 uColor2; varying vec2 vUv; void main() { float wave1 = sin(vUv.x * 10.0 + uTime * 2.0) * 0.5 + 0.5; float wave2 = cos(vUv.y * 8.0 + uTime * 1.5) * 0.5 + 0.5; float wave3 = sin((vUv.x + vUv.y) * 15.0 + uTime * 3.0) * 0.5 + 0.5; float intensity = wave1 * wave2 * wave3; vec3 color = mix(uColor1, uColor2, intensity); gl_FragColor = vec4(color, intensity * 0.8); } ` }; const DataStreamShader = { uniforms: { uTime: { value: 0 }, uColor: { value: new THREE.Color(0x00ff00) } }, vertexShader: ` attribute float aSize; attribute vec3 aColor; varying vec3 vColor; void main() { vColor = aColor; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = aSize * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` uniform float uTime; uniform vec3 uColor; varying vec3 vColor; void main() { float dist = length(gl_PointCoord - vec2(0.5)); if (dist > 0.5) discard; float alpha = 1.0 - smoothstep(0.0, 0.5, dist); gl_FragColor = vec4(vColor * uColor, alpha); } ` }; // --- Particle Systems --- const ParticleBurst = ({ position, color, count = 100 }) => { const points = useRef(); const particles = useMemo(() => { const positions = new Float32Array(count * 3); const velocities = new Float32Array(count * 3); const colors = new Float32Array(count * 3); for (let i = 0; i < count; i++) { positions[i * 3] = position[0]; positions[i * 3 + 1] = position[1]; positions[i * 3 + 2] = position[2]; const theta = Math.random() * Math.PI * 2; const phi = Math.acos(2 * Math.random() - 1); const speed = 5 + Math.random() * 20; velocities[i * 3] = speed * Math.sin(phi) * Math.cos(theta); velocities[i * 3 + 1] = speed * Math.sin(phi) * Math.sin(theta); velocities[i * 3 + 2] = speed * Math.cos(phi); const c = new THREE.Color(color); c.offsetHSL(Math.random() * 0.1, 0, Math.random() * 0.5); colors[i * 3] = c.r; colors[i * 3 + 1] = c.g; colors[i * 3 + 2] = c.b; } return { positions, velocities, colors }; }, [position, color, count]); useFrame((state) => { if (!points.current) return; const time = state.clock.elapsedTime; const positions = points.current.geometry.attributes.position.array; for (let i = 0; i < count; i++) { positions[i * 3] += particles.velocities[i * 3] * 0.016; positions[i * 3 + 1] += particles.velocities[i * 3 + 1] * 0.016; positions[i * 3 + 2] += particles.velocities[i * 3 + 2] * 0.016; particles.velocities[i * 3] *= 0.98; particles.velocities[i * 3 + 1] *= 0.98; particles.velocities[i * 3 + 2] *= 0.98; } points.current.geometry.attributes.position.needsUpdate = true; points.current.material.opacity = Math.max(0, 1 - time * 0.5); }); return ( <points ref={points}> <bufferGeometry> <bufferAttribute attach="attributes-position" count={count} array={particles.positions} itemSize={3} /> <bufferAttribute attach="attributes-color" count={count} array={particles.colors} itemSize={3} /> </bufferGeometry> <pointsMaterial size={0.5} vertexColors transparent opacity={1} blending={THREE.AdditiveBlending} depthWrite={false} /> </points> ); }; // --- Environment Components --- const RainSystem = ({ count = 5000 }) => { const points = useRef(); const particles = useMemo(() => { const positions = new Float32Array(count * 3); const velocities = new Float32Array(count); for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 100; positions[i * 3 + 1] = Math.random() * 50; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; velocities[i] = 50 + Math.random() * 30; } return { positions, velocities }; }, [count]); useFrame((state) => { if (!points.current) return; const positions = points.current.geometry.attributes.position.array; const delta = state.clock.getDelta(); for (let i = 0; i < count; i++) { positions[i * 3 + 1] -= particles.velocities[i] * delta; if (positions[i * 3 + 1] < -5) { positions[i * 3 + 1] = 50; positions[i * 3] = (Math.random() - 0.5) * 100; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; } } points.current.geometry.attributes.position.needsUpdate = true; }); return ( <points ref={points}> <bufferGeometry> <bufferAttribute attach="attributes-position" count={count} array={particles.positions} itemSize={3} /> </bufferGeometry> <pointsMaterial size={0.1} color={0x4488ff} transparent opacity={0.6} blending={THREE.AdditiveBlending} depthWrite={false} /> </points> ); }; const Hologram = ({ position, scale = 1, color = 0x00ffff }) => { const mesh = useRef(); const material = useRef(); useFrame((state) => { if (material.current) { material.current.uniforms.uTime.value = state.clock.elapsedTime; } if (mesh.current) { mesh.current.rotation.y = state.clock.elapsedTime * 0.5; } }); return ( <mesh ref={mesh} position={position} scale={scale}> <torusKnotGeometry args={[2, 0.6, 128, 32]} /> <shaderMaterial ref={material} args={[HologramShader]} transparent side={THREE.DoubleSide} /> </mesh> ); }; const Aurora = () => { const mesh = useRef(); const material = useRef(); useFrame((state) => { if (material.current) { material.current.uniforms.uTime.value = state.clock.elapsedTime; } }); return ( <mesh ref={mesh} position={[0, 30, -50]} rotation={[-Math.PI / 2, 0, 0]}> <planeGeometry args={[200, 100, 64, 64]} /> <shaderMaterial ref={material} args={[AuroraShader]} transparent side={THREE.DoubleSide} depthWrite={false} blending={THREE.AdditiveBlending} /> </mesh> ); }; const DataStream = ({ count = 2000 }) => { const points = useRef(); const particles = useMemo(() => { const positions = new Float32Array(count * 3); const sizes = new Float32Array(count); const colors = new Float32Array(count * 3); for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 100; positions[i * 3 + 1] = (Math.random() - 0.5) * 50; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; sizes[i] = 0.5 + Math.random() * 2; const c = new THREE.Color().setHSL(Math.random(), 1, 0.5); colors[i * 3] = c.r; colors[i * 3 + 1] = c.g; colors[i * 3 + 2] = c.b; } return { positions, sizes, colors }; }, [count]); useFrame((state) => { if (!points.current) return; const positions = points.current.geometry.attributes.position.array; const time = state.clock.elapsedTime; for (let i = 0; i < count; i++) { positions[i * 3 + 1] += Math.sin(time + i) * 0.1; positions[i * 3] += Math.cos(time * 0.5 + i) * 0.05; } points.current.geometry.attributes.position.needsUpdate = true; }); return ( <points ref={points}> <bufferGeometry> <bufferAttribute attach="attributes-position" count={count} array={particles.positions} itemSize={3} /> <bufferAttribute attach="attributes-size" count={count} array={particles.sizes} itemSize={1} /> <bufferAttribute attach="attributes-color" count={count} array={particles.colors} itemSize={3} /> </bufferGeometry> <shaderMaterial args={[DataStreamShader]} transparent depthWrite={false} blending={THREE.AdditiveBlending} /> </points> ); }; // --- Stage Components --- const NeonVeilDistrict = () => { const group = useRef(); const buildings = useMemo(() => { const arr = []; for (let i = 0; i < 50; i++) { arr.push({ position: [(Math.random() - 0.5) * 80, Math.random() * 20, -Math.random() * 50], scale: [1 + Math.random() * 3, 5 + Math.random() * 20, 1 + Math.random() * 3], color: new THREE.Color().setHSL(Math.random(), 1, 0.5) }); } return arr; }, []); useFrame((state) => { if (group.current) { group.current.position.z += 0.5; if (group.current.position.z > 10) { group.current.position.z = -50; } } }); return ( <group ref={group}> {buildings.map((building, i) => ( <mesh key={i} position={building.position} scale={building.scale}> <boxGeometry /> <meshStandardMaterial color={building.color} emissive={building.color} emissiveIntensity={0.5} metalness={0.8} roughness={0.2} /> </mesh> ))} <RainSystem /> <Hologram position={[0, 15, -20]} scale={3} color={0xff00ff} /> <Hologram position={[-15, 10, -30]} scale={2} color={0x00ffff} /> <Hologram position={[15, 12, -25]} scale={2.5} color={0xff8800} /> {/* Mirror floor */} <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, -25]}> <planeGeometry args={[100, 100]} /> <meshStandardMaterial color={0x111122} metalness={1} roughness={0.05} envMapIntensity={2} /> </mesh> </group> ); }; const AetherSpire = () => { const group = useRef(); const spires = useMemo(() => { const arr = []; for (let i = 0; i < 20; i++) { arr.push({ position: [(Math.random() - 0.5) * 60, Math.random() * 30, -Math.random() * 50], scale: [1 + Math.random() * 2, 10 + Math.random() * 30, 1 + Math.random() * 2], color: new THREE.Color().setHSL(0.5 + Math.random() * 0.2, 1, 0.5) }); } return arr; }, []); useFrame((state) => { if (group.current) { group.current.position.z += 0.3; if (group.current.position.z > 10) { group.current.position.z = -50; } } }); return ( <group ref={group}> {spires.map((spire, i) => ( <mesh key={i} position={spire.position} scale={spire.scale}> <coneGeometry args={[1, 1, 8]} /> <meshStandardMaterial color={spire.color} emissive={spire.color} emissiveIntensity={0.8} metalness={0.9} roughness={0.1} /> </mesh> ))} {/* Floating platforms */} {[...Array(10)].map((_, i) => ( <mesh key={`platform-${i}`} position={[(Math.random() - 0.5) * 40, 10 + Math.random() * 20, -Math.random() * 40]} rotation={[0, Math.random() * Math.PI, 0]} > <torusGeometry args={[3 + Math.random() * 3, 0.5, 8, 16]} /> <meshStandardMaterial color={0x00ffff} emissive={0x00ffff} emissiveIntensity={0.5} metalness={0.8} roughness={0.2} /> </mesh> ))} <Hologram position={[0, 25, -30]} scale={4} color={0x00ffff} /> </group> ); }; const EclipseNexus = () => { const group = useRef(); const structures = useMemo(() => { const arr = []; for (let i = 0; i < 30; i++) { arr.push({ position: [(Math.random() - 0.5) * 80, (Math.random() - 0.5) * 30, -Math.random() * 50], scale: [1 + Math.random() * 3, 1 + Math.random() * 3, 1 + Math.random() * 3], color: new THREE.Color().setHSL(Math.random(), 1, 0.5) }); } return arr; }, []); useFrame((state) => { if (group.current) { group.current.position.z += 0.8; if (group.current.position.z > 10) { group.current.position.z = -50; } group.current.rotation.y += 0.01; } }); return ( <group ref={group}> {structures.map((structure, i) => ( <mesh key={i} position={structure.position} scale={structure.scale}> <icosahedronGeometry args={[1, 1]} /> <meshStandardMaterial color={structure.color} emissive={structure.color} emissiveIntensity={0.7} metalness={0.5} roughness={0.3} /> </mesh> ))} <DataStream /> <Aurora /> <Hologram position={[0, 0, -20]} scale={5} color={0xff00ff} /> </group> ); }; // --- Player --- const Player = ({ onCollect, onStageChange }) => { const mesh = useRef(); const [position, setPosition] = useState([0, 2, 0]); const [velocity, setVelocity] = useState([0, 0, 0]); const [stage, setStage] = useState(0); const keys = useRef({}); useEffect(() => { const handleKeyDown = (e) => { keys.current[e.key] = true; }; const handleKeyUp = (e) => { keys.current[e.key] = false; }; window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); return () => { window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); }; }, []); useFrame((state) => { if (!mesh.current) return; const delta = state.clock.getDelta(); const speed = 20; // Movement let moveX = 0; let moveZ = 0; if (keys.current['ArrowLeft'] || keys.current['a']) moveX -= 1; if (keys.current['ArrowRight'] || keys.current['d']) moveX += 1; if (keys.current['ArrowUp'] || keys.current['w']) moveZ -= 1; if (keys.current['ArrowDown'] || keys.current['s']) moveZ += 1; // Touch support if (state.pointer) { moveX += state.pointer.x * 2; moveZ += state.pointer.y * 2; } setPosition((prev) => { const newX = Math.max(-20, Math.min(20, prev[0] + moveX * speed * delta)); const newZ = Math.max(-30, Math.min(10, prev[2] + moveZ * speed * delta)); return [newX, 2, newZ]; }); // Stage transitions if (position[2] < -10 && stage === 0) { setStage(1); onStageChange(1); // Trigger particle explosion onCollect(position, 0xff00ff, 200); } else if (position[2] < -20 && stage === 1) { setStage(2); onStageChange(2); onCollect(position, 0x00ffff, 200); } // Visual effects mesh.current.rotation.x += delta * 5; mesh.current.rotation.y += delta * 3; // Trail effect const trail = new THREE.Vector3(...position); // Could add trail particles here }); return ( <mesh ref={mesh} position={position}> <octahedronGeometry args={[1, 0]} /> <meshStandardMaterial color={0xffffff} emissive={0x00ffff} emissiveIntensity={2} metalness={0.5} roughness={0.1} /> </mesh> ); }; // --- Collectibles --- const Collectible = ({ position, color, onCollect }) => { const mesh = useRef(); useFrame((state) => { if (mesh.current) { mesh.current.rotation.x += 0.05; mesh.current.rotation.y += 0.05; mesh.current.position.y += Math.sin(state.clock.elapsedTime * 2) * 0.02; } }); const handleClick = () => { onCollect(position, color, 50); }; return ( <mesh ref={mesh} position={position} onClick={handleClick} > <sphereGeometry args={[0.5, 16, 16]} /> <meshStandardMaterial color={color} emissive={color} emissiveIntensity={2} metalness={0.5} roughness={0.1} /> </mesh> ); }; // --- Main Scene --- const Scene = () => { const [stage, setStage] = useState(0); const [bursts, setBursts] = useState([]); const [score, setScore] = useState(0); const [combo, setCombo] = useState(0); const [flash, setFlash] = useState(0); const handleCollect = useCallback((position, color, count = 50) => { setBursts((prev) => [...prev, { position, color, count, id: Date.now() }]); setScore((prev) => prev + 10 * (combo + 1)); setCombo((prev) => prev + 1); setFlash(1); }, [combo]); const handleStageChange = useCallback((newStage) => { setStage(newStage); setCombo(0); setFlash(2); }, []); useEffect(() => { if (flash > 0) { const timer = setTimeout(() => setFlash(flash - 0.1), 50); return () => clearTimeout(timer); } }, [flash]); const collectibles = useMemo(() => { const arr = []; for (let i = 0; i < 20; i++) { arr.push({ position: [(Math.random() - 0.5) * 30, 2 + Math.random() * 5, -Math.random() * 40], color: new THREE.Color().setHSL(Math.random(), 1, 0.5) }); } return arr; }, [stage]); return ( <> {/* Stage rendering */} {stage === 0 && <NeonVeilDistrict />} {stage === 1 && <AetherSpire />} {stage === 2 && <EclipseNexus />} {/* Player */} <Player onCollect={handleCollect} onStageChange={handleStageChange} /> {/* Collectibles */} {collectibles.map((item, i) => ( <Collectible key={`${stage}-${i}`} position={item.position} color={item.color} onCollect={handleCollect} /> ))} {/* Particle bursts */} {bursts.map((burst) => ( <ParticleBurst key={burst.id} position={burst.position} color={burst.color} count={burst.count} /> ))} {/* Lighting */} <ambientLight intensity={0.2} /> <pointLight position={[10, 10, 10]} intensity={2} color={0xff00ff} /> <pointLight position={[-10, -10, -10]} intensity={2} color={0x00ffff} /> <spotLight position={[0, 20, 0]} angle={0.5} penumbra={1} intensity={5} color={0xffffff} /> {/* Post-processing */} <EffectComposer> <Bloom intensity={2.5} luminanceThreshold={0.2} luminanceSmoothing={0.9} height={300} /> <ChromaticAberration blendFunction={BlendFunction.NORMAL} offset={[0.002, 0.002]} /> <Glitch delay={[1.5, 3.5]} duration={[0.1, 0.3]} strength={[0.3, 1]} mode={GlitchMode.SPORADIC} /> <Noise opacity={0.02} /> <Vignette eskil={false} offset={0.1} darkness={0.9} /> <DepthOfField focusDistance={0.01} focalLength={0.02} bokehScale={2} /> <MotionBlur blendFunction={BlendFunction.NORMAL} strength={0.5} /> </EffectComposer> {/* Flash effect */} {flash > 0 && ( <mesh position={[0, 0, -10]}> <planeGeometry args={[100, 100]} /> <meshBasicMaterial color={0xffffff} transparent opacity={flash * 0.5} depthTest={false} /> </mesh> )} </> ); }; // --- UI Overlay --- const UIOverlay = ({ score, combo, stage }) => { const stageNames = ['NEON VEIL DISTRICT', 'AETHER SPIRE', 'ECLIPSE NEXUS']; return ( <div className="ui-overlay"> <div className="score"> <div className="score-label">SCORE</div> <div className="score-value">{score.toLocaleString()}</div> </div> {combo > 1 && ( <div className="combo"> <span className="combo-value">{combo}x</span> <span className="combo-label">COMBO</span> </div> )} <div className="stage-info"> <div className="stage-name">{stageNames[stage]}</div> <div className="stage-progress"> {[...Array(3)].map((_, i) => ( <div key={i} className={`stage-dot ${i === stage ? 'active' : ''} ${i < stage ? 'completed' : ''}`} /> ))} </div> </div> <div className="controls-hint"> <span>← → MOVE</span> <span>↑ ↓ SPEED</span> <span>TAP TO COLLECT</span> </div> <style jsx>{` .ui-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; font-family: 'Orbitron', monospace; color: #fff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); } .score { position: absolute; top: 20px; left: 20px; background: rgba(0, 0, 0, 0.5); padding: 10px 20px; border: 1px solid rgba(0, 255, 255, 0.3); border-radius: 5px; backdrop-filter: blur(10px); } .score-label { font-size: 12px; letter-spacing: 2px; color: #0ff; opacity: 0.7; } .score-value { font-size: 32px; font-weight: bold; color: #fff; } .combo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; animation: pulse 0.5s ease-in-out; } .combo-value { font-size: 48px; font-weight: bold; color: #ff0; text-shadow: 0 0 20px rgba(255, 255, 0, 0.5); } .combo-label { display: block; font-size: 16px; letter-spacing: 4px; color: #ff0; } .stage-info { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; background: rgba(0, 0, 0, 0.5); padding: 10px 20px; border: 1px solid rgba(0, 255, 255, 0.3); border-radius: 5px; backdrop-filter: blur(10px); } .stage-name { font-size: 18px; letter-spacing: 3px; color: #0ff; } .stage-progress { display: flex; justify-content: center; gap: 10px; margin-top: 5px; } .stage-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: all 0.3s; } .stage-dot.active { background: #0ff; box-shadow: 0 0 10px #0ff; } .stage-dot.completed { background: #0f0; box-shadow: 0 0 10px #0f0; } .controls-hint { position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: rgba(255, 255, 255, 0.5); text-align: right; } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } `}</style> </div> ); }; // --- Main App --- const App = () => { const [score, setScore] = useState(0); const [combo, setCombo] = useState(0); const [stage, setStage] = useState(0); return ( <div style={{ width: '100vw', height: '100vh', background: '#000' }}> <Canvas camera={{ position: [0, 5, 15], fov: 75 }} dpr={[1, 2]} gl={{ antialias: true, powerPreference: 'high-performance' }} > <Scene /> </Canvas> <UIOverlay score={score} combo={combo} stage={stage} /> <style jsx global>{` * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; background: #000; font-family: 'Orbitron', monospace; } canvas { touch-action: none; } `}</style> </div> ); }; export default App;