VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇

PDF3D/Web3D Viewer ver.2.1
PDF3D/Web3D ビューワーは、PDF3D ReportGen で作成された glTF ファイルを読み込み、Web ブラウザで 3 次元表⽰を⾏うことができるビューワーです。
・ マウス操作・ パーツの選択
・ パーツの⾮表⽰とすべてを表⽰
・ ツールバー・ メインメニュー
・ パーツ情報の表⽰
・ 制限事項・ ライセンス情報

マウス操作
以下のマウス操作で回転、拡⼤縮⼩が可能です。
操作

幾何変換

マウス左ボタンでドラッグ回転

マウス右ボタンで上下にドラッグ

拡⼤・縮⼩もしくは、マウス中ホイールのスクロール
もしくは、Shift キーを押しながらマウス左ボタンで上下にドラッグ
Mac の場合は、２本指スクロール
マウス左ボタン＋右ボタン（左右同時）でドラッグ移動

もしくは、Ctrl キー、または、Alt キーを押しながらマウス左ボタンでドラッグ
Mac の場合は、Command キーを押しながら１本指ドラッグ* タッチ操作では、１本指（回転）、2 本指（移動）、ピンチ（拡⼤縮⼩）となります。

1

http://vts-software.co.jp/

VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇

パーツの選択パーツの選択は、マウス左クリックで⾏います。
● パーツ選択︓マウス左クリック※ マウスを移動せずに同じ位置でピックを繰り返すと、そのピック位置を含む関連するパーツが選択対象として順番に切り替わります。
もしくは、後述のメインメニューのパネル内に表⽰されるリストから選択します。

パーツの⾮表⽰とすべてを表⽰
コンテキストメニューを利⽤して、今選択しているパーツを⾮表⽰にすることができます。また、すべてを表⽰することができます。
● コンテキストメニュー︓マウス右クリック
Mac の場合は、２本指ピック
スマートフォン等のタッチ操作の場合は、１本指⻑押し上記のマウス操作で、以下のコンテキストメニューが表⽰されます。

⾮表⽰を選ぶと、現在選択されているパーツが⾮表⽰となります。

2

http://vts-software.co.jp/

VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇

ツールバー
データの読み込み中は、トップメニュー中央に（Loading...）と表⽰されます。また、左側にロード中を⽰す⻩⾊のアイコンが表⽰されます。
※ スマートフォン等でアクセスした際に、このバーがすぐに出ない場合があります。
再度前のページに戻り、再度、対象にアクセスしてみてください。

読み込みが終わると、そのファイル名に変わります。

● メインメニューアイコン
パーツのリスト（表⽰⾮表⽰）やクリッピングなど、各種メニューパネルを表⽰します。

メインメニュー
メインメニューを開くと、以下のようにパーツリスト、その他のパラメーターが表⽰されます。
（閉じるには、右上の×アイコンをクリックします。）

3

http://vts-software.co.jp/

VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇● パーツのリスト
パーツを選択すると、そのリストがハイライトされ、画⾯上では⾚枠で表⽰されます。
リストの前にある緑のチェックで、そのパーツの表⽰⾮表⽰を設定できます。
⼀番前の三⾓のチェックで、⼦供のパーツを展開表⽰できます。

● カメラのタイプ透視投影（Pers）か平⾏投影（ortho）のカメラのタイプを切り替えます。

● 基準⾯
オブジェクトの下に配置されている基準⾯のオンオフを切り替えます。
平⾏投影の場合は、⼿前側がクリップされた表⽰となります。

● 背景⾊背景⾊を変更できます。

● スカイボックス（背景画像）
背景画像を設定します。
予め準備されているテクスチャ画像から選択します。
Skybox がオンのときに有効で、オフの場合は Background ⾊が適⽤されます。
透視投影の場合のみ有効です。

● クリッピング
オブジェクトを xyz のいずれかの１つの⽅向からカット（クリップ）することができます。
まず Clipping をオンにし、±xyz のいずれかの⽅向を選択してください。

4

http://vts-software.co.jp/

VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇

