WEB3D開発・制作｜Webブラウザで動く3Dコンテンツを開発

Webサイトに、3Dを組み込む

商品をもっと詳しく見せたい。
Webサイトの中で商品を動かしたい。
色や素材を変えて、
完成イメージを見せたい。

そんなとき、Webサイトの一部分に
3Dを組み込むことができます。

商品ページに3Dビューアを置いたり、
色や素材を切り替えられるシミュレータを作ったり、
スクロールやマウス操作に合わせて
3Dモデルを動かしたり。
さらに、複数の商品を組み合わせたり、
3D空間そのものをWebコンテンツに
することもできます。

AgWORKSでは、WebGL・Three.jsを使った
3Dコンテンツの開発から、
Webサイトへの組み込み、管理画面やデータ連携を
含むシステム開発まで対応しています。

WEB3Dで、こんなものが作れます

• 

  商品を3Dで見せる

  商品を回転・拡大しながら、好きな角度から確認できる3Dビューア。

• 

  商品を3Dで選ぶ

  色、素材、パーツなどを選びながら、完成イメージを3Dで確認できるシミュレータ。

• 

  商品を組み合わせる

  複数の商品やパーツを組み合わせたり、空間に配置したり。商品選びやレイアウトを3Dで体験できます。

• 

  Webサイトを動かす

  スクロールやクリック、マウス操作に合わせて3Dモデルが動く、インタラクティブなWeb表現。

• 

  マップやイラストを操作する

  地図やイラストの中から場所や情報を探し、クリックして詳しく見るインタラクティブコンテンツ。

• 

  3D空間を作る

  ショールーム、展示会、ミュージアム、ギャラリーなどを、Webブラウザから体験できる3D空間に。

WEB3D開発事例

• 

  3Dシミュレータ開発事例：三協フロンテア：簡単シミュレータ

  三協フロンテア株式会社が提供する、およそ3分間で自分に合ったスタイルの空間をシミ…

• 

  インタラクティブマップ制作事例｜化学メーカーの製品をわかりやすく伝えるWebコンテンツ

  DIC株式会社様の「こんなところに！DIC」ページの開発を担当しました。 化学メ…

• 

  3Dシミュレータ開発事例：Xis-Frame

  コマニー株式会社様の製品、「Xis-Frame」の3Dシミュレータを開発いたしま…

• 

  Web3Dサービス開発事例：だれでもシミュレータ｜Web3Dで3Dシミュレータを作れるWebサービス

  3Dデータを使って、自社の商品シミュレータをつくる。 そんな仕組みそのものを、W…

• 

  3Dイラストマップ開発事例：暮らしと正興電機｜3Dイラストマップで知る、暮らしと正興電機の関わり

  正興電機製作所のコーポレートサイトに、3Dイラストマップを使ったWebコンテンツ…

• 

  3Dバーチャル空間開発事例：花王 こども環境絵画ミュージアム｜Web3Dで実現したバーチャル絵画展

  子どもたちが描いた絵を、もっと多くの人に見てもらいたい。 花王がCSR活動の一環…

• 

  Web3Dオンラインギャラリーサービス開発事例：ギャラリスト3D｜Web3Dでつくるオンラインギャラリーサービス

  作品を展示する場所を、Web上につくる。 「ギャラリスト3D」は、アーティストが…

• 

  3Dシミュレータ開発事例：BAINCOUTURE｜浴室を自由に組み合わせて試せる3Dシミュレータ

  BAINCOUTUREのWebサイトに、浴室を自由にコーディネートできる3Dシミ…

WEB3Dとは？

Webブラウザ上で3Dモデルや3D空間を表示し、
ユーザーが操作できるWebコンテンツです。

WebGLやThree.jsなどの技術を使うことで、
専用アプリをインストールすることなく、
PCやスマートフォンのブラウザから3Dを
体験できます。

3Dビューアやシミュレータ、
インタラクティブなWeb表現、
バーチャル空間など、Webサイトの目的に
合わせてさまざまな使い方ができます。

WEB3Dのメリット

WEB3Dで出来ること

Webサイトは、ページを読むだけのものでは
ありません。
商品を手に取るように眺めたり、
部屋の中を歩いたり、街の中から情報を探したり。
画面の中に「触れるもの」や「動ける場所」を
作ることで、Webサイトそのものを
体験に変えることができます。
例えば、こんなことができます。

• 

  商品を、360°好きなところから見る。

  商品の写真を何枚も並べるのではなく、
  画面の中の商品を自分で回して見る。
  細部まで拡大したり、裏側を確認したり、
  普段は見えない部分まで見せることができます。
  「写真を見る」から「商品を触って見る」へ。

• 

  色を変えたら、その場で商品も変わる。

  「この色にしたらどうなる？」
  そんな疑問を、その場で試せます。
  色を変える。素材を変える。パーツを変える。
  選んだ内容が3Dモデルに反映され、
  その場で完成イメージを確認できます。
  カタログを読むのではなく、自分で商品を作ってみる。

• 

  Webサイトの中に、商品を置いてみる。

  ただ商品を回転させるだけではありません。
  Webサイトの中で商品を組み合わせたり、空間に
  配置したり、見せ方そのものを変えることもできます。
  「この商品を置いたらどう見える？」
  そんな試してみたくなるWebサイトも作れます。

• 

  街の中を歩きながら、情報を探す。

  地図を見るだけではなく、
  街そのものをWebコンテンツにする。
  建物をクリックすると情報が出る。
  場所を移動する。
  カテゴリを切り替える。
  気になる場所を探す。
  情報を一方的に読ませるのではなく、
  自分で探してもらう。
  DICや正興電機のインタラクティブマップは、
  その一例です。

• 

  美術館の中を、ブラウザから歩いてみる。

  作品を一覧で並べるだけではなく、空間そのものを作る。
  入口から展示室へ移動して、気になった作品を見つける。
  作品の前まで行って、詳しい情報を見る。
  Webサイトなのに、「場所」がある。
  花王のこども環境絵画ミュージアムでは、
  そんなWeb上の展示体験を作りました。

• 

  スクロールすると、商品が動き出す。

  ページを読み進めるだけなのに、商品が回転する。
  スクロールに合わせて形が変わる。
  パーツが組み上がっていく。
  内部の構造が見えてくる。
  動画を再生するのではなく、
  ユーザーの操作そのものを演出にする。
  WebGLを使えば、そんなインタラクティブな
  表現をWebサイトの中に作ることができます。

3Dを載せたい。
でも、何から考えればいい？

Webサイトに3Dを組み込む場合、
3Dモデルを用意するだけでは完成しません。

どこまで動かすのか。
何を選べるようにするのか。
どのデータを使うのか。
スマートフォンでも動かすのか。
既存のWebサイトとどうつなぐのか。
公開後は誰がどのように更新するのか。

AgWORKSでは、3Dコンテンツだけを作るのではなく、
「何を3Dにするのか」
「ユーザーに何をしてもらうのか」から整理し、
Webサイトや業務システムの中で実際に使える形まで
設計・開発します。

まだ具体的な仕様が決まっていない段階でも
ご相談いただけます。