junkerstock

vrm-text-bvh12

<!DOCTYPE html>
<html>
<head>
<title>BVH to AnimationClip Converter</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データ調査ツール</h1>
<p>ブラウザの開発者コンソール（F12キー）を開いて、出力を確認してください。</p>

<script type="module">
// three.js本体とBVHLoaderをインポートします
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 animationClip = bvh.clip;

// 3. AnimationClipの中身をコンソールに出力して検証
console.log('%c--- 生成されたAnimationClipデータ (ここから) ---', 'color: blue; font-weight: bold;');

// AnimationClipをJSON形式に変換
const clipJSON = THREE.AnimationClip.toJSON(animationClip);

// 人間が読みやすいように整形して文字列として出力
console.log(JSON.stringify(clipJSON, null, 2));

// コンソール上でクリックして詳細を見られるオブジェクトとしても出力
console.log('【インタラクティブ形式】AnimationClipオブジェクト:', animationClip);

console.log('%c--- 生成されたAnimationClipデータ (ここまで) ---', 'color: blue; font-weight: bold;');
},

// 読み込み中の進捗（今回は使用しません）
undefined,

// エラー時に実行される関数
(error) => {
console.error('❌ BVHファイルの読み込み中にエラーが発生しました:', error);
}
);
</script>
</body>
</html>

使用変数

animationClip
BVH_URL
charset
clipJSON
loader
type

<!DOCTYPE html>
<html>
<head>
  <title>BVH to AnimationClip Converter</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データ調査ツール</h1>
  <p>ブラウザの開発者コンソール（F12キー）を開いて、出力を確認してください。</p>

// 対象の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 animationClip = bvh.clip;
        
        // 3. AnimationClipの中身をコンソールに出力して検証
        console.log('%c--- 生成されたAnimationClipデータ (ここから) ---', 'color: blue; font-weight: bold;');
        
        // AnimationClipをJSON形式に変換
        const clipJSON = THREE.AnimationClip.toJSON(animationClip);
        
        // 人間が読みやすいように整形して文字列として出力
        console.log(JSON.stringify(clipJSON, null, 2));
        
        // コンソール上でクリックして詳細を見られるオブジェクトとしても出力
        console.log('【インタラクティブ形式】AnimationClipオブジェクト:', animationClip);
        
        console.log('%c--- 生成されたAnimationClipデータ (ここまで) ---', 'color: blue; font-weight: bold;');
      },
      
      // 読み込み中の進捗（今回は使用しません）
      undefined,

// エラー時に実行される関数
      (error) => {
        console.error('❌ BVHファイルの読み込み中にエラーが発生しました:', error);
      }
    );
  </script>
</body>
</html>