画⾯上に Clip Marker が表⽰されます（上図左中央のキューブ形状）。
まず、このキューブをマウスで選択してください。
キューブの⾊が⾚に変わります。（上図右）
マウス左ボタンでクリックしたまま、そのクリップ⾯を移動する⽅向にゆっくり移動させてください。（ドラッグしてください。）
Clip Marker のチェックは、このマーカーのオンオフを切り替えます。

● ガンマ補正
ガンマ値の補正のオンオフです。
オンにすると、全体的に薄く（明るく）なります。
ReportGen のデータ作成時に OSG インターフェースを利⽤している場合は、このチェックをオンにした⽅が元のデータに近い⾊になる場合があります。
ガンマ値を指定します。
1.0 が補正なしと同じで、1.1, 1.2 と⼤きくしていくことで明るくなります。

● トーンマッピング補正
トーンマッピングの露光のレベルを指定します。
⼤きくすると全体的に明るくなります。
※ 特にポイント（点群データ）表⽰の場合には、この値を⼤きくしてください。
（例 5.0 など）● ポイントの表現⽅法
ポイント（点郡）を表⽰する際に、⼀定の⼤きさで表現するか（オフ）、カメラからの距離によって、近くは⼤きく、遠くは⼩さく表現するかを切り替えます（オン）。
ポイントの⼤きさを Point Size とあわせて調整します。

5

http://vts-software.co.jp/

VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇● ポイントのサイズ
ポイント（点群）の⼤きさを指定します。Point Attenuation がオフの場合は⼀定の⼤きさで指定したピクセルサイズで表⽰されます。Point Attenuation がオンの場合は、カメラとの距離で点の⼤きさが変わります。全体的な⽐率を調整します。
※ Point Attenuation がオンの場合は、0.05 など、1 より⼩さい値を設定してみてください。

● アニメーションのオンオフ
アニメーションの再⽣（オン）、停⽌（オフ）を切り替えます。
現状、キーフレームのみに対応しており、ReportGen による変換では、機構解析ソル
バーの Adams が対象となります。
その他の時系列連番ファイルによるアニメーションには対応していません。

● アニメーションのスピードアニメーションのスピードを調整できます。値を⼩さくすると遅くなり、⼤きくすると速くなります。

●ズームアイコン
ビューの上に拡⼤縮⼩のアイコンを表⽰するかどうかのオンオフを指定します。
アイコンが表⽰されている場合は、＋アイコンを押し続けると拡⼤し、－アイコンで縮⼩します。

●画像保存アイコン
ビューの上に画⾯のキャプチャ画像保存のアイコンを表⽰するかどうかのオンオフを指定します。
アイコンが表⽰されている場合は、カメラのアイコンをクリックすると、現在の表⽰画⾯をキャプチャし、画像ファイルとしてダウンロードします。

6

http://vts-software.co.jp/

VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇● URL パラメーターの保存ボタン
設定した情報を url パラメーターに設定した URL を作成します。
現在設定した状態を再現することができます。
ボタンをクリックすると、ダイアログが開きます。

OK をクリックした際にクリップボードにコピーされていますので、別のブラウザにペーストしてみてください。
また、この URL を送ることで、送付された⼈が同じ状態を再現できます。

● 設定ファイルの保存ボタン
設定した情報を設定ファイルに保存します。
このボタンを押すと、今読み込んでいるデータと同じ名前で拡張⼦が.jsonのファイルがダウンロードされます。
このファイルは、Web サイトへのデータの公開⽤です。
Web サイト上のデータファイルと同じ位置に同じ名前の.json ファイルがある場合は、その設定が初期値として読み込まれます。
先の URL パラメーターが設定されている場合は、この設定よりも URL パラメーターの設定が上書き（優先）されます。

● 画像保存ボタン
現在の表⽰をキャプチャし、画像ファイルとしてダウンロードします。
画⾯上のカメラ・アイコンと同じ機能です。

● 3D PDF ファイルのダウンロード
このデータに対して予め作成しておいた 3D PDF ファイルをダウンロードします。
（注︓画⾯の表⽰を PDF 化するわけではありません。）

