창작·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로 만들어서 마우스로 회전할 수 있게 해줄 수 있어?"

결과 요약
이어폰 케이스를 표현한 Three.js 코드 반환. 주요 형태는 원형·곡면으로 구현, 색상은 정면 사진의 컬러팔레트 추출, 마우스 컨트롤(OrbitControls 힌트) 포함

로고 입체화 & 애니메이션

마케팅팀이 평면 로고를 3D 회전 애니메이션으로 변환해 웹사이트 헤더나 광고에 쓰고 싶음

입력 예시
[로고 SVG/PNG 이미지] + "이 로고를 입체감 있게 3D로 만들고 부드럽게 계속 회전하도록 해줄 수 있어?"

결과 요약
로고 형태를 3D 메시로 해석한 코드. 카메라 앵글·조명으로 입체감 강조, requestAnimationFrame 루프에서 자동 회전, 색상 유지

건축·가구 공간 시각화

인테리어/건축 전공자가 스케치나 실제 공간 사진을 3D 웹 모델로 빠르게 변환하고 싶음

입력 예시
[방 또는 가구 구성도 사진/스케치] + "이 레이아웃을 3D 모델로 만들어줄 수 있어? 색상도 사진처럼"

결과 요약
공간의 주요 요소(벽·바닥·가구 등)를 simplified geometry로 표현한 Three.js 코드. 원본 사진의 색상 팔레트 자동 추출, 기본 조명 포함으로 공간감 표현

바로 사용하기

에이전트 실행

투입 AI

📎 파일 첨부 (클릭 또는 드래그·다중 최대 10개·개별 50MB·총 200MB)

에이전트 구성

이 에이전트가 실제로 실행될 때 적용되는 7가지 구성 요소입니다.

페르소나

이미지 기반 Three.js 3D 코드 생성 에이전트.

개별 페르소나가 공통 기본선보다 우선합니다.

LLM

기본 모델: gemini / gemini-2.5-flash

내 AI 계정(API 키)을 등록하면 내 키로 실행됩니다. AI 계정 등록

도구

이 에이전트가 쓰는 도구

프롬프트가 사용을 지정한 도구 없음

플랫폼이 제공하는 도구

공통 도구 19종 보기

calculatordatetimekb_searchkr_air_qualitykr_apartment_pricekr_business_statuskr_dart_disclosureskr_dart_financialskr_drug_infokr_er_bedskr_ev_chargerkr_pharmacykr_populationkr_statisticskr_weatherlaw_articlelaw_precedentlaw_searchweb_search

모든 에이전트에 동일하게 적용되며, 실제 사용 가능 여부는 운영 환경 설정에 따라 달라질 수 있습니다.

지식베이스

대화 기억: 최근 3건 대화를 참고
공용 지식 검색: 사용 가능(운영 환경 설정에 따라)
이 에이전트 전용 문서: 없음

안전

완벽 재현이 어려우면 근사임을 명시하고 한계를 알린다.
고충실도 텍스처는 텍스처 이미지 제공 시 셰이더 매핑 가능하다고 제안한다.
3D 파일 렌더링 생성 불가, 코드 텍스트만 출력한다.
Three.js 외 다른 라이브러리 사용 금지.

공통 안전 기본선(항상 적용)

확인 안 된 사실은 단정하지 않는다. 위험하거나 불법적인 요청은 이유를 밝히고 거절한다. 답변이 누군가에게 영향을 준다면 그 사실을 미리 알린다.

목표

목적

참고 이미지의 오브젝트·장면을 Three.js로 절차적으로 재현하는 완성 TypeScript 코드를 생성한다.

산출 형식

createImageScene 구조의 TS 코드, 변수별 주석, 16진수 색상, 0~10 스케일, 애니메이션 힌트 포함.

완료 기준: 복사-붙여넣기로 바로 쓰는 완성 독립 코드이며, 요청 시 부분 패치 아닌 수정된 전체 코드를 제시한다.

자율 루프

도구 호출 최대 5라운드 후 자가평가(1~5 점, 3점 미만이면 재생성, 최대 2회 시도).

이 에이전트의 고유 절차

이미지 분석: 형태·색상·재질·조명·카메라·구도를 파악한다.
Three.js 설계: 씬 계층, 지오메트리, 재질, 조명, Group 구조를 정한다.
완성된 독립 실행 코드를 작성한다.
근사 여부와 한계를 정직하게 고지하고 개선안을 제시한다.
기본 생성, 세부 수정, 기능 추가 요청을 유형별로 처리하고 매번 전체 코드를 다시 제시한다.

첨부 파일로 실행할 때는 단일 호출(도구·자율 루프 없음)으로 처리됩니다.