시티 펄스
2025년 1월 뉴욕시 옐로 캡 운행 데이터를 살펴보는 인터랙티브 3D 모빌리티 아틀라스입니다. 3D 지도, 시간대별 운행 재생, 구역별 상세 조회, 평일 또는 주말 평균과의 비교 기능을 제공합니다.
인터랙티브
인터랙티브 3D 프롬프트와 웹사이트 예시
3D 포트폴리오, 제품 체험, 인터랙티브 실험을 탐색해 보세요. 마음에 드는 상호작용에 자신의 주제와 시각적 스타일을 더할 수 있습니다.
직접 시도할 3D 프롬프트 예제
나만의 작품으로 바꿀 아이디어 61개
인터랙티브 판타지 그래픽 데모
아이소메트릭 카메라, 조작 가능한 캐릭터, 반사되는 젖은 바닥, 주변 환경의 움직임을 구현한 브라우저 기반 Three.js 판타지 장면용 Dream Loop Plus 프롬프트입니다. 작성자는 GPT-5.6 Luna xhigh를 사용한 데모 프롬프트라고 명시했으며, 게시글에서는 최적화된 플로우에서 시각적 작업을 Astra가 수행한다고 설명합니다.
인터랙티브 3D 입자 충돌기
Three.js를 사용해 CERN의 LHC와 ATLAS에서 영감을 받은 인터랙티브 3D 입자 충돌기를 하나의 독립 실행형 HTML 파일로 제작하기 위한 작성자 추천 시작 프롬프트입니다. 공개된 결과물에 사용한 정확한 입력값이라기보다, 유사한 결과물을 제작하기 위한 프롬프트로 제시되었습니다.
몰입형 3D 논 웹사이트
자연스러운 바람 애니메이션, 조명 및 카메라 모드, 반응형 컨트롤, 프로시저럴 식생, 실시간 렌더링을 지원하는 브라우저 기반 Three.js 3D 논 풍경 제작 프롬프트입니다.
베이징 천단 기년전 TypeScript + Three.js WebGL 프로젝트
본문에서는 GPT-6 Astra와 Three.js로 제작한 베이징 천단 기년전 3D 모델과 웹 구현을 소개하며, 이어서 이와 같은 프로젝트를 제작하는 데 사용할 수 있는 전체 중국어 프롬프트를 공개합니다.
인터랙티브 젤리 레몬 나무
WebGPU로 상호작용 가능한 3D 젤리 레몬 나무를 만듭니다. 흔들리는 가지, 마우스로 집을 수 있는 레몬, 레몬이 찌그러지고 튕기는 물리 효과를 포함합니다.
작업대 위의 인터랙티브 로봇 펫
표현력 있는 모션, 눈에 보이는 배터리 셀, 충전 기능과 오브젝트 기반 작업 3가지를 갖춘 네 발 로봇을 위한 상세 Three.js 게임 사양입니다.
Three.js WebGPU로 만드는 끝없이 이어지는 미니어처 거리
배달 자전거와 상점, 젖은 도로 효과, 흩날리는 낙엽, 곡면형 월드, 픽셀 아트 스타일을 갖춘 인터랙티브 미니어처 거리 장면을 만들고, Forge 파라미터로 세부 설정을 조정해 보세요.
인터랙티브 스마트폰 분해도
분해·재조립 슬라이더, 선택 가능한 부품, 각 부품의 기능 설명을 포함한 3D 스마트폰 시각화를 제작합니다.
데스크톱 컴퓨터 분해 도감
데스크톱 컴퓨터를 29개 핵심 부품으로 나누어 살펴보는 인터랙티브 3D 웹사이트를 만드세요. 분해 애니메이션과 각 부품의 설명을 추가하세요.
직접 탐색하는 서울 미니어처
공개 지도 데이터로 Three.js 서울 미니어처를 만드세요. 지역별 탐색, 명소를 지나는 비행 시점, 주야간 모드, 터치 조작을 추가하세요. 단순화한 건물, 추정한 높이, 데이터 라이선스를 공개하세요.
두 개의 링으로 이루어진 에너지 코어
Blender에서 에너지 코어, 링 2개, 금속 받침대를 모델링하세요. 재질을 포함해 Three.js 뷰어로 내보내고 회전, 확대·축소, 자동 공전, 맥동 조작 기능을 추가하세요.
내 방을 인터랙티브 포트폴리오로
개인 방을 인터랙티브 자기소개 웹사이트로 바꾸세요. Blender에서 장면을 만들고 베이킹한 뒤, 커피 김, Matrix 스타일 애니메이션, 은은한 셰이더 효과를 추가하세요.
D4에서 영감을 받은 플레이 가능한 아파트
D4 주인공의 아파트를 조사하고 플레이 가능한 3D 프로토타입으로 재현하세요. 정확한 복제라고 단정하지 말고, 참고 자료와 비교해 구조와 상호작용을 확인하세요.
오디오 동기화 애니메이션이 적용된 플레이 가능한 3D 앙상블
Astra는 오디오 기반 애니메이션, 구간 탐색, 슬로 모션, 카메라 조작, MIDI 및 소스가 포함된 오리지널 단편과 플레이 가능한 3D 앙상블을 제작해 달라는 요청을 받았습니다.
궤도를 따라 탐색하는 태양계
행성 8개와 위성 20개를 포함한 브라우저용 태양계 탐색기를 Three.js로 만드세요. 카메라 이동과 단순화된 우주 비행 계획 기능을 제공하세요.
생물 발광으로 빛나는 심해 랜딩 페이지
Three.js 물 효과, 어두운 유리 느낌의 인터페이스, 스크롤에 연동되는 움직임으로 심해 랜딩 페이지를 만드세요. 3D 분위기와 명확하고 반응형인 웹사이트 상호작용을 조화롭게 구성하세요.
인터랙티브 Hyperloop 데모
운송 포드, 튜브 기반 시설, 시스템 내부의 움직임을 보여주는 인터랙티브 Three.js Hyperloop 데모를 만드세요.
스크롤로 움직이는 3D 스튜디오 웹사이트
제공된 참고 이미지를 Three.js 장면으로 바꾸고 부드러운 스크롤 연동 스튜디오 사이트에 넣으세요. 카메라 이동, 타이포그래피, 섹션 전환을 조율하세요.
굴절하는 병으로 전하는 제품 이야기
사실적인 WebGL 유리병을 중심으로 인터랙티브 제품 사이트를 만드세요. 브라우저 성능을 유지하면서 굴절하는 액체, 스크롤 연동 회전, 대담한 타이포그래피를 활용하세요.
추억 캡슐 머신
3D 추억 캡슐 머신을 만드세요. 손잡이를 돌리면 추억이 나오게 하고, 기구를 Blender로 모델링하며 떨어지는 캡슐에 자연스러운 움직임과 소리를 부여하세요.
첫 사용을 안내하는 애니메이션 디오라마
Blender로 작은 온보딩 디오라마를 만들고 Three.js에서 움직이게 하세요. 명확한 중심 오브젝트와 짧은 애니메이션으로 첫 사용자 행동을 설명하세요.
분해하며 살펴보는 인터랙티브 인체 해부
인체가 개별적으로 살펴볼 수 있는 구조로 분리되는 3D 해부학 사이트를 만드세요. 분해 보기를 조작할 수 있게 하고 각 부위를 의미 있는 기관계로 정리하세요.
자전거를 타는 인터랙티브 펠리컨
민트 그린 자전거를 자연스럽게 페달을 밟으며 달리는 펠리컨을 브라우저 기반 3D로 제작해 보세요. 오비트 컨트롤, 확대·축소, 속도 조절 기능을 지원합니다.
나만의 프롬프트로 바꿔 보세요
방문자가 클릭하거나 드래그하거나 바꿀 수 있는 것과 그 결과를 설명하세요. 첫 조작이 명확하게 보이도록 하고 마우스와 터치 조작을 모두 지정하세요.
보고, 읽고, 만들어 보세요
예제에 사용된 제작 기법을 배워 보세요.
디테일이 살아 있는 3D 에셋 만들기
다음 장면에 자세히 들여다보고 싶은 캐릭터를 더하세요. 이미지나 짧은 설명으로 정교한 텍스처가 있는 3D 에셋을 만들 수 있습니다.
3D 에셋 무료 생성