아바타 API 연동 가이드

1. 사용자가 방구석 여행에서 아바타(VRM 1.0)를 만들어 저장합니다.
2. 사용자가 방구석 여행에서 내 메타버스에 입장합니다.
   → 내 메타버스 주소에 토큰이 붙어서 열립니다.
     https://내-메타버스.com/?metatrip_token=<토큰>
3. 내 메타버스가 토큰으로 API 를 호출해 사용자와 아바타를 가져옵니다.
4. 받은 VRM 파일을 three.js + three-vrm 으로 불러와 씬에 배치합니다.

<!-- three.js + three-vrm (CDN, 빌드 도구 없이) -->
<script type="importmap">
{ "imports": {
  "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/",
  "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3.5.5/lib/three-vrm.module.min.js"
} }
</script>
<script type="module">
import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { VRMLoaderPlugin, VRMUtils } from "@pixiv/three-vrm";

// 1) 주소에서 토큰을 꺼내고, 주소창에서는 지운다 (토큰 노출 방지)
const params = new URLSearchParams(location.search);
const token = params.get("metatrip_token") ?? sessionStorage.getItem("metatrip_token");
if (params.has("metatrip_token")) {
  sessionStorage.setItem("metatrip_token", token);
  params.delete("metatrip_token");
  history.replaceState(null, "", location.pathname + (params.size ? "?" + params : "") + location.hash);
}

// 2) 사용자와 아바타 정보 가져오기
async function loadMetatripUser() {
  if (!token) return null;
  const res = await fetch("https://test.metatrip.net/api/v1/me", { headers: { Authorization: "Bearer " + token } });
  if (!res.ok) return null; // 토큰 만료 등 → 기본 아바타 사용
  return res.json();
}

// 3) VRM 불러와 씬에 추가
const scene = new THREE.Scene();
const loader = new GLTFLoader();
loader.register((parser) => new VRMLoaderPlugin(parser));

const me = await loadMetatripUser();
if (me?.avatar) {
  const gltf = await loader.loadAsync(me.avatar.url);
  const vrm = gltf.userData.vrm;
  VRMUtils.removeUnnecessaryVertices(gltf.scene);
  scene.add(vrm.scene);           // VRM 1.0: 정면 +Z, 키 약 1.3m, T 포즈
  // 팔 내리기 예시: vrm.humanoid.getNormalizedBoneNode("leftUpperArm").rotation.z = -1.2;
  // 매 프레임 vrm.update(delta) 를 호출해야 뼈 회전이 반영됩니다.
}
</script>

너는 three.js 웹 메타버스 개발자야. 내 메타버스에 "방구석 여행" 아바타 연동을 추가해 줘.

[연동 규격]
- 사용자가 방구석 여행에서 내 사이트로 입장하면 주소에 ?metatrip_token=<토큰> 이 붙는다. 토큰은 24시간 유효하다.
- 사용자 정보 API: GET https://test.metatrip.net/api/v1/me
  - 헤더: Authorization: Bearer <토큰>
  - 응답: { user: { id, name }, avatar: { format: "vrm", specVersion: "1.0", url, thumbnailUrl, updatedAt } | null, app, tokenExpiresAt }
  - avatar.url 은 VRM 1.0 파일 주소이고 1시간 후 만료된다. 오래 머무는 경우 /me 를 다시 호출해 새 주소를 받는다.
  - 오류: 401 missing_token / invalid_token, 429 rate_limited. 형식 { error: { code, message } }
- VRM 파일: glTF 바이너리 + VRMC_vrm 확장, 정면 +Z, 키 약 1.3m, T 포즈, 휴머노이드 뼈(hips, spine, chest, neck, head, 팔·다리) 포함.

[해야 할 일]
1. 페이지 로드 시 URL 에서 metatrip_token 을 읽어 sessionStorage 에 저장하고 history.replaceState 로 주소창에서 지운다.
2. 토큰이 있으면 /me 를 호출하고, avatar 가 있으면 GLTFLoader + @pixiv/three-vrm 의 VRMLoaderPlugin 으로 avatar.url 을 불러온다.
3. 불러온 VRM 을 내 플레이어 캐릭터 대신 사용한다. 기존 캐릭터의 위치·이동·카메라 추적 로직은 그대로 두고 모델만 바꾼다.
   - 높이를 내 월드 스케일에 맞게 조정하고, 매 프레임 vrm.update(delta) 를 호출한다.
   - 걷는 동안 팔다리를 흔드는 간단한 애니메이션을 vrm.humanoid.getNormalizedBoneNode(...) 회전으로 만든다.
4. 토큰이 없거나 API 가 실패하거나 avatar 가 null 이면 기존 기본 캐릭터를 그대로 쓴다. 오류 때문에 페이지가 멈추면 안 된다.
5. 화면 구석에 "방구석 여행 아바타로 입장 중 (이름)" 표시를 작게 띄운다.
6. 토큰을 콘솔이나 외부 분석 도구에 기록하지 않는다.

[내 프로젝트 정보]
- (여기에 사용 중인 three.js 버전, 빌드 도구(Vite 등), 플레이어 캐릭터 코드 파일 위치를 적어 주세요)

변경할 파일과 전체 코드를 보여 주고, 테스트 방법도 알려 줘.