しっぽ
レコード

セカンドの研究室

社内向けに研究目的でつくったコンテンツを
掲載しています

Webブラウザ上でインタラクティブな3D体験


3Dコンテンツのメインビジュアル

弊社オフィスと社員を動物キャラクターに見立てた3DコンテンツをWebサイトに実装しました。

特別なプラグインなしで、Webブラウザ上でインタラクティブな3D体験が出来ます。ぜひ体験してみて下さい!
▶ 3Dデモはこちら

制作フローについて

このWEBコンテンツで使った技術と工程を解説します。


  • ①3Dモデリング・アニメーション
    Blenderでのモデリング風景 3DCGソフト「Blender」を使用し、オフィス空間と動物キャラクターのモデリング、アニメーションの作成しました。

  • ②Webでの3D描画
    作成した3DモデルをWebで表示するため、Webブラウザの標準技術である「WebGL」と、
    その開発を効率化するライブラリ「Three.js」を利用しました。

  • ③インタラクション実装と調整
    ライティングやカメラワークの調整 プログラミングによってライティングやカメラワークを調整し、
    ユーザーが直感的に操作できるようクリックポイントやポップアップなどのインタラクティブな要素を加えています。

3Dイラストレーションの魅力

  • このサイトのTOPページのアニメーションも、この3Dコンテンツを活用して作られています。
    TOPページのアニメーション
  • 3Dは一度作成すると、カメラの角度を変えて書き出すだけで、
    様々なパターンの画像を作れるというメリットがあります。

  • また、モデルに動きをつけた簡単なアニメーションも制作しやすく、
    表現の幅が大きく広がります。

一つの素材から、Webサイトのメインビジュアル、ブログの挿絵、動画コンテンツなど、
さまざまな展開ができるのは3Dならではの良さだと思います。

ながた

さま