<!DOCTYPE html>
<html>
<head>
<title>Final VRM 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 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>
<a-scene>
<a-entity
id="avatar"
vrm="src: ./vrm/tesA1_V0a.vrm"
position="0 0 0"
rotation="0 180 0">
</a-entity>
<a-entity camera position="0 1.6 2.5"></a-entity>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
<script type="module">
const THREE = window.THREE;
import { BVHLoader } from 'three/addons/loaders/BVHLoader.js';
// ページのリソースが全て読み込まれるのを待つ
window.addEventListener('load', () => {
console.log('✅ Page loaded. Waiting 2 seconds for VRM to initialize...');
// さらに2秒待機
setTimeout(() => {
console.log('⏰ 2 seconds passed. Attempting to access VRM data directly...');
const avatarEl = document.querySelector('#avatar');
// アバター、またはvrmコンポーネントが見つからない場合はエラー
if (!avatarEl || !avatarEl.components || !avatarEl.components.vrm) {
console.error('❌ Could not find the avatar entity or its VRM component.');
return;
}
// 2秒後にVRMのデータを直接取得しにいく
const vrm = avatarEl.components.vrm.vrm;
// ここでVRMデータが取得できなければ、手の打ちようがない
if (!vrm) {
console.error('❌ CRITICAL: VRM data is STILL not available after a 2-second forced delay. There may be a fundamental issue with the aframe-vrm.js library being used.');
return;
}
// --- VRMデータが取得できた場合のみ、以下の処理が実行される ---
console.log('✅ VRM data successfully accessed! Now processing BVH...');
const BVH_URL = 'https://p-bookmark.sakura.ne.jp/junkerstock/vrm/8.bvh';
const loader = new BVHLoader();
loader.load(BVH_URL, (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 adjustedTracks = [];
bvh.clip.tracks.forEach(track => {
if (!track.name.endsWith('.quaternion')) return;
const bvhNodeName = track.name.split('.')[0];
const vrmBoneName = boneMap[bvhNodeName];
if (vrmBoneName) {
const vrmBoneNode = vrm.humanoid.getBoneNode(vrmBoneName);
if (vrmBoneNode) {
const newTrack = track.clone();
newTrack.name = `${vrmBoneNode.name}.quaternion`;
adjustedTracks.push(newTrack);
}
}
});
const adjustedClip = new THREE.AnimationClip('AdjustedBVHMotion', -1, adjustedTracks);
console.log('%c--- Final Adjusted AnimationClip Data (Start) ---', 'color: purple; font-weight: bold;');
console.log(JSON.stringify(THREE.AnimationClip.toJSON(adjustedClip), null, 2));
console.log('%c--- Final Adjusted AnimationClip Data (End) ---', 'color: purple; font-weight: bold;');
});
}, 2000); // 2秒 (2000ミリ秒)
});
</script>
</body>
</html>
使用変数
| adjustedClip | |
| adjustedTracks | |
| avatarEl | |
| boneMap | |
| bvhNodeName | |
| BVH_URL | |
| charset | |
| color | |
| id | |
| loader | |
| name | |
| newTrack | |
| position | |
| rotation | |
| src | |
| THREE | |
| track | |
| type | |
| vrm | |
| vrmBoneName | |
| vrmBoneNode |