New

참조 이미지를 Three.js 모델 코드로 바꾸는 스킬, img2threejs

img2threejs는 참조 이미지 속 대상을 Three.js 코드로 재구성하는 스킬입니다. 형태·재질·조명을 단계별로 만들고 브라우저 렌더 결과를 비교합니다.

사진에서 무엇을 만들어내나요?

img2threejs는 참조 이미지에 있는 대상을 보고 브라우저에서 표시할 3D 모델 코드를 만듭니다. Three.js는 웹에서 3D 장면을 그리는 JavaScript 라이브러리입니다. 이 스킬은 기본 도형과 코드로 생성한 형태·재질을 조합해 대상을 재구성합니다.

일반적인 이미지→3D 변환과 어떻게 다른가요?

사진 여러 장으로 실제 물체를 측정하는 사진 측량 방식과는 다릅니다. 이미지에서 완성된 입체 파일을 바로 추출하는 서비스로도 설명하지 않습니다. 결과는 TypeScript 코드와 형태·재질 등의 설정을 담는 JSON 명세여서, 코드의 변경 내용을 비교하며 수정할 수 있습니다.

형태와 재질은 어떤 순서로 만드나요?

전체 덩어리와 구조를 잡은 뒤 세부 형태, 재질, 표면, 조명, 상호작용, 최적화 순서로 진행합니다. 각 단계의 렌더 결과를 참조 이미지와 대조하도록 설계되어 있어요. 공식 문서는 움직임을 붙일 수 있는 부품 계층도 결과에 포함한다고 안내합니다.

현재 저장소에는 인물·캐릭터를 다루는 경로와 선택적인 분야별 플러그인도 안내되어 있습니다. 하나의 사진에 보이지 않는 면의 구조나 인물의 닮은 정도를 완벽하게 보장하는 것은 아니며, 추가 시점이 필요할 수 있다는 조건을 함께 둡니다.

어떤 실행 환경이 필요한가요?

공식 README는 Claude Code, Codex, OpenCode에서 사용하는 방법을 안내합니다. 저장소를 스킬 디렉터리에 연결하고 참조 이미지를 전달하는 방식입니다. 포함된 Python 스크립트는 3.10 이상을 요구하고 표준 라이브러리를 사용합니다.

Python 스크립트에 추가 패키지가 필요 없다는 설명과 3D 결과를 실행할 환경이 필요 없다는 말은 다릅니다. 실제 장면은 Three.js를 실행하는 브라우저에서 확인해야 하며, 에이전트의 이미지 읽기·브라우저 도구도 작업 환경에 맞춰 준비해야 합니다.

이용 전에 확인할 점

저장소는 Apache License 2.0으로 공개되어 있습니다. 스킬 사용 조건과 참조 이미지의 권리는 별개입니다. 완성 여부는 코드 생성 성공만으로 판단하지 않고, 브라우저에서 형태와 재질을 비교하는 검수 결과까지 확인하는 방식입니다.

공식 자료

공식 저장소

Apache-2.0 라이선스

자료 카테고리

AI도구

자료 링크

공유하기