마우스로 조작하는 무지개색 3D 직육면체 만들기 (프롬프트 공유)
웹에서 3D 그래픽을 구현할 때 가장 많이 쓰이는 자바스크립트 라이브러리인 Three.js!
오늘은 AI(ChatGPT, Claude 등)를 활용해 마우스로 직접 조작할 수 있는 '무지개색 3D 직육면체'를 만드는 프롬프트와 그 결과물의 특징을 정리해 보았습니다.
아래 프롬프트를 복사해서 그대로 사용해 보세요!
모델 생성 요청 프롬프트
"Three.js 라이브러리를 사용하여 마우스 드래그로 시점을 회전하고 스크롤하여 확대/축소할 수 있는 3D 직육면체 모델을 생성해 주세요.
직육면체의 6개 면은 각각 무지개 색상(빨강, 주황, 노랑, 초록, 파랑, 보라)으로 구분하여 지정해야 합니다. 모델은 자동으로 회전하지 않으며, 오직 사용자(마우스) 조작에 의해서만 움직이도록 설정해야 합니다."
프롬프트가 반영된 결과물의 핵심 특징
위 프롬프트를 통해 생성된 3D 모델은 다음과 같은 기술적 특징을 가집니다.
| 항목 | 상세 내용 |
| 사용 라이브러리 | Three.js (마우스 제어를 위한 OrbitControls 포함) |
| 생성 객체 | 3D 직육면체 (BoxGeometry 활용) |
| 색상 적용 | 6개 면에 각각 다른 재질(Material) 배열을 적용하여 무지개 6색 지정 |
| 시점 회전 | 마우스 드래그를 통한 사용자 수동 회전 가능 |
| 확대/축소 | 마우스 스크롤(휠)을 통한 수동 줌인/줌아웃 기능 |
| 자동 움직임 | 자동 회전(AutoRotate) 기능 비활성화로 온전한 수동 조작 구현 |
