概要 †
- RVRはJwwの2.5DデータをWebGLに変換して3D表示とVRを試みています
- 多角形ソリッドと高さが与えられた線・線形ソリッドのみに対応
- WebGLの表示はthree.jsに丸投げ
- three.jsは動作が確認できている版を同梱
サンプル †
スマートフォン用QRコード
※スマートホンのブラウザはFirefoxを推奨.
Chromeはフルスクリーン時に解像度が落ちる模様.
操作 †
- PC
- マウスホイールで前進後退、右ボタンドラッグでパンニング、左ボタンドラッグでオービット
- スマートフォン
- ピンチ操作で前進後退、ドラッグでオービット
- 起動画面
画面下に5つのボタンが表示されます.
左から順に
- Z-
- 視野角を広くしてズームアウト
- On(Off)
- ジャイロ切替
- VR
- VRモード切替
- [ ](□)
- フルスクリーン切替
- Z+
- 視野角を狭くしてズームイン
- VRモード
VRモードに切り替えるとフルスクリーンとジャイロが自動でオンになります．
- そのためモデルが画面上から見えなくなりますが、どこかに表示されています．
- スマートフォンの場合は見回して探して下さい.
- PCではジャイロをオフにして下さい.
VRモードでは画面上隅両側に視点間距離を調整するボタンが追加されます
- P-
- 視差縮小
- P+
- 視差拡大
VRモードは平行法ですが、視差を縮小していくと交差法になります．
ダウンロード †
外部変形は、解凍された「中身」をJwwフォルダに直置きすれば動きます．
webglは「webgl」フォルダの「index.html」をダブルクリックで開きます．
付属ファイル †
Jwwのインストールフォルダに保存するファイル(2個) †
- Rvr.exe
- プログラム本体
- Rvr.bat
- 外部変形用batファイル
Jww直下に「webgl」フォルダを作って保存しておくファイル(9個) †
- index.html
- ブラウザで表示するためのファイル
- Rmodel.js
- モデル定義ファイル(外部変形が出力するのはこのファイルのみ)
- Rscene.js
- WebGLを表示するための設定ファイル
- Rlight.js
- WegGLで照明を定義するファイル
- Rstyle.css
- スタイルシート
ここから下はthree.jsのサイトで配布されているライブラリの一部を同梱 - three.min.js
- WebGL表示
- DeviceOrientationControls.js
- 画面表示
- OrbitControls.js
- 操作系
- StereoEffect.js
- VR表示
2.5Dサンプル †
- Rvr_asmple.jww
- サンプル
- Rvr_Farnsworth.jww
- 有名な平屋建て
使い方 †
- Jwwで2.5Dを書く
- ツールバー「その他」＞「外部変形」＞「Rvr.bat」を選択
- 範囲選択＞「選択確定」＞し、実行した後にindex.htmlをブラウザで開く
Rmodel.jsは標準では「webgl」フォルダに出力されます.
外変実行時の基点がモデルの原点となり、WebGLで最初の注視点になります．
webサーバーにデータ一式を置けばスマートホンでも見られます.
※同梱のjs,html,cssファイルを全てRmodel.jsと同じフォルダに置いて下さい.
カスタム †
インターフェイス †
Rvr.exeが作成するのは「model_001.js」のみで、シーンや照明の設定は別のjavascriptで行っています.
index.htmlは実行するjsとブラウザで表示するボタン類を定義してあり、外観はstyle.cssで定義してあるのでインターフェイスをカスタムしたい時はindex.htmlとstyle.cssを編集して下さい.
index.htmlは文字コードをUTF-8で保存して下さい.
UIのボタンを隠したい時はstyle.cssの「opacity」を「0」にすれば見えなくなり、ホバー又はクリック時のみ表示されるようになります.
視点 †
視点はscene.jsの15行目
camera.position.set(0, 5.5, 30);
で調整出来ます．
5.5が高さ、30が変換時の基準点からのY座標距離
※注視点は原点(外変実行時の基点)
出力パスを変更 †
batファイルで出力パスの初期値は
Rvr.exe /\webgl
です．
「/」に続けて出力パスを書いて指定できますが、出力先フォルダは予め作成しておいて下さい．
Rvrはフォルダを作りません．
また、フォルダ名の前には半角￥を必ず書いて下さい．
更新履歴 †
2018-01-17 公開