서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것3D 모델과 도형
브라우저가 하는 일장면, 조명, 카메라 구성
나오는 것돌려 보는 3D 화면
쓰는 브라우저 기술
WebGLWebGPU
라이브러리와 모델
Three.js
바꿀 수 있는 옵션
- OrbitControls: 마우스로 돌려 보기
- GLTF 모델 불러오기
- 그림자와 재질
자주 막히는 곳
- 버전마다 되는 기능이 달라 AI가 쓴 코드가 안 돌 수 있다 (예: r128에는 CapsuleGeometry가 없음)
- 고해상도 모델은 휴대폰에서 느리다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI가 만든 3D 모델 뷰어
웹 서비스
- 제품 3D 뷰어
- 건물 대피 경로 3D
피지컬 AI
- 디지털 트윈 대시보드
넓히는 방법
- WebXR로 VR·AR 진입
- 센서 값으로 3D 모형 움직이기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
Three.js로 돌려 보고 확대할 수 있는 3D 사무실을 만들고 비상구 위치를 표시하는 웹페이지를 만들어줘.
같은 분류의 능력
08 시각화·모션·인터랙션에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md