<!DOCTYPE html>
<html>
<head>
<title>A-Frame VRM with Custom Idle Motion</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>
</head>
<body>
<a-scene>
<a-entity
id="avatar"
vrm="src: ./vrm/tesA1_V0a.vrm"
vrm-anim
rotation="0 180 0">
</a-entity>
<a-camera position="0 1.0 4"></a-camera>
<a-sky color="#222"></a-sky>
</a-scene>
<script>
// 1. X軸とZ軸の役割を入れ替えた「手を振る」モーション
const wavingMotion_XZ_Swapped = {
// --- 体幹の動き（XとZを入れ替え） ---
spine: {
keys: [
{ rot: [0, 0, 0], time: 0 },
{ rot: [3, 5, 0], time: 1 }, // 少し傾ける
{ rot: [3, 5, 0], time: 3.5 },
{ rot: [0, 0, 0], time: 4.5 }
]
},
rightUpperArm: {
keys: [
{ rot: [0, 0, -65], time: 0 },
{ rot: [0, 0, -40], time: 1 },
{ rot: [0, 0, -65], time: 2 }
]
},
// --- 左腕全体の上げ下げ（主担当をZ軸からX軸に変更） ---
leftUpperArm: {
keys: [
{ rot: [0, 0, 65], time: 0 }, // 開始位置
{ rot: [80, -20, -15], time: 1 }, // 1秒かけて腕を上げる（X軸で大きく上げ、Z軸で少し前に出す）
{ rot: [80, -20, -15], time: 3.5 },// 手を振り終わるまで腕を上げたままにする
{ rot: [0, 0, 65], time: 4.5 } // 1秒かけて腕を下ろす
]
},
// --- ひじを曲げ、前腕で「手を振る」（振る軸をX軸からZ軸に変更） ---
leftLowerArm: {
keys: [
{ rot: [0, 0, 0], time: 0 }, // 開始位置
{ rot: [0, -90, 0], time: 1 }, // 腕を上げると同時にひじを90度曲げる
// --- ここから手を振る往復運動（Z軸で振る） ---
{ rot: [0, -100, 0], time: 1.5 }, // 片側に振る
{ rot: [0, -70, 0], time: 2.0 }, // 反対側に振る
{ rot: [0, -100, 0], time: 2.5 }, // もう一度振る
{ rot: [0, -70, 0], time: 3.0 }, // もう一度振る
// --- 振り終わり ---
{ rot: [0, -90, 0], time: 3.5 }, // 振るのをやめて正面に戻す
{ rot: [0, 0, 0], time: 4.5 } // 腕を下ろしながらひじを伸ばす
]
}
};
// 2. DOMの読み込み完了後、コンポーネントにデータを渡す
document.addEventListener('DOMContentLoaded', () => {
const avatarEl = document.querySelector('#avatar');
// 新しく定義したモーションデータをセットする
avatarEl.setAttribute('vrm-anim', 'idleMotion', wavingMotion_XZ_Swapped);
});
</script>
</body>
</html>
使用変数
| avatarEl | |
| charset | |
| color | |
| gMotion_XZ_Swapped | |
| id | |
| position | |
| rotation | |
| src | |
| vrm |