Inquisitive Pty Ltd

3D Interactive Animations for Inquisitive

オーストラリアで小学生向けデジタル教材を開発・提供するInquisitive社から、Splineを使った3Dのインタラクティブ教材デザインをご依頼いただきました。Spineデザイナーとして、宇宙空間の中に浮かぶリアルな小惑星と地球の3Dアニメーションと、日照時間のの夏と冬の移り変わりを説明するインタラクティブシーンを作成しました。

Work

プロジェクトの概要と目的

Inquisitiveは、オーストラリア・シドニーを拠点とするデジタル教材開発会社で、小学生向けのオンライン学習プラットフォームやコンテンツを提供しています。先生が楽しく教えること、そして生徒が目的を持って深く能動的に学べる体験を提供することを目標に、現在5,000校を超えるオーストラリア現地の小学校へ、質の高いサブスク型オンラインレッスンと学習プラットフォームを提供しています。

今回私はSplineを使用して、理科・科学の教材で使用する3Dのインタラクティブアニメーションを作成しました。

Mouse Downイベントを使用した3Dインタラクティブシーンの設定

まず1つ目の3Dアセットとして、小惑星と地球が浮かぶ宇宙の3Dシーンに簡単なマウス押下のインタラクションを追加しました。ユーザーがシーン上をクリックすると、カメラが小惑星に少しズームして近づき、角度が変わります。このインタラクティブなアニメーションにより、3Dのリアルな宇宙空間のシーンに引き込まれ、没入感のある学習体験を提供できます。このインタラクションはタブレットやモバイルデバイスでのタッチ操作にも対応しています。また、カメラからの距離をよりリアルに表現するために、モーションパスを調整し、小惑星のサイズも変更することで、距離感を立体的に表現しました。

2つ目のシーンでは、Splineを使用してボタンなどのUIコンポーネントを作成し、複数のインタラクティブアニメーションを設定しました。学習者や教師は実際に3Dシーンに触れて地球を回転させたり、夏や冬の太陽の日射位置を切り替えることができます。

最終的なデータ出力として、クライアントの学習プラットフォームに合わせた特定のキャンバスサイズでSplineシーンをエクスポートし、JSファイルとHTMLファイルを含むWebコンポーネントフォルダを作成しました。この方法により、Splineの3Dシーンをデジタル教材にHTML/JS形式で組み込むことができ、さらにレスポンシブ対応も可能になります。

FINAL OUTPUTS

3D Interactive Animations for Inquisitive

Spline AI 3D ジェネレーターを使ったモデリング

3Dの小惑星と地球のシーンでは、SplineのAIツールを使用して複数の異なる小惑星の3Dモデルを作成し、マテリアルテクスチャと組み合わせました。モデリングにSpline AIを活用することで、大幅な時間短縮を実現しました。

プロジェクトで最も苦労したこと

この3Dシーン実装で最も難しかったのは、Splineで複雑なインタラクティブデザインを設定することです。例えば、

ユーザーが各ボタンや地球そのものをクリックすると、地球のどの部分が太陽光で照らされているかを見ることができるインタラクションが設定されています。複数のイベントやアニメーションが1つのシーンに存在しているため、それぞれが矛盾なく動作するように、様々な設定を比較検証し、コンフリクトがなく実装することに成功しました。

オレンジでハイライトされた実際のエリアに追従し、かつ視認性を確保するために常に文字が正面を向いて回転し続けるアニメーションを設定する設定も大きなチャレンジでしたが、、3Dテキストとマップピンを組み合わせることで実装を実現しました。

Spline AI 3D ジェネレーターを使ったモデリング

3Dの小惑星と地球のシーンでは、SplineのAIツールを使用して複数の異なる小惑星の3Dモデルを作成し、マテリアルテクスチャと組み合わせました。モデリングにSpline AIを活用することで、大幅な時間短縮を実現しました。

プロジェクトで最も苦労したこと

この3Dシーン実装で最も難しかったのは、Splineで複雑なインタラクティブデザインを設定することです。例えば、

ユーザーが各ボタンや地球そのものをクリックすると、地球のどの部分が太陽光で照らされているかを見ることができるインタラクションが設定されています。複数のイベントやアニメーションが1つのシーンに存在しているため、それぞれが矛盾なく動作するように、様々な設定を比較検証し、コンフリクトがなく実装することに成功しました。

オレンジでハイライトされた実際のエリアに追従し、かつ視認性を確保するために常に文字が正面を向いて回転し続けるアニメーションを設定する設定も大きなチャレンジでしたが、、3Dテキストとマップピンを組み合わせることで実装を実現しました。

デジタル教材に搭載するための3Dシーンの最適化

地球を描いた3Dシーンアセットでは、背景にある星の色が変化するループアニメーションを追加しました。データサイズを最適化するために、銀河の背景画像と色が変化する設定をつけた3DのシェイプをSpline上で組み合わせ、MP4などの動画素材の使用を避けました。

このアニメーション付きの背景は3Dシーンのリアルさを高めています。オーストラリアのEdTech企業・Inquisitiveに興味のある方は、WEBサイトをご覧ください。各レッスンには、eBooks、動画、地図、インタラクティブコンテンツなど、様々なデジタル教材が搭載されています。

3D Interactive Animations for Inquisitive

Rotated 3d earth and asteroids in galaxy, animated gif