Three.js와 커스텀 셰이더를 활용해 반응형 3D 인터랙티브 그래픽 게임을 제작할 때 유용합니다.
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게임 컨셉: 디지털 허공을 배경으로 하는 빠른 템포의 아케이드 "회피(dodge-em-up)" 게임입니다. 플레이어는 중심 에너지 스파크를 조종하여, 플레이어의 존재에 반응하는 10,000개 이상의 파란색과 보라색 파티클로 구성된 유체 같은 성운 사이를 누빕니다.
기술 프롬프트:
15,000개의 파티클이 포함된 Points 시스템을 특징으로 하는 Three.js 씬을 생성하세요. 글로우 효과를 위해 커스텀 ShaderMaterial을 사용하세요. 마우스 커서로부터 파티클이 튕겨 나가는 반발 로직을 구현하세요.
JavaScript
// 핵심 반발 수학 로직
let dist = particlePos.distanceTo(mousePos);
if (dist < 5) {
direction.subVectors(particlePos, mousePos).normalize();
particlePos.addScaledVector(direction, 0.2);
}
후처리를 위한 BloomPass를 포함하고 다음을 통해 60FPS 성능을 보장하세요출처 · prompts.chat · Cyber-Pulse: 3D Neon Particle Swarm — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
Three.js와 커스텀 GLSL 셰이더를 활용해 15,000개의 푸른빛·보라빛 입자가 플레이어 위치에 반응해 밀려나는 고성능 3D 성운 디스플레이 및 회피 아케이드 게임을 구현했습니다. 자동 시연 모드를 지원하며 언리얼 블룸 포스트 프로세싱 패스를 통해 빛나는 몽환적 디지털 무대를 완성하고 UI 요소와 실시간 조작 기능을 통합했습니다.
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 dynamic particle updates, custom shaders, and optimized render loops.Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
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 dynamic particle updates, custom shaders, and optimized render loops.Three.js와 커스텀 GLSL 셰이더를 활용해 15,000개의 푸른빛·보라빛 입자가 플레이어 위치에 반응해 밀려나는 고성능 3D 성운 디스플레이 및 회피 아케이드 게임을 구현했습니다. 자동 시연 모드를 지원하며 언리얼 블룸 포스트 프로세싱 패스를 통해 빛나는 몽환적 디지털 무대를 완성하고 UI 요소와 실시간 조작 기능을 통합했습니다.
원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.
Role: Senior WebGL/Three.js Developer.
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 particle nebula.
Task: Implement a complete Three.js scene featuring:
1. A `THREE.Points` system with 15,000 particles using `BufferGeometry` with dynamic blue (`[#00f0ff]`) and purple (`[#8a2be2]`) colors.
2. A custom `ShaderMaterial` for particle glowing soft-point effects.
3. Dynamic mouse repulsion physics updated per frame:
```javascript
let dist = particlePos.distanceTo(mousePos);
if (dist < 5) {
direction.subVectors(particlePos, mousePos).normalize();
particlePos.addScaledVector(direction, 0.2);
}
```
4. Post-processing bloom using `UnrealBloomPass` (strength: `[1.5]`, radius: `[0.4]`).
5. Optimized buffer updates ensuring stable 60FPS performance.
Output Format: Provide a single, fully functional HTML file with embedded JavaScript and CSS, including window resize handling.