<!DOCTYPE html>
<html>
<head>
<title>BVH to AnimationClip Raw Data Viewer</title>
<meta charset="utf-8">
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.158.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
}
}
</script>
</head>
<body>
<h1>BVH Data Inspector</h1>
<p>ブラウザの開発者コンソール（F12キー）を開いて、出力を確認してください。</p>
<script type="module">
// 必要なライブラリをインポートします
import * as THREE from 'three';
import { BVHLoader } from 'three/addons/loaders/BVHLoader.js';
// 対象のBVHファイル
const BVH_URL = 'https://p-bookmark.sakura.ne.jp/junkerstock/vrm/8.bvh';
console.log(`🚀 スクリプト開始。BVHファイルの読み込みを開始します...`);
// 1. BVHローダーを作成
const loader = new BVHLoader();
// 2. BVHファイルを読み込み
loader.load(
BVH_URL,
// 成功時に実行される関数
(bvh) => {
console.log('%c✅ BVHファイルの読み込みに成功しました！', 'color: green; font-weight: bold;');
// bvh.clip に、変換済みのTHREE.AnimationClipオブジェクトが格納されています
const rawAnimationClip = bvh.clip;
console.log('%c--- Raw AnimationClip Data (Start) ---', 'color: orangered; font-weight: bold;');
// 検証しやすいJSON形式に変換
const clipJSON = THREE.AnimationClip.toJSON(rawAnimationClip);
// 整形して文字列として出力
console.log(JSON.stringify(clipJSON, null, 2));
// クリックで展開できるオブジェクトとしても出力
console.log('Interactive Raw AnimationClip Object:', rawAnimationClip);
console.log('%c--- Raw AnimationClip Data (End) ---', 'color: orangered; font-weight: bold;');
},
undefined,
// エラー時に実行される関数
(error) => {
console.error('❌ BVHファイルの読み込み中にエラーが発生しました:', error);
}
);
</script>
</body>
</html>
使用変数
| BVH_URL | |
| charset | |
| clipJSON | |
| loader | |
| rawAnimationClip | |
| type |