완성본과 재료 내려받기

막혔다면 완성본을 새 폴더에 풀어 같은 동작을 해 보세요. 내 작업과 어디가 다른지 비교합니다. 게임 단계별 ZIP은 독립된 프로젝트라 앞 단계에 덮어쓸 필요가 없습니다.

1. 내려받기 목록

1단계는 서 있는 모습, 2단계부터는 이동을 비교합니다. 4단계부터 시작 버튼을 눌러 플레이합니다.

2. 압축을 푼 뒤 열기

2.1 프로필 카드와 3D 자기소개

index.html을 Chrome이나 Edge로 엽니다. 프로필 카드는 licat-200.png를 옆에 두면 인터넷 없이 열립니다. 공개할 때는 실습용 lycat@example.com을 내 공개용 주소로 바꾸세요.

3D 자기소개는 그림·스타일·실행 코드를 HTML 안에 담았습니다. CDN을 읽으므로 인터넷이 필요합니다.

채팅의 jsDelivr·Import Map 성공 사례는 2장 2절에 있습니다.

구·금속을 골라 드래그하고 회전 멈추기를 눌러 보세요. 움직임 줄이기 설정에서는 회전 시작하기로 켭니다.

2.2 상품 페이지와 게임

Code 탭 → Local → Open folder…로 package.json·package-lock.json·index.html이 있는 폴더를 엽니다.

이 폴더의 README.md와 package.json을 읽고 완성본을 실행해줘.
Node가 필요한 버전에 맞는지 먼저 확인하고, 없으면 설치 방법을 안내해줘.
package-lock.json에 맞춰 npm ci로 설치한 뒤 개발 화면을 열어줘.
내가 브라우저에서 열 정확한 주소와 확인할 동작을 알려줘.

직접 실행한다면 그 폴더의 터미널에 입력합니다.

npm ci
npm run dev

출력된 HTTP 주소를 엽니다. 이 프로젝트의 index.html은 더블클릭으로 열지 않습니다.

제주상점 한라봉: 드래그·두 빛깔 전환·담아 보기를 확인합니다. 가격과 구성은 예시이며 결제 없이 안내만 나옵니다.

상품 ZIP의 scripts/는 모델 재생성 도구, .github/는 GitHub Pages 대안용입니다. 평소 실행에는 필요 없습니다.

라이캣의 귤밭 산책: 방향키·WASD로 60초 안에 떠 있는 감귤 10개를 모읍니다. 나무의 작은 귤은 배경입니다. 최종판은 Shift 달리기와 같은 브라우저의 최고 기록도 지원합니다.

npm run build 후 npm run preview로 빌드한 결과도 봅니다. 공개할 준비는 2장 5절·3장 6절을 따릅니다.

2.3 게임 재료만 가져오기

03-game-assets.zip은 새 게임에 넣을 재료 묶음입니다. 플레이할 소스는 위의 단계별·최종판 ZIP을 받으세요.

README.md
에셋출처.md
SOUNDS-CC0.txt
public/
├── models/
│   ├── character.glb
│   └── item.glb
└── sounds/
    ├── bgm.mp3
    ├── pickup.mp3
    └── clear.mp3

ZIP의 public을 my-game에 그대로 넣습니다. 이미 있다면 안의 폴더를 합칩니다. 에셋출처.md·SOUNDS-CC0.txt도 함께 둡니다. README.md도 같은 순서를 안내합니다.

• 재료를 넣고 복사할 요청: 제공 재료 검사
• 3장 2절의 파일 준비 순서

상품·게임 완성본도 같은 public/models/·public/sounds/ 규칙입니다. 코드 주소에는 public/을 빼고 import.meta.env.BASE_URL에 models/...·sounds/...를 붙입니다.

이 뷰어는 최종판을 npm run dev로 실행한 주소의 /assets.html에서 엽니다. 재료 ZIP이나 기본 배포 빌드에는 없으며, 뷰어 실행 요청으로 열어도 됩니다.

3. 에셋 출처와 이용 범위

각 ZIP의 에셋출처.md와 라이선스 고지를 함께 보관하세요. 캐릭터·모델·소리는 적용 조건이 다릅니다.

위니브 캐릭터·모델은 교재 실습용입니다. 캐릭터에 CC0나 별도 일반 상업 이용권이 주어진 것은 아닙니다. 상품 질감은 코드로 만들었고 소리는 외부 곡·녹음·샘플 없이 합성했습니다.

Three.js 고지는 THREE-LICENSE.txt 또는 THIRD_PARTY_LICENSES.md, Vite 고지는 VITE-LICENSE.md 또는 THIRD_PARTY_LICENSES.md에 있습니다.

내 재료로 바꾼다면 3장 2절의 선택 실습을 봅니다. 다운로드·공개·상업 이용·원본 재배포 조건을 각각 확인하고 출처 기록을 고칩니다.

CC BY는 제작자·출처 링크·라이선스와 링크·수정 여부를 조건에 맞춰 남깁니다. CC0도 인물·상표 같은 별도 권리는 확인합니다.

• Three.js 공식 저장소
• Vite 공식 저장소
• CC0 1.0 안내

4. 버전과 비교 기준

내려받는 완성본의 실행 기준입니다.

Code 탭 설치와 Vite용 Node 준비는 별개입니다. 실제 휴대폰 조작은 내 공개 주소에서 확인합니다.

상품·게임 ZIP에는 node_modules·dist가 없습니다. npm ci로 설치하고 빌드하면 dist가 생깁니다.

• Vite 시작 안내와 Node 조건
• Three.js 설치 안내
• 증상별 해결 요청문
• 개념 사전