3D埋め込みコードジェネレーター

モデルをページに置く4つの方法、どれも完全版

3Dモデルの埋め込みは、サンプルコードがいつもあと一歩足りない類の作業です。ドキュメントのスニペットはリサイズ処理を省いています。ブログ記事はcontrols.update()を書き忘れていて、ダンピングが何も言わずに効かなくなります。Reactの例はSuspense境界を飛ばしていて、初回レンダーで例外を投げます。このジェネレーターは、あなたが実際に選んだ設定を組み込んだうえで、丸ごと一式を出力します。

<model-viewer>

GoogleのWebコンポーネントは、何もない状態から動くビューアーまでの最短ルートです。<script type="module">タグが1つとカスタム要素が1つだけ。カメラ操作、自動回転、AndroidとiOS両方のAR、イメージベースドライティング、ポスター画像まで自前で面倒を見てくれます。今日の午後にマーケティングページへモデルを置きたいなら、これを使ってください。

生成されるタグにはtouch-action="pan-y"が入っています。見落としやすい属性ですが、スマートフォンでネイティブのように感じられるビューアーと、ページのスクロールと喧嘩するビューアーを分けるのはここです。

Three.js

自分で制御したいシーン向けです。このスニペットはthree/addons/*からインポートします。これはthreeパッケージに実在するサブパスエクスポートなので、どのバンドラーでも動きます。そのうえでACESのトーンマッピングと指定した露出でレンダラーを設定し、PMREMGeneratorとRoomEnvironmentでニュートラルなスタジオ環境を構築し、ダンピング付きのOrbitControlsを追加し、GLTFLoaderでモデルを読み込み、リサイズを処理し、素のrequestAnimationFrameではなくrenderer.setAnimationLoop()で回します。こうしておけば、ページが後からWebXRに入っても同じループがそのまま機能します。

React Three Fiber

React版です。キャンバスに@react-three/fiber、useGLTF・OrbitControls・Environment・ContactShadowsに@react-three/dreiを使います。useGLTF.preload()はコンポーネントの外で呼び出しているので、Reactがレンダリングする前に取得が始まります。モデルはSuspense境界の内側に置かれ、useProgressで駆動する実際の進捗フォールバックが付きます。

単体のHTMLページ

完全なindex.htmlです。doctype、viewportのmeta、スタイル、CDNスクリプト、ビューアーが揃っています。保存して任意の静的ホスティングにアップロードすれば完了。最初のスニペットとは別物で、あちらは既存のページに差し込む断片、こちらはファイル1つまるごとです。

カメラ距離

カメラ距離の当て推量は、モデル埋め込みで最も面倒な部分です。モデルの実寸スケールに左右されるからです。ファイルをローカルで読み込めば、ツールがバウンディングスフィアを計測し、45°の視錐台にわずかな余白を残して収まる距離を計算します。ファイルがアップロードされることはなく、生成されるコードに現れることもありません。現れるのは数値だけです。