# AI 꾸러미 — 순간 빛 (점광 번쩍)
> 마법이 터질 때 주변을 비추는 점광이 0.2초 번쩍 — 장면 전체가 반응  
> 견본: https://ai-techstudio.web.app/#t/i179

이 문서를 코드 도우미(Claude Code · Cursor · ChatGPT 등)에 그대로 주면 돼요. 「## 주문서」 가 할 일, 나머지는 참고 자료예요.

## 주문서

### 만들어 줘: 순간 빛 (점광 번쩍)

#### 1. 목표
폭발에 「순간 빛 (점광 번쩍)」 기술을 깔끔한 기본 느낌으로 넣어 줘. — 마법이 터질 때 주변을 비추는 점광이 0.2초 번쩍 — 장면 전체가 반응

#### 2. 핵심 기술 용어
- 순간 빛 (점광 번쩍) — 마법이 터질 때 주변을 비추는 점광이 0.2초 번쩍 — 장면 전체가 반응

#### 3. 환경
- 플랫폼: three.js r186 (ES 모듈 · TypeScript, `import * as THREE from "three"`), WebGL2, 외부 라이브러리 추가 없이
- 화면: 3D · 브라우저 — PC 와 폰(가로 844×390 · 세로 390×844) 모두, 60fps 목표

#### 4. 조건
- 한 프레임 16ms 안 (폰 포함) — 무거운 계산은 처음에 한 번 또는 여러 프레임에 나눠서
- 새 재질 · 셰이더는 첫 화면 전에 미리 컴파일 (renderer.compileAsync)
- 화면 가장자리 흐림 · 비네트로 얼버무리지 않기
- 외부 라이브러리 추가 없이 three.js 와 three/examples 만

#### 5. 완성 기준 (이게 보이면 성공)
- 견본처럼 「마법이 터질 때 주변을 비추는 점광이 0.2초 번쩍 — 장면 전체가 반응」 이(가) 첫 화면에서 바로 보인다
- 켬/끔(또는 전/후) 비교 단추로 이 기술이 만드는 차이를 확인할 수 있다
- 중요한 값 1~3개를 슬라이더로 바꿔 볼 수 있다
- 콘솔 오류 0, 폰 폭(390px)에서도 동작한다

#### 6. 진행 방식
- 핵심 코드 위주로, 설명은 짧게. 내 프로젝트에 끼워 넣기 쉬운 함수 · 클래스로 나눠 줘.
- 처음 화면에 바로 결과가 보이게, 그리고 켬/끔(또는 전/후) 비교를 할 수 있게 만들어 줘.
- 그림 · 소리 · 모델 파일이 필요하면 코드로 만든 임시 대체물로 먼저 돌아가게 하고, 진짜 파일로 바꿀 자리를 표시해 줘.
- 마지막에 「확인 방법」(무엇을 보면 성공인지)과 「조절할 값」 목록을 짧게 정리해 줘.
- 답변과 코드 주석은 한국어로 해 줘.

## 원리
- 마법이 터질 때 주변을 비추는 점광이 0.2초 번쩍 — 장면 전체가 반응


## 흔한 실수 · 확인 목록
- (아직 정리된 것이 없어요)

## 완성 기준 체크리스트
- [ ] 견본처럼 「마법이 터질 때 주변을 비추는 점광이 0.2초 번쩍 — 장면 전체가 반응」 이(가) 첫 화면에서 바로 보인다
- [ ] 켬/끔(또는 전/후) 비교 단추로 이 기술이 만드는 차이를 확인할 수 있다
- [ ] 중요한 값 1~3개를 슬라이더로 바꿔 볼 수 있다
- [ ] 콘솔 오류 0, 폰 폭(390px)에서도 동작한다

## 이 기술 정보
- id: `i179` · 분류: 이펙트 · 연출 › 스킬 VFX (마법 · 미사일) · 3D · 난이도 쉬움 · 폰 부담 보통 (폰 주의)
- 라이브 견본 (브라우저에서 직접 조작): https://ai-techstudio.web.app/#t/i179
- 쓰면 좋을 때: 쓰면 좋을 곳 — 폭발 · 번개 · 소환

