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

Website Production Service：WEB3D

Webサイトに3Dを載せる。
商品を動かす。空間を見せる。

WebGL・Three.jsを使って、Webブラウザ上で動く3Dコンテンツを開発します。

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

Web3Dは、特別な3Dコンテンツだけに
使うものではありません。
商品ページに3Dモデルを表示したり、
WebGLを使ってLPにインタラクティブな
表現を加えたり、
商品の組み合わせを3Dで確認できる
シミュレータを作ったり。
Webサイトの一部分に
3Dを組み込むこともできます。
AgWORKSでは、WebGL・Three.jsを
使った3Dコンテンツの開発から、
Webサイトへの組み込み、管理画面や
データ連携を含むシステム開発まで対応しています。
これまでに、商品3Dシミュレータ、
インタラクティブマップ、
バーチャルミュージアムなど、
目的に合わせたWeb3Dコンテンツを
開発してきました。

 

Web3Dで何を作れるか

商品を3Dで見せる

商品を回転・拡大しながら、Webブラウザ上で
確認できる3Dビューアを作れます。

商品を3Dでシミュレーションする

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

WebサイトやLPに3D表現を加える

スクロールやマウス操作に合わせて3Dモデルを
動かすなど、Webサイトの一部分にWebGLを
組み込めます。

イラストやマップを
インタラクティブにする

マップの中から情報を探したり、
場所をクリックして詳細を表示したり。
2Dのイラストやマップを、操作できるWebコンテンツにできます。

3D空間をWeb上に作る

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

WEB3D開発事例を見る

Web3Dとは？

Web3Dとは、Webブラウザ上で3Dモデルや
3D空間を表示し、
ユーザーが操作できるWebコンテンツのことです。
WebGLやThree.jsなどの技術を使うことで、
専用ソフトやアプリをインストールすることなく、
PCやスマートフォンのブラウザから3Dを
体験できる仕組みを構築できます。
商品を回転させて見る3Dビューアから、
商品の色や仕様を選ぶシミュレータ、
3D空間を歩き回るバーチャルショールームまで、
用途に応じてさまざまなWebコンテンツに
利用できます。

WEB3Dのメリット

  • ブラウザだけで3Dを体験できる専用アプリをインストールすることなく、PCやスマートフォンから利用できます。
  • 商品を、さまざまな角度から見せられる回転・拡大・縮小など、写真では伝えにくい形状やディテールを見せられます。
  • 「選ぶ」「試す」をWebサイトに組み込める色や素材、パーツを変更しながら、完成イメージをその場で確認できます。
  • Webサイトにインタラクティブな表現を加えられるスクロールやクリック、タッチ操作に合わせて3Dを動かすことができます。
  • 3D空間そのものをコンテンツにできるショールーム、展示会、ミュージアム、ギャラリーなど、空間を使ったWeb体験を作れます。
  • Webサイトの一部分だけに3Dを取り入れられるページ全体を作り替えなくても、商品ページやLPなど、必要な場所に3Dを組み込めます。

WEB3Dで出来ること

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

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

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

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

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

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

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

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

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

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

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

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

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

WEB3D開発のご依頼について

WEB3D開発にはjsプログラムだけでなく3DCGの専門知識や、
美しく見せるための技術、限られた処理能力で最大限の表現をするための実装アイデアの他
安定した表示や操作性にトライ&エラーの経験値とともに
ブラウザやデバイスなど、最新のWebGL対応状況の知識が必要です。
もし経験豊富な制作会社をお探しなら、是非一度AｇWORKSにご相談ください。

お問い合わせはこちらから

構想段階から試せる、AgWORKSのWeb3D開発

AgWORKSでは、Web3Dを「作れるか」ではなく
「業務やビジネスに使えるか」という視点で検証を重ねてきました。

その過程で生まれ、現在も運用され続けているのが、
ギャラリスト3D、だれでもシミュレータ、だれでもショールームです。

これらは単なるデモや試作品ではありません。
実際のユーザー利用を通じて、
「データ管理」「運用フロー」「更新性」「拡張性」
といった“現場で必要になる要素”を検証し続けている実戦環境です。

AgWORKSのWeb3D開発は、
こうした実利用で磨かれた基盤をもとに、
構想整理から検証、実装までを一気通貫で支援します。

【参考記事】
ご相談から公開・運用までの流れ

製造業・BtoB向けWeb3Dシミュレーション開発

WEB3Dシミュレータ開発

製品説明・検証・業務効率化のための
Webブラウザ上で動く3Dツールを要件整理から開発します
※ WebGL / Three.js を用いたブラウザ完結型 3D 開発

製造業・BtoB向けシミュレータ開発

3D空間を自由に動き回りながら、展示作品の世界に没入。

バーチャルギャラリー開発

シンプル＆直感的操作感の
3Dバーチャルギャラリーの構築に加え、
運営・管理用の専用ダッシュボードをご用意。
操作も管理もスムーズなバーチャルギャラリーを開発します。

バーチャルギャラリー開発について

実店舗に来られないお客様に、是非いらして欲しい。

バーチャルショールーム

リアルショップのような作りに、
ウェブならではのサービスをプラス。
来店できないお客様に、ウェブ上の
ショールームでおもてなし、なんていかがですか？

バーチャルショールーム開発について

