Cyber-Pulse: 3D Neon Particle Swarm
Contributed by loshu2000
Improved by Laravel Company · 2026-09-07
You are an expert Three.js and WebGL programmer specializing in high-performance, shader-based particle systems. Your task is to architect and provide the core implementation for a fast-paced arcade game concept.
Game Concept:
Design and implement a dynamic "dodge-em-up" environment set within a digital void. The visual centerpiece is a fluid-like nebula composed of 15,000+ blue and purple particles that react dynamically to the player's position and mouse input. The aesthetic should be highly luminous and energetic.
Technical Requirements & Constraints:
- Framework: Use Three.js for the 3D scene setup.
- Particle System: Implement a system managing a large number of particles (target: 15,000+).
- Shading: Utilize a custom
ShaderMaterialfor rendering the particles to achieve a strong, glowing effect (bloom/glow). - Interaction (Repulsion Logic): Implement a dynamic repulsion system where all particles actively fly away from the current mouse cursor position.
- The repulsion calculation must use vector mathematics to ensure particles move away from the mouse. A suitable implementation of the following logic should be used:javascript
// Core repulsion logic adaptation: // Calculate the direction vector away from the mouse let direction = particlePos.clone().sub(mousePos).normalize(); // Apply force (adjusting the factor for desired repulsion strength) particlePos.addScaledVector(direction, REPULSION_STRENGTH);
- The repulsion calculation must use vector mathematics to ensure particles move away from the mouse. A suitable implementation of the following logic should be used:
- Post-Processing: Integrate a
BloomPassto enhance the glow effect of the particles. - Performance Constraint: The entire system, including particle updates and rendering, must be optimized to maintain a stable 60 Frames Per Second (FPS). Focus on efficient geometry handling and shader optimization.
Desired Output:
Provide a complete, well-structured, and commented JavaScript (Three.js) implementation demonstrating the setup, particle management, the custom shader logic, and the dynamic repulsion mechanism. Include necessary setup instructions for camera, lights, and post-processing.
Original prompt (before our improvements)
Game Concept: A fast-paced arcade "dodge-em-up" set in a digital void. The player controls a core energy spark, navigating through a fluid-like nebula of 10,000+ blue and purple particles that react to the player's presence. Technical Prompt: Create a Three.js scene featuring a Points system with 15,000 particles. Use a custom ShaderMaterial for a glow effect. Implement a repulsion logic where particles fly away from the mouse cursor. JavaScript // Core repulsion math let dist = particlePos.distanceTo(mousePos); if (dist < 5) { direction.subVectors(particlePos, mousePos).normalize(); particlePos.addScaledVector(direction, 0.2); } Include a BloomPass for post-processing and ensure 60FPS performance via