Three.js 상황실
지진 재난대응 3D 시뮬레이터
해결하는 문제
재난 대응 단계와 대피 흐름을 한눈에 보여 줄 시연 화면이 필요하다.
상황실 화면 느낌의 3D 도시와 위기경보 4단계, 대피 애니메이션을 HTML 한 장으로 만든 시연물입니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것경보 단계 선택
브라우저가 하는 일단계에 따라 도시 조명·경보·대피 동선 애니메이션 변경
나오는 것상황실형 3D 시뮬레이션 화면
쓰는 브라우저 기술
WebGLrequestAnimationFrameDOM 상황판
라이브러리와 모델
Three.js
바꿀 수 있는 옵션
- 경보 단계별 연출
- 건물 수와 대피 경로
- 상황판 정보
자주 막히는 곳
- 건물과 사람이 많아지면 저사양 PC에서 끊긴다
- 시연용과 실제 판단용을 혼동하지 않게 표시해야 한다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 상황별 대응 문안을 AI가 생성
웹 서비스
- 기관 재난 교육 콘텐츠
피지컬 AI
- 상황실 대형 화면, 경광등 연동
넓히는 방법
- 실제 지도·건물 데이터 연결
- 훈련 시나리오 녹화
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
Three.js로 3D 도시를 만들고 위기경보 4단계 버튼에 따라 조명, 경보, 대피 애니메이션이 바뀌는 재난 상황실 시뮬레이터를 HTML 하나로 만들어줘.
같은 분류의 능력
08 시각화·모션·인터랙션에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md