Zenn
📝

A-Frameでアニメーション付き3Dモデル切り替え時の注意点

2022/12/04に公開
JavaScript
AR
VR
aframe
3dmodel
tech

はじめに

A-Frameでは、animation-mixerでアニメ再生中のgltfモデルに対して setAttribute でモデルを切り替える、といったことができないようです。removeAttribute を経由する必要があります。

結論

  • modelEl.removeAttribute('gltf-model') を経由してからmodelEl.setAttribute('gltf-model', 'next-hoge-model') とする必要がある

詳細

例えば、以下のようにモデルAをanimation-mixerで動かしている場合、クリックイベントなどでモデルBのアニメに切り替えたい場合があります

<a-entity gltf-model="modelA" animation-mixer></a-entity>

このモデルAをクリック等のイベント時に

<a-entity gltf-model="modelB" animation-mixer></a-entity>

と切り替えたい。

直感的には modelEl.setAttribute('gltf-model', 'modelB')で切り替えられるはずですが、animation-mixerで3Dモデルのアニメを再生している場合、components:gltf-model:warn Unexpected token '<', "<!DOCTYPE "... is not valid JSON のエラーが出てしまい切り替えられません。

一度 modelEl.removeAttribute('gltf-model')をしてから modelEl.setAttribute('gltf-model', '#modelB')とする必要があります。

最終的なコード

<!DOCTYPE html>
<html>
	<head>
		<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
		<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>

		<script type="text/javascript">
			AFRAME.registerComponent('change-model',{
                init:function(){
                    var modelEl=document.getElementById('target');                    
                    document.addEventListener('click', ()=>{
                        modelEl.removeAttribute('gltf-model')
                        modelEl.setAttribute('gltf-model', '#modelB')
                    });
                }
            });
		</script>
	</head>
	<body>
		<a-scene>
            <a-assets>
                <a-asset-item id='modelA' src='/path/to/modelA'></a-asset-item>
                <a-asset-item id='modelB' src='/path/to/modelB'></a-asset-item>
            </a-assets>

			<a-entity gltf-model="#modelA" animation-mixer change-model></a-entity>
		</a-scene>
	</body>
</html>

余談

visible などの別の属性は直接 setAttribute('visible', 'true') のように変更できます。上記のようなひと手間がいるのは私の観測範囲ではgltf-modelを切り替える場合だけです。

Discussion