DREIRAUM

ドイツ・ライプツィヒの3Dウェブ専門スタジオ DREIRAUM の自社サイトです。カフェ、歯科医院、自動車コンフィギュレータ、不動産といった業種別のデモを並べ、ありふれた企業サイトをフォトリアルでインタラクティブな3D体験に作り替えるというサービスを、そのまま実演しています。制作者は Konrad Reyhe。 実装については本人がThree.jsのフォーラムで説明しています。React Three Fiber を使わないバニラのThree.jsで、マテリアルは MeshPhysicalMaterial に clearcoat を載せ、ライティングはHDRI、トーンマッピングはAgX、bloomは控えめ。ヒーローのオブジェクトはポインタドラッグで掴んで投げられ、離すと減衰の弱いバネで元位置に戻ります。オブジェクトごとに質量を持たせてあり、車のモデルは小さな図形より重たく尾を引きます。Bキーを押している間はシーンがワイヤーフレームの設計図表示に切り替わり、三角形数のカウンタがその場に表示されます。 【参考になるポイント】 ・R3Fを使わない選択を本人が明言している。重いフレームワークなしで pure Three.js を軽く速く、という方針で、サイト側の Built with 表記も Three.js / WebGL / GSAP / Astro / TypeScript / Vite ・オブジェクトごとに質量を持たせたうえで、戻りを underdamped spring で処理。掴む・投げるの手触りを物理エンジンなしで作っている ・Bキー長押しの設計図モードは、ワイヤーフレームと三角形数の実測値表示。3Dスタジオが技術力を見せる導線として機能している ・SSR（スクリーンスペース反射）を使いつつ prefers-reduced-motion に対応し、3Dを切るトグルを画面上に用意している。アクセシビリティの逃げ道を最初から用意した3Dサイト ・2026年7月1日 Nominee（平均約6.3） ・※モデル形式やDraco・meshopt等の圧縮、総バンドルサイズについてはフォーラム投稿でも言及がなく未確認