SplineとFramerを組み合わせると3Dを活かしたWebサイトが簡単に作れる
こんにちは。シフカです。
今回は、Web用に3Dオブジェクトを作成できる「Spline」と、ノーコードでWebサイトを実装できる「Framer」を組み合わせて、スクロールやマウスに反応して3Dモデルがダイナミックに動くページを作成してみました。3Dが動くサイトって憧れるけど実際に作るにはかなり難しいんだろうなと思っていたのですが、SplineとFramerを組み合わせることで意外と簡単に実現できたので今回はその流れを紹介します。
ツールについて
Splineは、3Dモデルやアニメーションを作成、編集し、それをWebサイト向けに簡単に書き出せる無料のツールです。Webブラウザ上で3Dシーンを作ることができ、シンプルな操作で動きやインタラクションを追加できるのが特徴です。また、Webへのエクスポート機能が充実しており、コードが苦手な人でも簡単に埋め込むことが可能です。
Framerは、ノーコードでWebサイトをデザイン・実装できるツールです。ページのレイアウトやインタラクションの設定を直感的に行うことができ、デザインをそのままWebページとして公開できる点が強みです。
完成したページはこちら
まず初めに今回作ったページをご覧ください。PS5のコントローラーをiPhoneの紹介ページのような雰囲気で、製品のビジュアルを活かしてスクロールに合わせて動くページを作ってみました。3DモデルがWebページ上に映し出され、スクロールに反応し、ボタンも押せることが分かるかと思います。
レイアウトと3Dデータを準備
まずはFigmaで3D以外の大まかなレイアウトを作成します。出来上がったレイアウトをFramerのFigmaプラグインを使ってコピーし、Framerにペーストします。特に設定はなくFigmaからFramerのアートボードにペーストできました。
今回はSplineでモデリングはせず、フリーで使用できるこちらのコントローラーの3Dモデルを使っていきます。
ボタンが押せるようにしたい
ボタンがあるものは絶対押したくなるだろうなと考え、ボタンにインタラクションを付けたいと思いました。コントローラーのボタンを押せるようにするには、まず各ボタンが個別のパーツとして分割されていてSpline上でボタンごとに動かせるようにする必要がありました。今回ダウンロードしたデータはボタンが1つのオブジェクトとしてくっついていたので、Blenderを使ってボタンを1つ1つ分離し、インポートする前の準備をしました。
ボタンをバラしたらSplineに3Dモデルをインポートします。手順は非常に簡単で、ダウンロードした3Dモデルのファイルを画面にドラッグ＆ドロップするだけでシーン内に配置されます。3DモデルのインポートはGLTF、STL、OBJ、FBXファイルがサポートされているようです。
ステートとイベントを追加
Splineでは、オブジェクトの異なる状態をステートとして登録することができます。右側のパネルからステートを追加し、ボタン押下時の位置にオブジェクトを移動させます。ここではdownステートと命名しました。次にイベントを追加して、Mouse Pressでトランジションするように設定します。1番には初期位置であるBase State、2番にdownを割り当てて、隙間の数値では変化時間を設定できるようでした。これだけでもう押せるようになったので全てのボタンに同様の設定をしていきます。
移動のみの場合は意識しなくていいのですが、オブジェクト中心での回転ではなく、トリガーなどは端を起点に回したい場合があるかと思います。そんな時は左側のサイドバーで、グループレイヤーをOptionキー(WindowsではAltキー)を押しながら選択することでピボットの位置のみを変更することが可能でした。
マウスの影響を設定
スクロールを止めている時にもインタラクティブな要素があるとページの雰囲気をリッチに感じさせられると思い、マウスの動きに連動してライトや3Dモデルの角度が変わるようにしたいと思いました。マウスの位置を検知してコントローラーをそちらに向かせるには、コントローラー全体のグループにLook Atイベントを追加し、ターゲットをCursorに設定することで実現できます。
マウスに紐づいて光の当たり具合を変化させる方法は、動かす用のライトを追加してそのライトにFollowイベントを追加します。コントローラーが向く時と同様にターゲットをCursorにすれば完了です。この時に、FollowとLook AtのDamping(減衰)の数値が完全に同じだと、ライトによる陰影の変化に気付きにくかったため、FollowのDampingを1、Look AtのDampingを25にして遅らせると動きにズレが出来て良さそうでした。
スクロールでコントローラーを動かす
コントローラーがマウスに向く動きに加えて、今度はページ上を説明文に合わせて回転しながら移動する動きを作ることにしました。単純に先程のLook Atを設定したグループで行おうとするとバッティングして、常にコントローラーがマウスの方を向いてしまう点に注意してください。それを回避するためにはLook Atを設定したコントローラー全体のグループの中にもう1段階グループを作り、それを回転させることで両方の動きを成立させていきます。
スクロールに応じて3Dモデルの角度を変えるには、見せたい角度と位置をステートとして登録します。トップでの正面、ハプティックフィードバック、アダプティブトリガー用に3つの角度を作成しました。これらにScrollイベントでステートがトランジションするように設定します。これで、ページを下にスクロールするにつれて、コントローラーが回転して異なる角度から見えるようになりました。
エクスポートしてFramerへ
今回はスクロール以外の操作で3Dシーンが動かないようにしたいため、Play SettingsからOrbitやPanなどの操作を出来ないように設定しました。
Splineから3Dシーンをエクスポートし、Framerに組み込むのもとても簡単でした。ViewerからEmbedコードをコピーすればSpline側での準備は完了です。Framer側ではEmbedコンポーネントを用意し、先程のコードをEmbedのHTMLにペーストするだけで、作成した3Dシーンがページ内でもう動くようになりました。
Framerでページの設定
Framerでは、右側のパネルでレイヤーの設定を簡単に行えます。今回は、Embedコンポーネントをスクロールしても画面に追従させるように設定しました。また、ブラウザでのスクロールの動作とSplineシーンのトランジションが完全に一致するように調整したかったのですが、ブラウザごとの高さを取得して正確に制御する方法が見出だせず、自分の環境に合わせた動きにしています。この辺りの設定は、Web実装やプログラミングに詳しい方であればスムーズに調整できる部分だと思います。その他の表示物の設定をして、右上のPublishを押せばリンクが発行され公開が可能です。無料プランでは右下のロゴは消せず、両ツール共に有料プランから非表示に出来るようです。
実際に使ってみて
少し工夫が必要ですが、3Dモデルが動くWebページをSplineとFramerを組み合わせることで想像よりも簡単な手順で実現できとても感動しました。プログラミングに慣れていない部分でまだ完全にはブラウザごとに挙動を最適化できませんでしたが、今回で基本的な組み込み方やインタラクション設定の流れは分かってきました。まだまだ使っていない機能も沢山あるので色々な表現と共にもっと使ってみたいと思いました。デザイナーやプログラミングに不慣れな方でWeb上の動的なコンテンツを作りたい方には、これらのツールをぜひ試してみてはいかがでしょうか。