Three.js r128
병무청 3D 신체검사 참고 시뮬레이터
해결하는 문제
신체검사 기준을 글로만 설명하면 이해하기 어렵다.
누를 수 있는 3D 인체 모형과 BMI 계산을 HTML 한 장에 담았습니다. 버전 차이로 생긴 오류를 고친 과정 자체가 교육 소재입니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것키·몸무게, 누른 신체 부위
브라우저가 하는 일3D 모형에서 부위를 찾아 기준 설명, BMI 계산
나오는 것부위별 안내와 판정 참고값
쓰는 브라우저 기술
WebGLRaycaster (클릭한 부위 찾기)DOM 계산기
라이브러리와 모델
Three.js r128
바꿀 수 있는 옵션
- 카메라 회전·확대
- 부위별 색 강조
- 안내 문구
자주 막히는 곳
- r128에는 CapsuleGeometry가 없어 CylinderGeometry로 바꿔야 했다
- AI가 최신 버전 기준으로 코드를 쓰면 구버전에서 안 돈다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 질문하면 해당 부위를 강조해 주는 상담 도우미
웹 서비스
- 민원 안내 3D 페이지
피지컬 AI
- 키오스크 터치 스크린 안내
넓히는 방법
- 다른 검사 항목 추가
- AR로 실제 크기 비교
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
Three.js r128로 누를 수 있는 3D 인체 모형을 만들고, 누른 부위의 안내 문구와 BMI 계산기를 함께 보여주는 HTML 파일 하나를 만들어줘.
같은 분류의 능력
08 시각화·모션·인터랙션에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md