<!DOCTYPE html>
<html>
<head>
<title>BVH to JSON Data Inspector</title>
<meta charset="utf-8">
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="./js/aframe-vrm.js"></script>
<script src="https://unpkg.com/three@0.124.0/examples/js/loaders/BVHLoader.js"></script>
</head>
<body>
<a-scene>
<a-entity
id="avatar"
vrm="src: ./vrm/tesA1_V0a.vrm"
position="0 0 0"
rotation="0 180 0">
</a-entity>
<a-camera position="0 1.2 2.5"></a-camera>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
<script>
window.addEventListener('load', function() {
console.log('✅ ページ読み込み完了。BVHをJSONに変換し、結果を出力します。');
const BVH_URL = 'https://p-bookmark.sakura.ne.jp/junkerstock/vrm/8.bvh';
const boneMap = {
'J_Bip_C_Hips': 'hips', 'J_Bip_C_Spine': 'spine', 'J_Bip_C_Chest': 'chest',
'J_Bip_C_UpperChest': 'upperChest', 'J_Bip_C_Neck': 'neck', 'J_Bip_C_Head': 'head',
'J_Bip_L_Shoulder': 'leftShoulder', 'J_Bip_L_UpperArm': 'leftUpperArm',
'J_Bip_L_LowerArm': 'leftLowerArm', 'J_Bip_L_Hand': 'leftHand',
'J_Bip_R_Shoulder': 'rightShoulder', 'J_Bip_R_UpperArm': 'rightUpperArm',
'J_Bip_R_LowerArm': 'rightLowerArm', 'J_Bip_R_Hand': 'rightHand',
'J_Bip_L_UpperLeg': 'leftUpperLeg', 'J_Bip_L_LowerLeg': 'leftLowerLeg',
'J_Bip_L_Foot': 'leftFoot', 'J_Bip_L_ToeBase': 'leftToes',
'J_Bip_R_UpperLeg': 'rightUpperLeg', 'J_Bip_R_LowerLeg': 'rightLowerLeg',
'J_Bip_R_Foot': 'rightFoot', 'J_Bip_R_ToeBase': 'rightToes'
};
const loader = new THREE.BVHLoader();
loader.load(BVH_URL, function(bvh) {
console.log('✅ BVH読み込み成功。JSON形式に変換します。');
const bvhMotion = {};
bvh.clip.tracks.forEach(function(track) {
if (track.name.endsWith('.position')) {
return;
}
const bvhNodeName = track.name.split('.')[0];
const vrmBoneName = boneMap[bvhNodeName];
if (vrmBoneName) {
const keys = [];
for (let i = 0; i < track.times.length; i++) {
const time = track.times[i];
const quaternion = new THREE.Quaternion(
track.values[i * 4], track.values[i * 4 + 1],
track.values[i * 4 + 2], track.values[i * 4 + 3]
);
const euler = new THREE.Euler().setFromQuaternion(quaternion, 'YXZ');
keys.push({
rot: [
THREE.MathUtils.radToDeg(euler.x),
THREE.MathUtils.radToDeg(euler.y),
THREE.MathUtils.radToDeg(euler.z)
],
time: time
});
}
bvhMotion[vrmBoneName] = { keys: keys };
}
});
// --- ここが今回の目的です ---
console.log('%c--- Converted BVH Data (Start) ---', 'color: green; font-weight: bold;');
// 生成したモーションデータを、見やすいJSON文字列としてコンソールに出力
console.log(JSON.stringify(bvhMotion, null, 2));
// クリックで中身を展開できるオブジェクトとしても出力
console.log('Interactive Motion Object:', bvhMotion);
console.log('%c--- Converted BVH Data (End) ---', 'color: green; font-weight: bold;');
console.log('✅ データ出力完了。再生処理は行っていません。');
});
});
</script>
</body>
</html>
使用変数
| ) { console.log -------( Function ) | |
| boneMap | |
| bvh) { console.log -------( Function ) | |
| bvhMotion | |
| bvhNodeName | |
| BVH_URL | |
| charset | |
| color | |
| euler | |
| i | |
| id | |
| keys | |
| loader | |
| position | |
| quaternion | |
| rotation | |
| src | |
| time | |
| track) { if -------( Function ) | |
| vrm | |
| vrmBoneName |