<html>
<head>
<title>A-Frame Custom VRM Component</title>
<meta charset="utf-8">
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.150.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.150.0/examples/jsm/"
}
}
</script>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body style="background-color: black; color:white;">
<a-scene background="color: #444">
<a-entity
custom-vrm="vrmUrl: ./vrm/tesA1_V0a.vrm; motionUrl: ./vrm/hand.vmd; blink: true;"
position="0 0 -2"
scale="1.2 1.2 1.2"
rotation="0 180 0">
</a-entity>
<a-camera position="0 1.2 4"></a-camera>
<a-plane position="0 0 0" rotation="-90 0 0" width="30" height="30" color="#222"></a-plane>
<a-light type="directional" color="#FFF" intensity="1" position="-1 2 2"></a-light>
<a-light type="ambient" color="#AAA"></a-light>
</a-scene>
<script type="module">
// --- 必要な部品をインポートします ---
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { MMDLoader } from 'three/addons/loaders/MMDLoader.js'; // VMDモーションのために必要
// three-vrmは、VRMの骨格などを扱うために必要です
import { VRMLoaderPlugin } from 'https://unpkg.com/@pixiv/three-vrm@1.1.0/build/three-vrm.module.js';
// --- ここからが、我々が作るカスタムコンポーネントです ---
AFRAME.registerComponent('custom-vrm', {
schema: {
vrmUrl: {type: 'string'},
motionUrl: {type: 'string'},
blink: {type: 'boolean', default: true}
},
init: function () {
this.vrm = null;
this.mixer = null;
this.loader = new GLTFLoader();
// VRMプラグインを登録
this.loader.register(parser => new VRMLoaderPlugin(parser, { autoUpdateHumanBones: true }));
this.loadVRM();
},
// VRMモデルを読み込む処理
loadVRM: function () {
this.loader.load(
this.data.vrmUrl,
(gltf) => {
this.vrm = gltf.userData.vrm;
// エンティティに3Dモデルをセット
this.el.setObject3D('vrm', this.vrm.scene);
// まばたきを有効にする
if(this.data.blink) {
this.vrm.expressionManager.blink();
}
console.log("VRM model loaded successfully by custom component.");
// VRMの読み込みが終わったら、次にモーションを読み込む
if (this.data.motionUrl) {
this.loadMotion();
}
},
undefined,
(error) => {
console.error("Custom VRM loader failed.", error);
}
);
},
// VMDモーションを読み込む処理
loadMotion: function() {
const mmdLoader = new MMDLoader();
mmdLoader.load(
this.data.motionUrl,
(vmd) => {
this.mixer = new THREE.AnimationMixer(this.vrm.scene);
const clip = vmd.animations[0];
const action = this.mixer.clipAction(clip);
action.setLoop(THREE.LoopRepeat);
action.play();
console.log("VMD motion loaded and started by custom component.");
},
undefined,
(error) => {
console.error("Custom VMD loader failed.", error);
}
);
},
// A-Frameのレンダリングループで、VRMとモーションを更新
tick: function (time, timeDelta) {
const dt = timeDelta / 1000;
if (this.vrm) {
this.vrm.update(dt);
}
if (this.mixer) {
this.mixer.update(dt);
}
}
});
</script>
</body>
</html>
使用変数
| -------( Function ) | |
| ) { const mmdLoader = new MMDLoader -------( Function ) | |
| action | |
| background | |
| charset | |
| clip | |
| color | |
| dt | |
| height | |
| intensity | |
| loader | |
| mixer | |
| mmdLoader | |
| parser | |
| position | |
| rotation | |
| scale | |
| src | |
| style | |
| type | |
| vrm | |
| width |