<html>
<head>
<title>A-Frame VRM with Patched MMDLoader</title>
<meta charset="utf-8">
<script type="importmap">{"imports": {"three": "https://threejs.org/build/three.module.js"}}</script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/three@0.125.2/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.125.2/examples/js/loaders/TGALoader.js"></script>
<script src="https://unpkg.com/three@0.125.2/examples/js/animation/MMDAnimationHelper.js"></script>
<script src="https://unpkg.com/three@0.125.2/examples/js/loaders/MMDLoader.js"></script>
<script src="https://binzume.github.io/aframe-vrm/dist/aframe-vrm.js"></script>
<script>
// aframe-vrmが定義されるのを待ってから、処理を上書きします
document.addEventListener('DOMContentLoaded', function() {
// aframe-vrmのアニメーションコンポーネントのプロトタイプにアクセスします
const vrmAnimProto = AFRAME.components['vrm-anim'].Component.prototype;
if (vrmAnimProto && vrmAnimProto.loadAnimation) {
console.log("Applying monkey patch to aframe-vrm's loadAnimation...");
// 元のloadAnimation関数を保存しておきます
const originalLoadAnimation = vrmAnimProto.loadAnimation;
// loadAnimation関数を我々のカスタム関数で上書きします
vrmAnimProto.loadAnimation = function(src) {
// .vmd ファイルの場合のみ、このパッチが動作します
if (src && src.toLowerCase().endsWith('.vmd')) {
console.log("VMD file detected. Using patched MMDLoader.");
// 元の関数がやろうとしていた後処理などを流用するため、thisを束縛します
const self = this;
// 我々が事前に読み込んだ、正常に動作するMMDLoaderを使います
const loader = new THREE.MMDLoader();
loader.load(src, function(vmd) {
// 読み込み成功後、aframe-vrmが本来行うべきだった後処理を呼び出します
// (第2引数にモーション名を渡す必要がある場合があります)
const motionName = 'vmd_motion';
self.onAnimationLoaded(vmd, motionName, src);
}, undefined, function(err) {
console.error("Patched MMDLoader failed to load animation.", err);
});
} else {
// VMD以外のファイル（BVHなど）の場合は、元の関数をそのまま呼び出します
console.log("Non-VMD file detected. Using original loader.");
originalLoadAnimation.apply(this, arguments);
}
};
} else {
console.error("Failed to apply monkey patch. aframe-vrm structure might have changed.");
}
});
</script>
</head>
<body style="background-color: black; color:white;">
<a-scene>
<a-entity
vrm="src:./vrm/tesA1_V0a.vrm;blink:true"
vrm-anim="src: https://cdn.jsdelivr.net/gh/mrdoob/three.js@r125/examples/models/mmd/vmds/wavefile_v2.vmd"
position="0 0 -2"
rotation="0 180 0">
</a-entity>
<a-camera position="0 1.2 3"></a-camera>
<a-sky color="#444"></a-sky>
<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>
</body>
</html>
使用変数
| ) { // aframe-vrmのアニメーションコンポーネントのプロトタイプにアクセスします const vrmAnimProto = AFRAME.components['vrm-anim'].Component.prototype; if -------( Function ) | |
| anim | |
| charset | |
| color | |
| err) { console.error -------( Function ) | |
| ginalLoadAnimation | |
| height | |
| intensity | |
| loadAnimation | |
| loader | |
| motionName | |
| position | |
| rotation | |
| self | |
| src | |
| style | |
| type | |
| vmd) { // 読み込み成功後、aframe-vrmが本来行うべきだった後処理を呼び出します // -------( Function ) | |
| vrm | |
| vrmAnimProto | |
| width |