웹 게임에서 에셋 실행하기

이 완전한 Three.js 예제는 애니메이션 크리처, 동작 선택, 아이템 PNG, 버튼으로 재생하는 사운드 변형을 보여줍니다. 실제 게임과 같은 assets.json 계약을 사용합니다. 지형 엔진이나 완성 게임이 아닌 에셋 임포트 예제입니다.

내려받고 실행하기

웹 게임 프로젝트를 별도 폴더에 풀고 CLI 패키지를 넣으세요. Node.js 24 이상에서 실행합니다.

npm install
npm install --save-dev ./ashfox-cli.tgz
npm run assets
npm start

서버가 출력한 로컬 URL을 열고 터미널을 유지하세요. WAV를 사용하므로 FFmpeg는 필요 없습니다. 에셋 빌드에 Chrome은 필요 없지만 게임을 보려면 WebGL 브라우저를 사용합니다. 모델·오디오가 HTTP 경로로 로딩되므로 index.html을 파일 URL로 열지 마세요.

결과 확인하기

• 대체 물체 없이 Griffin이 나타납니다.
• 선택기에서 모든 동작을 골라 모델 애니메이션을 확인합니다.
• 철검 이미지의 픽셀 가장자리가 선명합니다.
• Play claw hit을 여러 번 눌러 생성 변형을 듣습니다. 오디오는 페이지 로딩 시 강제 재생하지 않고 클릭 후 시작합니다.
• 상태 줄이 로딩한 에셋 또는 실제 로드·재생 오류를 표시합니다.

main.js는 안정적인 에셋 ID를 찾고 GLTFLoader로 GLB를 읽으며 AnimationMixer로 클립을 선택하고 스프라이트 URL과 선택 WAV를 사용합니다. 포함된 소스를 엔진 리소스 API로 교체할 수 있습니다. Three.js는 예제의 package.json에 고정되어 있습니다.

변경하고 다시 빌드하기

assets/의 네이티브 원본을 편집하고 출력 설정·런타임 ID는 assets/.ashfoxworkspace에서 바꾸세요. npm run assets를 다시 실행하고 페이지를 새로 고칩니다. 스크립트는 완전한 번들을 빌드하고 선택된 런타임 폴더만 public/game-assets로 복사합니다. 게임 카메라·조명에서 확인하기 전에 캡처로 소스 변경을 리뷰하면 좋습니다.

예제는 미터당 엔진 단위 1, portable GLB, nearest 스프라이트 필터를 사용합니다. glTF 축은 로더가 처리하므로 보상하려고 원본을 추가 회전하지 마세요. 모델의 u 하나는 1/16미터입니다. unitsPerMeter는 임포트 힌트이며 예제에서 한 번 적용합니다. HTML 아이템은 UI 이미지이므로 화면 크기는 CSS가 결정하고, pixelsPerUnit은 월드 공간에 스프라이트를 배치할 때 중요합니다.

다른 엔진 사용하기

텍스처·오디오 상대 경로가 유지되도록 game-assets 폴더 전체를 사용하세요. 런타임 ID를 게임의 임포터·리소스 핸들에 연결하고 매니페스트의 크기·필터·사운드 변형 메타데이터를 의도적으로 적용합니다. GLB 임포트·애니메이션 지원은 엔진마다 다르므로 optimized 인코딩 전에 검증하세요. 이 예제는 Unity·Godot·Unreal 인증을 주장하지 않습니다. 게임 번들 메타데이터와 임포트 문제 해결을 참고하세요.