detouch

English | 日本語

概要

• ノードの親子関係を実行中に attach / detach で切り替えるサンプルです。
• 「見た目の位置を保ったまま親を差し替える」階層操作を、実際の動きと HUD の両方から学ぶための教材サンプルです。

実行方法

• 実行ファイルは ./detouch.html です
• WebGPU に対応したブラウザで開き、必要に応じて help panel や HUD と合わせて確認してください

使用している webg 機能

• WebgApp: Screen / Shader / Space / Camera / Input / Message の標準初期化
• Node.attach / Node.detach
• Node.getWorldPosition / getWorldAttitude
• WebgApp.setGuideLines / setStatusLines: 階層状態と姿勢表示
• Texture + SmoothShader: 球の可視化
• InputController / Touch: キー入力とタッチ入力を同じ操作へ束ねる

確認ポイント

• 左右の回転アームの先端に対して球の親を切り替えても、球の見た目位置と姿勢が急に飛ばないことを確認し、ワールド座標保持の実装を観察します
• sphere parent、world h/p/b、local h/p/b の status 表示を見比べ、親変更後に local 値は変わっても見た目の world 側が保たれることを確認します
• detach/attach right と exchange parent の違いを見比べ、親を null に外す場合と別親へつなぎ替える場合の処理フロー差を確認します

操作方法

• W / Z: カメラのピッチ回転
• A / S: カメラのヨー回転
• F / G: ズームイン / ズームアウト
• D: 右先端ノードとの detach/attach 切り替え
• Space: 球オブジェクトの親ノードを左右で入れ替え
• Q: アニメーション停止
• X: アニメーション再開