7

http://vts-software.co.jp/

VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇

作成された 3D PDF ファイルは、Windows や Mac 版の Acrobat
Reader に対応しています。

パーツ情報の表⽰
パーツを選択すると、画⾯上に、そのパーツ名が表⽰されます。
また、データの作成時にパーツ情報が埋め込まれている場合は、下図のように、そのパーツを選択すると、その情報も表⽰されます。

8

http://vts-software.co.jp/

VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇

制限事項
・ IE は IE11 のみ、また、Edge、Chrome、Safari など、WebGL が動作するブラウザに対応しています。
（2018 年以降のバージョンが推奨です）
・ アニメーションは、キーフレーム・アニメーションのみに対応しています。
・ glb ファイル（１つ）にのみ対応しています（gltf アスキー・ファイルには対応していません）。
・ ピックによるパーツの選択では、クリッピングによる⾮表⽰パーツもピック対象となります。
同じ位置で（マウスを移動せずに）ピックを繰り返すことで、選択対象が切り替わりますので、複数回ピックして対象を選んでみてください。
・ KHR_materials_pbrSpecularGlossiness が設定されているオブジェクトは Clipping できません。
（ReportGen の変換時に、glTF の出⼒メニューでスペキュラ/グロシネスの設定をオフにしてください。）
・ 背景画像（スカイボックス）と実際の光源は⼀致していません。
・ 初期の表⽰時にビューに収まるように座標値がスケーリングされています。

ライセンス情報
本プログラム(HTML/JavaScript)を、許可なしに、複製、ダウンロード、改変等を⾏うことを禁⽌します。
本プログラムの著作権は VTS ソフトウェア株式会社が保有しています。
ただし、以下のオープンソース・プログラム部分に関しては、各ソースのライセンスに準じます。
・JQuery
Copyright JS Foundation and other contributors, https://js.foundation/
https://jquery.org/license・Three.js
Copyright (c) 2010-2013 three.js authors
https://github.com/mrdoob/three.js/blob/dev/LICENSE
・glTF Viewer
Copyright (c) 2017 Don McCurdy
https://github.com/donmccurdy/three-gltf-viewer/blob/master/LICENSE
・GLTFLoader
https://github.com/mrdoob/three.js/blob/r105/examples/js/loaders/GLTFLoader.js9

http://vts-software.co.jp/

VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇

・JSTree
Copyright (c) 2014 Ivan Bozhanovhttps://www.jstree.com/
・Font Awesome
https://fontawesome.com/license/free
・simple-color-picker
Copyright (c) 2010 Rachel Carvalho <rachel.carvalho@gmail.com>
https://github.com/rachel-carvalho/simple-color-picker/blob/master/LICENSE・SkyBox Image
SkyboxSet by Heiko Irrgang ( http://gamvas.com ) is licensed under
the Creative Commons Attribution-ShareAlike 3.0 Unported License.
Based on a work at http://93i.de.
・JQuery contextMenu
Authors: Bjorn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
Web: http://swisnl.github.io/jQuery-contextMenu/
Copyright (c) 2011-2019 SWIS BV and contributors
MIT License http://www.opensource.org/licenses/mit-license
・Promises
Copyright (c) 2013 Forbes Lindesay
https://www.promisejs.org/
・BabelCopyright (c) 2014-present Sebastian McKenzie and other contributors
https://babeljs.io/
・Spectrum
Copyright (c) Brian Grinstead
https://bgrins.github.io/spectrum/
https://github.com/bgrins/spectrum/blob/master/LICENSE
・FileSaver.js
By Eli Grey, http://eligrey.com
License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)source : http://purl.eligrey.com/github/FileSaver.js

10

http://vts-software.co.jp/

VTS ソフトウェア(株)2020 年 8 ⽉ 1 ⽇

・dataURIBlob()
https://gist.github.com/davoclavo/4424731
The MIT License (MIT)Copyright (c) 2016 David Gomez-Urquiza
・Others
https://iwb.jp/javascript-event-long-push-mouse-button-tap/

11

http://vts-software.co.jp/