あれ？展示会で見るもの、ほとんどここで体感できるかも？

WEB3Dバーチャル展示場

展示会を、WEB3Dで行いませんか？
バーチャルショールームサービス
「だれでもショールーム」を使えば
簡単にWEB3D展示場が作れます。

WEB3Dバーチャル展示場について

よくある質問

web3dとはなんですか？

WindowsやMac、chrome、iPhone、androidなどデバイスやOSに制限されずに、ウェブサイト上で3Dを表示する技術の事です。特別なアプリを必要とせず、幅広いターゲットにアピール出来るコンテンツが開発できます。

web3dではどんな事ができますか？

3d表示を使ったイラストレーション、アニメーションから、シミュレータやバーチャルギャラリー、バーチャル展示場などが開発できます。

3dシミュレータでどんな事ができますか？

色や素材、形状の組み合わせを自由に選べたり、その結果から費用や納期の算出、打ち合わせの資料の自動出力などが可能です。3Dシミュレータシステム「だれでもシミュレータ」なら、そんなシミュレータ、コンフィギュレータが簡単に作れます。詳しくは「3dシミュレータ開発」をご覧ください。

バーチャルショールームとはなんですか？

3dの仮想空間を自由に動き回り、商品やサービスを閲覧できるショールームの事です。バーチャルショールームサービス「だれでもショールーム」なら、CMS感覚で展示の設定やショールームデザインのカスタマイズができます。詳しくは「3Dバーチャルショールーム開発」をご覧ください。

バーチャルギャラリーとはなんですか？

3d空間を自由に動き回り作品を閲覧できるギャラリーの事です。バーチャルギャラリーサービス「ギャラリスト3D」なら作家は専用の画面から作品を登録、会員機能やカスタマイズができます。詳しくは「3Dバーチャルギャラリー開発」をご覧ください。

バーチャル展示場とはなんですか？

自由に動き回れるバーチャル空間にカスタマイズ可能なブースを設置できるサービスです。バーチャルショールームサービス「だれでもショールーム」なら、展示内容はもちろん、ロゴや壁紙、デザインも企業ブランドに合わせて自由にカスタマイズできます。詳しくは「WEB3Dバーチャル展示場開発サービス」をご覧ください。

WEB3Dデモコンテンツ

  • カーモデルシミュレータ

    クルマのカラーをシミュレート。
    マウスドラッグで360°自由に視点を操作でき、ボタンでカラーを変更、背景画像を切り替えたり、タイヤの角度も変えられます。
    気に入ったシミュレーション結果は撮影機能で画像に保存、SNSシェアも可能です。
    レスポンシブデザインにも対応しており、各デバイスで今すぐ体験できます。

    カーモデルシミュレータをみる

     

  • インテリアシミュレータ

    インテリアのシミュレーション。
    壁や床の素材を変えたり、家具の置き換え、テキスタイルの切り替えも可能。もちろんマウスドラッグで360°自由に視点を操作できます。
    レスポンシブデザインにも対応しており、各デバイスで今すぐ体験できます。

    インテリアシミュレータをみる

     

  • VR ドライブ

    必要なのは、お持ちのスマホかタブレット。
    アマゾンなどで入手可能な1,000円〜2,000円程度のGoogle cardboard対応のVRゴーグルがあれば、特別なアプリなしに誰でもVR体験できます。
    実際のドライバーズシートに座った気分を味わってみませんか？

    VR ドライブデモを体験してみる

     

  • 3D シティビュー

    WEB3Dで町並みを表現したサンプルコンテンツ。街全体を俯瞰で見たり、家の中までズームしたり。VR機能を使えば、走ってる車の視点でこの世界を体験できます。
    ちょっと可愛いい世界をご覧ください。

    VR 3Dシティビューデモを体験してみる

     

バーチャルショールームサービスのご案内

だれでもショールーム

「だれでもショールーム」とは、
自分のバーチャルショールームが持てるサービス。
展示やショールームのカスタマイズを
CMS感覚で使える・持てるサービスです

ブランドサイトはこちらから
https://daredemo-sr.com

WEB3Dで作るシミュレータサービスのご案内

だれでもシミュレータ

「だれでもシミュレータ」とは、
CAD・3Dデータがあれば、誰でも気軽に手軽に、
AR・VRにも対応した自社商品の
3D見積りシステムが作れる、そんなサービスです。

ブランドサイトはこちらから
https://daredemo-3dsim.com

バーチャルギャラリーサービスのご紹介

GALLERIST IIID（ギャラリスト3D）

作品を登録し、デザインを選ぶだけで、カンタンに3Dギャラリーに公開できる「ギャラリスト3D」。
アート作品画像をアップし、サイズ入力するだけでARが作れる機能をリリースしました。

ブランドサイトはこちらから
https://gallerist3d.com

エージーワークスでは、HTML5、WEB3Dに
対応した3Dコンテンツを開発します。
WEB3DはIE11やchrome、safariといった
一般的なモダンブラウザ環境があれば、PC、スマホ、
タブレットでも再生可能。
着せ替え・カスタマイズ可能な商品、リアルな
シミューレーションコンテンツを掲載した
ウェブサイトを制作できます。
制作のお問い合わせは下記よりご連絡ください。

その他のサービスはこちら
まずは無料相談
TOPへ