webg sample: embedded_glb_viewer
`WebgApp` と `EyeRig` を使い、HTML の file input から `.glb` を読み込む埋め込みビューア
この sample は、`layoutMode: "embedded"` の canvas を文書中へ置いたまま、 `input[type=file]` で選んだ `.glb` をその場で表示するための最小ビューアです。 orbit camera は pointer drag / pinch に加えて、`Shift + Drag` や `Shift + Arrow` による PAN にも対応しています。
`Load bundled sample` を押すと同梱の `hand.glb` で即確認でき、`Choose GLB` からは手元の `.glb` を直接読み込めます。
確認したいポイント
1. canvas が本文に埋め込まれたままでも、fixed panel と touch buttons が同じ host を基準に重なること
2. `.glb` を file input から選ぶと、`WebgApp.loadModel()` の経路で読み込まれ、orbit camera でそのまま見回せること
3. touch buttons の `← → ↑ ↓ + -` と `R / || / W / S`、さらに `Shift + Drag` / `Shift + Arrow` / 2 本指 drag の PAN が、`EyeRig` と viewer action に自然につながること
Upload a GLB file
`WebgApp` が Screen / shader / camera rig / input / overlay をまとめて初期化し、 `EyeRig(type="orbit")` が drag / wheel / pinch / keyboard / touch buttons の camera 操作を一つにまとめます。
const app = new WebgApp({
document,
layoutMode: "embedded",
fixedCanvasSize: { width: 820, height: 560, useDevicePixelRatio: false }
});
const orbit = app.createOrbitEyeRig({
target: [0.0, 0.0, 0.0],
distance: 8.0,
yaw: 0.0,
pitch: 0.0
});