<!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. HTML側で待機モーションのデータを定義する
// 回転(rot)は [x, y, z] の数値配列で指定する
const myIdleMotion = {
leftUpperArm: {
keys: [
{ rot: [0, 0, 65], time: 0 },
{ rot: [0, 0, 63], time: 1 },
{ rot: [0, 0, 65], time: 2 }
]
},
rightUpperArm: {
keys: [
{ rot: [0, 0, -65], time: 0 },
{ rot: [0, 0, -60], time: 1 },
{ rot: [0, 0, -65], time: 2 }
]
},
spine: {
keys: [
{ rot: [0, 20, 0], time: 0 },
{ rot: [20, 0, -20], time: 1 },
{ rot: [20, -20, 0], time: 2 },
{ rot: [0, 0, 20], time: 3 },
{ rot: [0, 20, 0], time: 4 }
]
}
};
// 2. DOMの読み込み完了後、コンポーネントにデータを渡す
document.addEventListener('DOMContentLoaded', () => {
const avatarEl = document.querySelector('#avatar');
// vrm-animコンポーネントのidleMotionプロパティに、定義したオブジェクトをセット
avatarEl.setAttribute('vrm-anim', 'idleMotion', myIdleMotion);
});
</script>
</body>
</html>
使用変数
| avatarEl | |
| charset | |
| color | |
| id | |
| myIdleMotion | |
| position | |
| rotation | |
| src | |
| vrm |