- Share On
目次
はじめに
株式会社デパートの10周年という節目に、私たちは新たなクリエイティブ表現として、本格的な3Dサイト制作に挑戦しました。個人の経験としては、3Dサイトの制作経験はあったものの、チーム単位のプロジェクトとしては初めての試みだったため、デザイナーさんとエンジニアの連携や、技術面での検証・実装は試行錯誤しながら進めていく形になりました。
そこで今回は、3Dモデルの制作と実装を同時並行で進める方針を取り、BlenderでのモデリングとReact Three Fiberによる実装を行いながら、細かい動作や演出を都度確認・調整していきました。
制作初期には、デザイナーさんが作ってくれたBlenderモック（カメラの動きつき）やXDのラフ画、テキストでの構成案をもとに、まずは1階ずつモデリング→確認→修正→組み込みをしつつ、細かい部分の挙動の調査や検証を行う、地道な作業を重ねていきました。特に、ユーザー体験の要となるフロア間のスムーズなカメラ移動には最後までこだわり抜き、プロジェクト終盤まで粘り強く調整を重ねました。
この記事では、すでに公開されている「株式会社デパート10周年プロジェクトの全容をご紹介します！」「3Dサイトのデザインフロー【デパート10周年記念サイト】」の記事の裏側で、3D関係の部分にフォーカスを当て、どのように実装を進めていったのかをエンジニア目線でご紹介します。
3Dにチャレンジしたいチームや、弊社のものづくりに興味を持ってくださっている方に、少しでも雰囲気が伝わればうれしいです！
技術スタックと構成
10周年記念のサイトは、React Three Fiber（R3F）とNext.jsの構成で実装を進めました。
私自身はthree.jsの経験がありましたが、今回のプロジェクトでは開発効率とReactベースでの開発体験を重視し、チームで検討した結果R3Fを採用することにしました。初めて触れるライブラリでしたが、思っていたよりもとても扱いやすく、すぐに馴染むことができました。
また、カメラまわりの制御にはcamera-controlsというライブラリを採用しています。
Blenderモックで指定されたカメラ演出（=視点を固定し、フロアをぐるりと見渡す）を実現するため、視点の固定やスムーズな移動を扱いやすいライブラリが必要だったためです。詳しくはカメラの動きセクションでご紹介します。
UIまわりは、3Dシーンと連動しつつ、通常のHTMLとして表示する要素（ボタンやモーダルなど）を、React Three Fiberの <Html> コンポーネントを使って実装しています。このあたりの仕組みについては、UIと3Dの連携セクションで詳しくご紹介します。
Blenderモック → 実装用モデルの制作
今回のプロジェクトでは、Blenderで作成された簡易的なモックデータと、XDのラフ画＋テキストでの指示をもとに、実装を進めていきました。
モックはあくまで「構成と雰囲気を共有するためのもの」だったので、最終的なモデルのディティールや質感は、ある程度デザイナーさんから任せてもらっていました。
そのぶん自由度も高かったのですが、全体のトーンやリアリティ感は揃えたいので、いただいた参考画像を見つつ、私でもPinterestなどで資料を集めながら、イメージを固めてモデリングを進めていきました。
制作したモデルはフロアごとに .glb データとして書き出し、まずはプレビューサイト上でデザイナーさんに確認してもらう、というフローをとっていました。フィードバックを受けて必要な修正を加えたあと、最終的にWeb用の3Dシーンへと組み込む、という段階的な進め方です。
また、質感まわりについては、光の当たり方や影などをリアルタイムで計算しなくてもよくなるように、Blender上で「テクスチャベイク」という処理を取り入れてみました。
見た目の印象を少しリッチにしつつ、Web側の描画処理を少しでも安定させたかった、というのが選んだ理由です。これについては別記事で少し詳しくまとめているので、興味のある方はぜひご覧ください！
→ ブラウザ上でも3Dモデルを綺麗に表示！Blender×Three.jsでテクスチャベイクをやってみた
カメラの動き
このサイトの見せ方を考えるうえで、とても大切だったのが「カメラの動き」でした。
フロアをぐるっと見渡せるカメラの挙動は最初にデザイナーさんが作ってくださったBlenderモックのカメラで指定されていて、意図がとても明確でした。
当初、React Three Fiber（R3F）でよく使われるOrbitControlsを試してみたのですが、視点の中心位置（ターゲット）とカメラ位置を同期させた上で、特定の場所に滑らかに移動させるような制御が難しく、今回のような用途には少し相性がよくありませんでした。
そこで採用したのが、camera-controls というカメラ操作ライブラリです。
このライブラリを選んだ理由は主に2つあって、
カメラを細かく制御できる点
自然な流れでカメラを動かすことができる点
が特に魅力的でした。
この「やりたいカメラの動きを実現させた上で、ユーザー操作も許容する」点は、実装面でいちばん悩み、時間をかけ、こだわった点かもしれません。カメラの動きが意図した通りに気持ちよく決まったとねきは、本当にうれしかったです！
UIと3Dの連携
3Dの中に入り込んで操作するような体験は、楽しくて没入感があります。
ただその分、「どこが操作できるのか」「どう動けばいいのか」が伝わりづらくなりやすいのも事実です。今回のサイトでは、そういった迷いやすさをなくすためのUI設計を、デザイナーさんが丁寧に組み立ててくださいました。
フロアを見渡しているときに表示されるマーカーや、フロア移動の矢印、視野を示すインジケーターなどは、どれも3Dの世界観に自然になじみつつ、「どこをどう操作すればいいか」が直感的に伝わるようになっています。
私は、そうしたデザイン案をもとに、3Dの表現とUIがうまく共存するように実装を進めていきました。
具体的には、React Three Fiberが提供する <Html> コンポーネントを活用して、見出しやボタンの要素を3D空間上の特定の位置と連動させるように配置しています。
このコンポーネントを使うことで、Canvas上に描画されているオブジェクトとDOM要素を視覚的に重ね合わせつつ、それぞれの挙動（クリック・ホバー・モーダル表示など）を自然に接続することができました。
また、フロアを移動するためのボタンや、視点の方向を示すインジケーター、各エリアで開くモーダルなどもすべてHTMLとして用意してあり、それぞれが3Dと連動するように組み合わせています。
このように、3DとUIの世界がスムーズにつながる体験を目指して構築していきました。
もうすこし詳しく
今回の記事では実装全体の流れを中心にご紹介しましたが、より具体的なサンプルなどは、以下のnoteの記事でも紹介しています！ぜひご覧ください。
React Three Fiberの使い心地や触ってみた感想について
3DモデルをWeb上でアニメーションさせる方法について
→ Blender×React Three Fiberで3Dモデルをアニメーションさせてみた
おわりに
今回の10周年記念サイトは、私たちにとって本格的な3D表現への大きな挑戦となるプロジェクトでした。できること・できないことを探りながら、とにかく「まずはやってみよう」という気持ちで進めていたのをよく覚えています。
今回得た、React Three Fiberを活用した実装経験や、デザイナーとエンジニアの3Dサイト制作における連携ノウハウは、今後の案件でも必ず活きると感じています。
すでに公開されている他の10周年記念サイトの関連記事と合わせて読んでいただくことで、私たちのものづくりの裏側や、アイデアが形になっていく過程を少しでも感じてもらえたら嬉しいです。
Contact
制作のご依頼やサービスに関するお問い合わせ、
まだ案件化していないご相談など、
お気軽にお問い合わせください。
