BBoilerplate

큐레이션

hoainho/img2threejs

참조 이미지를 절차적 Three.js 코드로 재구성하고 품질 게이트와 애니메이션 준비까지 연결하는 에이전트 스킬

Python·TypeScript1.2k+
hoainho/img2threejs 대표 이미지

요약

img2threejs는 참조 이미지 속 물체를 내려받은 3D 에셋이 아니라 절차적 Three.js 모델 코드로 다시 만드는 에이전트 스킬입니다. 형태·색·재질을 단계별로 만들고 브라우저 렌더와 비교 검수까지 진행합니다.

도구 소개

공식 README는 이미지 분석, 상세 요소 목록, SculptSpec 작성, 단계별 빌드, 브라우저 스크린샷, 비전 검수를 하나의 파이프라인으로 묶습니다. 결과물은 THREE.Group factory이며 피벗·소켓·충돌체 같은 런타임 계층을 포함해 애니메이션에 연결할 수 있습니다.

이미지를 사진측량이나 메시 추출로 바꾸는 도구가 아니라, 에이전트가 참고 이미지를 읽고 수정 가능한 코드 구조를 만드는 교육·실습용 흐름이라는 점이 핵심입니다.

사용 포인트

  • 제품·캐릭터 이미지를 웹에서 수정 가능한 3D 코드로 바꿀 때
  • 모델 생성 결과를 실제 렌더와 비교하며 품질 기준을 가르칠 때
  • 프리미티브·재질·조명·피벗을 분리해 Three.js 실습을 구성할 때

설치와 시작

공식 README의 기본 시작은 스킬 저장소를 내려받는 것입니다.

git clone https://github.com/hoainho/img2threejs.git ~/.claude/skills/img2threejs

Claude Code, Codex, OpenCode 등에서 이미지와 함께 다음처럼 호출합니다.

/img2threejs Rebuild this object as a Three.js model, keep the proportions, angles, and colours.

공식 스크립트는 Python 3.10+ 표준 라이브러리로 실행합니다.

선정 사유

GitHub API에서 1.2k+ stars, MIT 라이선스, 2026-07-20 최신 push를 확인했습니다. 라이브 데모 갤러리와 품질 게이트가 있어 이미지 생성 화제보다 오래 활용할 수 있는 코드 기반 3D 실습 워크플로우로 선정했습니다.

참고