2023-01-08 (日)
A-FrameでUI実装するの地味に面倒なので、CSSを使えるようにしてみたりする。
A-FrameはオブジェクトをDOMとして扱ってるので色やレイアウトもCSSで管理するのが良さそうなのだけど、実装してみると少し微妙。
カスタム要素もCSSでレイアウトできるのだけど、非表示だとレイアウト処理は実行されないみたい。とりあえず、sceneのcanvasの下にoverflow: hiddenとかして置いてるけど要素が増えると少しオーバヘッドありそう。
あと、スタイルの変更を検出できるイベントは無いのか。。。要素のstyleとかclassはMutationObserverで監視してるけど、CSS自体の変更は検出する手段が無さげ。
あと、:hoverとかの擬似クラスをスクリプトから制御したり、getComputedStyle()時に取得したりできないので、別名のクラスを定義する必要がある。