## 견본 실제 코드 (라이브 견본이 돌리는 코드 — three.js · TypeScript)
### i179 견본 항목 — `src/demos/demosSkillA.ts:2353`
```ts
  i179: {
    kind: '3d',
    caption: '터지는 순간 점광이 0.2초 번쩍 — 기둥 · 바위 · 바닥이 함께 밝아진다 (켬/끔 번갈아)',
    make(): Scene3D {
      const S = makeStage({ light: 0.7 });
      const fx = new Fx(S, 1200);
      const lab = S.hud.label('tl');
      for (let i = 0; i < 6; i++) {
        const a = (i / 6) * TAU + 0.3;
        const p = pillar(2.2 + (i % 2) * 0.6);
        p.position.set(Math.cos(a) * 2.8, 0, Math.sin(a) * 2.1);
        S.scene.add(p);
      }
      for (let i = 0; i < 5; i++) {
        const r = rock(R(0.25, 0.5), 20 + i);
        const a = R(0, TAU);
        r.position.set(Math.cos(a) * R(1.2, 2.2), r.position.y, Math.sin(a) * R(1, 1.8));
        S.scene.add(r);
      }
      let auto = true;
      let lightOn = true;
      let peak = 1;
      let hue = 0;
      const HUES = [0xa8d8ff, 0xffa050, 0xc080ff];
      let timer = 0.3;
      let shot = 0;
      let cur = true;
      const fire = (force = false): void => {
        shot++;
        if (force && auto && shot % 2 === 0) shot++;
        cur = auto ? shot % 2 === 1 : lightOn;
        fx.lightOn = cur;
        const col = HUES[hue]!;
        const rp = hue === 0 ? RAMP.ice : hue === 1 ? RAMP.spark : RAMP.magicSpark;
        fx.fire.spawn({ x: 0, y: 0.8, z: 0, life: 0.22, s0: 2.2, s1: 3.6, ramp: hue === 0 ? flat(0xe0f0ff, 9, 1) : RAMP.flash, shape: 0 });
        for (let i = 0; i < 90; i++) {
          const d = sphereDir();
          const sp = R(3, 9);
          fx.fire.spawn({ x: 0, y: 0.8, z: 0, vx: d.x * sp, vy: d.y * sp, vz: d.z * sp, life: R(0.4, 1.0), s0: 0.08, s1: 0.02, ramp: rp, st: 0.05, shape: 2, drag: 1.2, grav: 5, bnc: 0.3 });
        }
        fx.ring(0, 0, 2.6, 0.45, col, 2.5);
        fx.flash(0, 1.0, 0, 160 * peak, col);
      };
      const controls: Control[] = [
        ctrlTog('순간 빛 (점광)', true, (v) => {
          auto = false;
          lightOn = v;
        }),
        ctrlRange('빛 세기', 0.2, 2.5, 0.1, 1, (v) => (peak = v)),
        ctrlRange('빛 색 (0 번개 · 1 불 · 2 마법)', 0, 2, 1, 0, (v) => (hue = v)),
        ctrlBtn('다시 터뜨리기', () => {
          timer = 2.4;
          fire(true);
        }),
      ];
      return {
        scene: S.scene,
        camera: S.cam,
        controls,
        update(t, dt0) {
          const dt = Math.min(dt0, 0.05);
          timer -= dt;
          if (timer <= 0) {
            timer = 2.2;
            fire();
          }
          lab.set(cur ? '점광 번쩍 켬 — 장면이 반응' : '점광 없음 — 입자만 빛남', cur ? '#a8d8ff' : '#888');
          fx.update(dt, t);
          S.tick(dt);
        },
        resize: (w, h) => S.resize(w, h),
        dispose: () => S.dispose(),
      };
    },
  }
```

## 관련 기술
- 이 효과를 만든 기술: [층 쌓기 (핵 · 빛무리 · 불티 · 연기)](https://ai-techstudio.web.app/ai/t/i171.md) `i171`