<!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. 「手を振る」モーションのデータを定義する
const wavingMotion = {
// --- 体幹を少し動かして、より自然に見せる ---
spine: {
keys: [
{ rot: [0, 0, 0], time: 0 },
{ rot: [0, 5, 3], time: 1 }, // 腕を上げるのに合わせて少し傾ける
{ rot: [0, 5, 3], time: 3.5 }, // 手を振り終わるまで姿勢を維持
{ rot: [0, 0, 0], time: 4.5 } // 元に戻る
]
},
// --- 左腕全体を上げ下げする動き (肩の動き) ---
leftUpperArm: {
keys: [
{ rot: [0, 0, 0], time: 0 }, // 開始位置
{ rot: [-15, -20, 80], time: 1 }, // 1秒かけて腕を上げる（少し前に、大きく横に）
{ rot: [-15, -20, 80], time: 3.5 },// 手を振り終わるまで腕を上げたままにする
{ rot: [0, 0, 0], time: 4.5 } // 1秒かけて腕を下ろす
]
},
rightUpperArm: {
keys: [
{ rot: [0, 0, -65], time: 0 },
{ rot: [0, 0, -60], time: 1 },
{ rot: [0, 0, -65], time: 2 }
]
},
// --- ひじを曲げ、前腕で「手を振る」動き ---
leftLowerArm: {
keys: [
{ rot: [0, 0, 0], time: 0 }, // 開始位置
{ rot: [0, -90, 0], time: 1 }, // 腕を上げると同時にひじを90度曲げる
// --- ここから手を振る往復運動 ---
{ rot: [30, -90, 0], time: 1.5 }, // 片側に振る
{ rot: [-30, -90, 0], time: 2.0 }, // 反対側に振る
{ rot: [30, -90, 0], time: 2.5 }, // もう一度振る
{ rot: [-30, -90, 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');
// vrm-animコンポーネントのidleMotionプロパティに、定義したオブジェクトをセット
avatarEl.setAttribute('vrm-anim', 'idleMotion', wavingMotion);
});
</script>
</body>
</html>
使用変数
| avatarEl | |
| charset | |
| color | |
| id | |
| position | |
| rotation | |
| src | |
| vrm | |
| wavingMotion |