창작·CR-VS-TJ-001
이미지→Three.js 3D 코드 생성기
참고 이미지를 보고 절차형 Three.js 3D 코드로 재현—복붙 가능한 완성 코드
SAAH 품질관리기준 통과
- NVIDIA SkillSpector 보안 검사 통과— 통과
- SAAH 품질관리 기준 통과— review-evaluate · 주작
Three.js3DWebGL이미지투코드절차형생성TypeScript아키텍처
개요
사용자가 업로드한 이미지를 분석해 그와 유사한 3D 장면/오브젝트를 Three.js로 절차적으로 생성합니다. 완성된 TypeScript 코드를 바로 프로젝트에 통합할 수 있습니다.
주요 기능
- 이미지 비전 입력 → 자동 형태·색·재질 분석
- 절차형 Three.js 코드 생성 (Geometry·Material·Light·Shader)
- 애니메이션 준비 완료 런타임 계층구조(scene graph)
- 0 의존성, 순수 JavaScript/TypeScript
- 복사-붙여넣기로 즉시 통합 가능한 완성 코드
- 변수명·주석으로 직관적 커스터마이징 지원
- Three.js 외 별도 라이브러리 없이 작성(사용 전 검토·테스트 필요)
📖 대표 시나리오
제품 시뮤레이션 프로토타입
전자제품 디자인팀이 신제품 외형(예: 둥근 이어폰 케이스)의 3D 인터랙티브 미리보기를 웹에서 보고 싶어함
입력 예시
[제품 정면 사진 이미지] + "이 케이스를 3D로 만들어서 마우스로 회전할 수 있게 해줄 수 있어?"
[제품 정면 사진 이미지] + "이 케이스를 3D로 만들어서 마우스로 회전할 수 있게 해줄 수 있어?"
결과 요약
이어폰 케이스를 표현한 Three.js 코드 반환. 주요 형태는 원형·곡면으로 구현, 색상은 정면 사진의 컬러팔레트 추출, 마우스 컨트롤(OrbitControls 힌트) 포함
이어폰 케이스를 표현한 Three.js 코드 반환. 주요 형태는 원형·곡면으로 구현, 색상은 정면 사진의 컬러팔레트 추출, 마우스 컨트롤(OrbitControls 힌트) 포함
로고 입체화 & 애니메이션
마케팅팀이 평면 로고를 3D 회전 애니메이션으로 변환해 웹사이트 헤더나 광고에 쓰고 싶음
입력 예시
[로고 SVG/PNG 이미지] + "이 로고를 입체감 있게 3D로 만들고 부드럽게 계속 회전하도록 해줄 수 있어?"
[로고 SVG/PNG 이미지] + "이 로고를 입체감 있게 3D로 만들고 부드럽게 계속 회전하도록 해줄 수 있어?"
결과 요약
로고 형태를 3D 메시로 해석한 코드. 카메라 앵글·조명으로 입체감 강조, requestAnimationFrame 루프에서 자동 회전, 색상 유지
로고 형태를 3D 메시로 해석한 코드. 카메라 앵글·조명으로 입체감 강조, requestAnimationFrame 루프에서 자동 회전, 색상 유지
건축·가구 공간 시각화
인테리어/건축 전공자가 스케치나 실제 공간 사진을 3D 웹 모델로 빠르게 변환하고 싶음
입력 예시
[방 또는 가구 구성도 사진/스케치] + "이 레이아웃을 3D 모델로 만들어줄 수 있어? 색상도 사진처럼"
[방 또는 가구 구성도 사진/스케치] + "이 레이아웃을 3D 모델로 만들어줄 수 있어? 색상도 사진처럼"
결과 요약
공간의 주요 요소(벽·바닥·가구 등)를 simplified geometry로 표현한 Three.js 코드. 원본 사진의 색상 팔레트 자동 추출, 기본 조명 포함으로 공간감 표현
공간의 주요 요소(벽·바닥·가구 등)를 simplified geometry로 표현한 Three.js 코드. 원본 사진의 색상 팔레트 자동 추출, 기본 조명 포함으로 공간감 표현
바로 사용하기
에이전트 실행
📎 파일 첨부 (클릭 또는 드래그·다중 최대 10개·개별 50MB·총 200MB)