Skip to main content
Prompts Three.js Repulsive Particle Nebula Scene

developer coding user risk: low

Three.js Repulsive Particle Nebula Scene

Create a Three.js scene featuring a Points system with 15,000 particles using a custom ShaderMaterial for glow effect. Implement repulsion logic where particles fly away from the m…

PROMPT 

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

REQUIRED CONTEXT

  • game concept description
  • technical prompt
  • core repulsion math snippet

ROLES & RULES

  1. Create a Three.js scene featuring a Points system with 15,000 particles.
  2. Use a custom ShaderMaterial for a glow effect.
  3. Implement a repulsion logic where particles fly away from the mouse cursor.
  4. Include a BloomPass for post-processing.
  5. Ensure 60FPS performance via

EXPECTED OUTPUT

Format
code
Constraints
  • use Points system with 15,000 particles
  • custom ShaderMaterial for glow
  • repulsion logic from mouse cursor
  • include BloomPass
  • ensure 60FPS performance
  • JavaScript code

SUCCESS CRITERIA

  • Feature 15,000 particles with glow effect using Points and ShaderMaterial.
  • Implement mouse-based particle repulsion.
  • Apply BloomPass post-processing.
  • Achieve 60FPS performance.

FAILURE MODES

  • Inefficient handling of 15,000 particles leading to poor FPS.
  • Incorrect repulsion logic not matching provided math.
  • Missing or improper glow shader effect.
  • Incomplete performance optimizations due to cutoff prompt.

EXAMPLES

Includes a JavaScript code snippet for core repulsion math.

CAVEATS

Missing context
  • Three.js version
  • Full scene setup (camera, renderer, animation loop)
  • Vertex/fragment shader code for glow
  • HTML/JS boilerplate structure
  • Performance optimization techniques
Ambiguities
  • Prompt cuts off abruptly: 'ensure 60FPS performance via'
  • Mismatch between game concept ('core energy spark' control) and technical prompt (mouse cursor repulsion)
  • No details on exact glow effect in custom ShaderMaterial
  • Unclear if repulsion logic is CPU or GPU-based for 15k particles

QUALITY

OVERALL
0.55
CLARITY
0.75
SPECIFICITY
0.80
REUSABILITY
0.25
COMPLETENESS
0.45

IMPROVEMENT SUGGESTIONS

  • Complete the sentence on 60FPS performance (e.g., 'via requestAnimationFrame and LOD')
  • Provide example vertex/fragment shaders for the glow effect
  • Clarify input mapping: 'Use mouse position to simulate player spark position'
  • Add output format: 'Provide a complete, standalone HTML file with embedded JS'
  • Include particle initialization details (positions, colors, sizes)

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER