なんとなく A-Frame の esmodule 化をやってみる。 主に require を import に置き換えるだけなのだけど、 class 継承を普通の継承化することもやろうと思う。
registerXXX
動的クラス生成とクラスのシステム登録をする registerXXX という関数群がある。
System
, Component
, Material
, Shader
, Primitive
, Geometry
, PropertyType
など。
たぶん、以下のようにシンプル化できる。 language-server の効きが良くなることが見込まれるのでやってみる。
AScne systems(scene level の シングルトン) 同名の component と連携する。
AScene > AEntity > ANode > HTMLElment
Component
cube を描画するのに最低限必要な component.
entity.load => initComponent
初期化順注意!
初期化順
AScene.doConnectedCallback
a-scene
が root.
配架の a-entity
を集めて初期化する。
AEntity.updateComponents
各 a-entity
は 付属する component
を初期化する。
a-scene
も entity なので、a-scene
専用の component
を初期化する。
type = “module”
examples\test\cube\index.html
あたりから攻めてみる。
まず開発サーバーとして vite を導入する。 次にシンプルなサンプルを改造してみる。
👇
地道に修正していく。
- src/constants/index.js
- src/constants/keyboardevent.js
- src/index.js
- src/utils/index.js
- src/utils/debug.js
- src/utils/device.js
- src/utils/object-pool.js
- src/utils/coordinates.js
- src/utils/entity.js
- src/utils/split.js
- src/utils/forceCanvasResizeSafariMobile.js
- src/utils/material.js
- src/utils/src-loader.js
- src/utils/styleParser.js
- src/utils/tracked-controls.js
registerComponent
- core/scene/a-scene.js
- core/scene/metaTags.js
- core/a-node.js
- core/propertyTypes.js
- core/scheme.js
- core/component.js
- core/a-entity.js
registerComponent
👇
registerSystem
シングルトンの登録?
require の置き換え
a-frame は three.js のラッパーなのだけど esmodule 化済みの three.js と食い合せが悪くなっている。 例えば、three.js の拡張と、a-frameの参照する three.js が別の実体であるということが起きる。
esmodule 製のライブラリと併用し辛い。
あと開発サーバーに vite を使って快適に作業したい。
register 関数の改造
a-frame の各種クラスが特殊な継承になっていて、 language-server の恩恵が受けられない。 単純継承への書き直しを試みる。