Web3D ビューワー

Web3Dビューワーは、データの閲覧、共有をインターネットやイントラネット上で行うことができる、Webブラウザ上で動作する3次元ビューワーです。3次元形状用のビューワーと360度のパノラマ画像を扱うことができるパノラマ画像用のビューワーの2種類の製品があります。

3次元形状用Web3Dビューワー
パノラマ画像用Web3Dビューワー

いずれもWebブラウザのみで動作し、特別なアプリケーションは必要ありません。また、HTMLとJavaScriptで構成されており、Webサーバー側にプログラム等は必要ありません。WindowsやMacをはじめ、タブレットやスマートフォン上で、WebGLに対応したWebブラウザを使って、その3次元データを見ることができるようになります。

3次元形状用Web3Dビューワー

VRやWeb用の3Dフォーマットとして標準になりつつあるglTF *1) 形式のファイルを読み込み、Webブラウザ上で表示するためのビューワーです。

以下の用途に利用できます。

CADデータなどの3DデータのWeb共有
製品Webカタログ、Web広告
機器の操作Webマニュアル
その他、各種技術資料のWeb上での共有　など

現在、glTF形式のファイルに保存できるアプリケーションはまだ数少ないですが、PDF3D ReportGenを利用して、STEPやIGESなどの機械系CADデータ、IFCなどの建築CADデータ、LAS/LAZなどの点群データ、VRMLやOBJなどの汎用的な3次元データを glTF形式のファイルに変換することができます。その変換後のファイルとこのビューワーをWebサーバー上に置き、WebGLに対応したブラウザでアクセスすることで、マウスによる回転、拡大縮小などの対話操作が可能となります。その他、パーツの表示／非表示、パーツに設定された情報の表示にも対応しています。

以下の機能があります。

3次元形状を回転、拡大縮小、移動できます。
部品の選択やその部品の表示非表示を設定できます。
部品情報を表示できます（部品情報が含まれている場合）。
外側の部品を非表示にして、内部を表示できます。
部品をXYZ方向からカット（クリッピング）して見ることができます。
明るさを調整できます。
点群の場合は、点の大きさを調整できます。
表示している状態をキャプチャーし、画像ファイルとして保存できます。

Webブラウザ全体に表示されるビューワーとしての形だけでなく、HTMLのiframeを利用して、ページの一部に3次元のビューワーを埋め込むこともできます。（後述のサンプルをご参照ください。）

また、PDF3D ReportGenによるデータの変換時に3D PDFファイルも準備しておくことで、Web上でデータを閲覧するだけでなく、詳細な技術情報は3D PDFファイルをダウンロードして参照するといったデータ共有サイトの構築が可能となります。

PDF3D ReportGen ならびに、Web3Dビューワーの評価お貸出し（1か月間）も可能です。お問合せのページから、お気軽にお申込みください。

*1) glTF
Khronos Groupが提唱する汎用3Dデータファイルフォーマット
https://www.khronos.org/gltf/

パノラマ画像用Web3Dビューワー

パノラマ画像用Web3Dビューワーは、360度カメラで撮影されたパノラマ画像を読み込み、球にマッピングして表示します。

マウスやタッチ操作により、自由に視点を変えたり、拡大縮小しながら、見ることができます。拡大縮小の際に、前後に移動するモードと、視野角を変えるモードがあります。前者のほうが縮小時に広範囲を表示でき、後者のほうが歪みが少ないという違いがあります。

また、以下のナビ機能があります。

ナビをクリックすることで、別のパノラマ画像に移動できます。
ナビに以下の情報を埋め込み、ナビをクリックするとその情報を表示できます。
- 画像ファイル
- URL（別ウィンドウとしてWebブラウザに表示）
- 文字情報（ダイアログに表示）

その他、以下の機能もあります。

視点の移動範囲（上下左右、拡大縮小）を制限できます。
画像の傾きを補正できます。
画像のコントラスト（明暗）を調整できます。
表示している状態をキャプチャーし、画像ファイルとして保存できます。

各種設定にも特別な環境は不要です。ローカルの作業マシンでエディター用のHTMLファイルをWebブラウザで開きます。例えば、ナビを設定するには、パノラマ画像を表示しながら、ナビを置きたい箇所をクリックし位置決めを行い、そのナビに埋め込む情報を作成します。この作成した設定情報ファイルとパノラマ画像をWebサーバー上に配置します。

実際にお手持ちの360度画像を使って、エディターの操作やパノラマ画像の表示を試してみることができます。お問合せのページから、お気軽にご連絡ください。

Web3Dサンプル

下にリストされている各リンクや画像をクリックすると、サンプルが表示されます。
（別タブに Web3D ビューワーが開きます。）

※ Chrome や Firefox、Safari、Edge などのブラウザでアクセスしてみてください（2018年以降のバージョン推奨）。
※ IE は IE11 に対応しています。

まず、データの読み込み中には、メニューありのページでは、メニューバーの左にロード中を示すアイコン（黄色）が表示され、中央の文字が Loading… となりますので、しばらくお待ちください。

読み込みが終わるとロード中のアイコン（黄色）が消え、中央にファイル名が表示され、そのデータが表示されます。

メニューのないページでは、データの読み込み中には、ロード中を示すアイコンが表示されます。読み込みが終わるとそのデータが表示されます。

マウス操作は以下の通りです。

回転：マウス左ボタンを押したままドラッグ
拡大縮小：マウスホィール、もしくは、マウス右ボタンを上下にドラッグ
移動：マウス左右ボタンを同時にドラッグ

※ スマートフォンでは、１本指（回転）、２本指（移動）の操作、ピンチ操作（拡大縮小）をお試しください。

3次元形状用のビューワーでは、マウス左ボタンのクリックで、パーツを選択することができます。また、マウス右ボタン（スマートフォンでは１本長押し）で非表示に設定するメニューを開くことができます。

パノラマ画像用のビューワーでは、ナビが表示されている場合は、そのナビをマウス左ボタンでクリックすると、そのナビに設定されている情報を見たり、他のパノラマ画像へ移動したりすることができます。

その他、メニューバーの右端にある三本アイコンをクリックすると、パラメータが表示されます。3次元形状用のビューワーでは、パーツの選択やそのオン・オフの他、クリッピングなどの操作が可能です。パノラマ画像用のビューワーでは、視点の移動範囲の制限や明るさ調整などを行うことができます。詳細は、同メニューにあるHelpをご参照ください。