# AI 꾸러미 — 렌즈 · 유리 (굴절 · 반사 코팅)
> 조준경 렌즈를 투과 · 굴절 재질로, 보랏빛 코팅 반사 · 안쪽 조준선  
> 견본: https://ai-techstudio.web.app/#t/i473

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

## 주문서

### 만들어 줘: 렌즈 · 유리 (굴절 · 반사 코팅)

#### 1. 목표
조준경에 「렌즈 · 유리 (굴절 · 반사 코팅)」 기술을 깔끔한 기본 느낌으로 넣어 줘. — 조준경 렌즈를 투과 · 굴절 재질로, 보랏빛 코팅 반사 · 안쪽 조준선

#### 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. 완성 기준 (이게 보이면 성공)
- 견본처럼 「조준경 렌즈를 투과 · 굴절 재질로, 보랏빛 코팅 반사 · 안쪽 조준선」 이(가) 첫 화면에서 바로 보인다
- 켬/끔(또는 전/후) 비교 단추로 이 기술이 만드는 차이를 확인할 수 있다
- 중요한 값 1~3개를 슬라이더로 바꿔 볼 수 있다
- 콘솔 오류 0, 폰 폭(390px)에서도 동작한다

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

## 원리
- 조준경 렌즈를 투과 · 굴절 재질로, 보랏빛 코팅 반사 · 안쪽 조준선


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

## 완성 기준 체크리스트
- [ ] 견본처럼 「조준경 렌즈를 투과 · 굴절 재질로, 보랏빛 코팅 반사 · 안쪽 조준선」 이(가) 첫 화면에서 바로 보인다
- [ ] 켬/끔(또는 전/후) 비교 단추로 이 기술이 만드는 차이를 확인할 수 있다
- [ ] 중요한 값 1~3개를 슬라이더로 바꿔 볼 수 있다
- [ ] 콘솔 오류 0, 폰 폭(390px)에서도 동작한다

## 이 기술 정보
- id: `i473` · 분류: 3D 모델 · 캐릭터 › 하드서피스 · 실사 렌더링 · 3D · 난이도 보통 · 폰 부담 보통 (폰 주의)
- 라이브 견본 (브라우저에서 직접 조작): https://ai-techstudio.web.app/#t/i473
- 쓰면 좋을 때: 쓰면 좋을 곳 — 조준경 · 카메라 · 보석

## 견본 실제 코드 (라이브 견본이 돌리는 코드 — three.js · TypeScript)
### timed — `src/demos/demosHard.ts:1634`
```ts
function timed(id: string, f: () => Scene3D): () => Scene3D {
  return () => {
    const t0 = performance.now();
    const sc = f();
    STATS.make[id] = +(performance.now() - t0).toFixed(2);
    const r0 = sc.render!.bind(sc);
    sc.render = (r, w, h) => {
      const a = performance.now();
      r0(r, w, h);
      STATS.frame[id] = +lerp(STATS.frame[id] ?? 0, performance.now() - a, 0.05).toFixed(2);
      STATS.kitMs = +kitBuildMs().toFixed(1);
    };
    return sc;
  };
}
```

### i473 견본 항목 — `src/demos/demosHard.ts:1656`
```ts
  i473: { kind: '3d', caption: '조준경 렌즈: 뒤 숫자판이 굴절로 휘고, 보랏빛 코팅이 반사 · 붉은 홀로 조준점', make: timed('i473', demo473) }
```

## 관련 기술
- 이 효과를 만든 기술: [투과 · 굴절 (유리 · 얼음)](https://ai-techstudio.web.app/ai/t/u07.md) `u07`