Webサイトのファーストビューのようなものを想定。
主にReact(ViteやNext)とThree.js(R3F周辺ライブラリ)を使って開発してるけど、
今回はこのツールを使おうみたいな話ではなく、Web3Dならではの仕様の段階でトラブルを減らすために気にした方がいいことなどをまとめていく

対応端末

めちゃめちゃ当たり前だけど対応端末は事前にはっきりさせておく

PC

モダンブラウザでもMacのSafariで仕様が違ったりする

タブレット

大きさPCなのにタッチイベントしかなかったりして一癖ある
iPad ProだけUAが違って扱いを分ける必要があったりする

モバイル

iOSのChromeとか、微妙なところで問題が起こったりする(した)
AR系の機能など、WebViewからだと呼び出せない機能もある

sngazm

モデル最適化

ファイルサイズやポリゴン数についてよく聞かれるが完全な基準はない

ユースケースによって様々だが、Webブラウザ上で動かすなら基準として35000ポリゴン、ファイルサイズ10MB以下を挙げられる(結構厳しめ)
他社にモデル作ってもらうならこの記事を送った方がいいかも

最適化じゃないけどThree.jsで表示する予定のモデルならglTF Viewerでの見た目を確認しながら作ってもらったほうがいい。これが一番シンプルなThree.jsでのロード時の見え方に近い。美しいレンダリング画像でクライアントを期待させすぎてしまうとバッドサプライズになることも

他にもiOS QuicklookでARする用のusdzモデルだとApple公式では10万ポリゴン以下を推奨してたりする。他にも色々ある

コンテンツの性質によっては結構厳しい基準だと思うが、あくまで過去の低スペックな端末も対応させるための基準なので、多少超えたところで最近のデバイスなら問題なく動くことも多い。
ただ、お客さんの端末で急に落ちてトラブルになったりするので、基準を越えるなら越えるで想定デバイスをレンタルするなどして試しながら進めるようにしたい

sngazm

デバイスの操作方法の違いに起因する問題

タッチ端末でのホバー表現はどうするか

マウス操作しか考えてないとホバーありきでの表現がタッチ端末で対応できないことがある

一般的な解決策

スライド操作で前面にアイテムが来たときにホバーと同じ挙動をさせる
一回タップでホバーと同じ挙動、二回目のタップでクリック

タッチ端末でのスクロールはどうするか

マウス操作しか考えてないとスクロール移動(ページ自体のスクロール)に対応できてないことがある(Webページの下に行こうとして指をスライドすると3Dビューがクルクル〜ってなるみたいな)

一般的な解決策

コンテンツ部分をスライドで回転、余白をスライドでスクロール
(touchmoveイベントを条件で分けてpreventDefaultする必要があるので、挙動にカクつきが発生する可能性がある旨を納得してもらう必要あり)
コンテンツと余白部分がDOMで別れてるなら、CSSでtouch-eventを設定して挙動を分ければ良い

sngazm

ローディング表現

モデルを読み込む場合はローディング画面が必要になる場合が多い
ローディングもコンテンツの一部として考えてて、回線が早くて逆に一瞬で終わってもらうと困る、という場合は、一定時間の経過とロードの完了の2つの条件が揃ったときにコンテンツを開始する必要がある。ローディングとは

sngazm

出現アニメーション

いきなり出てくるよりはちょっといい感じに…ぐらいの感じで考えられがちだが、具体的にPCの場合、スマホの場合でどうすべきか明確に握っておいた方がいい。
一定の修正フィードバックは必ず発生するものと考える

sngazm

コンテンツレイアウト

大抵の場合3Dコンテンツと一緒にテキストコンテンツとか他のものを同時に表示させる必要があるので、そのレイアウトとの兼ね合いを考える必要がある

3Dコンテンツは横幅だけじゃなくて画面のアスペクト比が変わると見え方が大きく変わる場合が多い。高さが低い場合に崩れたりしないようにする
PCとスマホで両方全画面にしたい場合、別々でデザイン組んでもその中間のサイズで配置どうするか問題が発生したりする
iOS Safariでは初回スクロール時に高さのリサイズが発生するので、素朴にサイズ基準で描画してると変な挙動になる場合がある

sngazm

DOMとの連携問題

3Dコンテンツの上にインタラクティブなDOMを表示する場合、細かいトラブル起こりがち
DOMにマウスカーソルが乗った瞬間に3Dコンテンツから離れた判定が起こる…など