<model-viewer>はかんたんに使える。だからちょっと低レイヤーなことをすると面倒になる。

THREE.jsのAxesHelperを入れるとまあ、わかりやすくなる。

Sceneを取得

まずはここから。ドキュメントにも書いてある。

cosnt modelViewer = document.querySelector("model-viewer");
modelViewer[Object.getOwnPropertySymbols(mvElement).find(e => e.description === 'scene')];

VRモード

これはかんたんだ。

読み込んだモデルは、scene.target

座標は(0,0,0)に固定されて、z+を向いている

カメラはscene.camera

普通に座標を取得すればよい

なぜなら、シーンは動かないから、カメラもモデルもローカルの座標系が同じだからだ。

APIを使えばもっと楽だ

modelViewer.getCametaOrbit()やgetCameraTargetが使えるだろう

ARモード(webXR APIの場合)

これはやっかいだった。

第一、APIに存在しない

読み込んだモデルは同じく scene.target

こちらも座標は(0,-(モデルの高さ/2),0)、z+を向いている

＃＃シーンが親になっている。＃＃

カメラはscene.xrcamera

＃＃xrcameraには親が居ない＃＃

カメラを動かせばxrcameraが動く

モデルを動かすと＃＃sceneが動く＃＃

モデルを回すと＃＃sceneが回る＃＃

モデルの座標は動かない。

よって、モデルのワールド座標を取得するには、scene.position + target.position が必要である。

ところで、THREE.jsのobject3dのメソッドgetWorldPositionとかは、うまく動かない。オーバーライドされているし、それが未定義参照でエラーになるから。