A-Frame:ES Modulesでスクリプトを記載する方法
A-Frameのスクリプトで registerComponent を使った仕組みを自動で実行するにはシーンやエンティティが初期化されるよりも前に実行する必要がある。 スクリプトを従来のスクリプトタグで読み込む場合は処理がブロックされるが、ES Modules(ESM) を使った場合、読み込み順序が非同期になり registerComponent の実行タイミングが間に合わない場合がある ES Modules を使ってスクリプトを書く場合は、シーンに対して setAttibute を使用することで意図したしたタイミングで処理を確実に実行するようにすれば良い。
が、同じ処理をマテリアルの設定などにも施す必要があるのでかなり扱いが難しい。
手軽さを優先するならESMではなく通常のスクリプトで書いたほうが良さそうという感じ。
code:ts
import * as mod from './mod'
const scene = document.querySelector('a-scene')
AFRAME.registerComponent('startup', {
init: async () => {
scene.addEventListener('mouseup', mod.handler)
},
})
scene.setAttribute('startup', '')
export default {}
HTMLのサンプルはこんな感じ。
code:html
<head>
<script type="module" src="/src/main.ts"></script>
</head>
<body>
<a-scene> ... </a-scene>
参考
Using the Component from JS