home HinoADO
Menu

概要

  • RVRはJwwの2.5DデータをWebGLに変換して3D表示とVRを試みています
  • 多角形ソリッドと高さが与えられた線・線形ソリッドのみに対応
  • WebGLの表示はthree.jsに丸投げ
  • three.jsは動作が確認できている版を同梱

サンプル

サンプル

スマートフォン用QRコード
https://hinoado.com/r/d/rvrqr.png
※スマートホンのブラウザはFirefoxを推奨.
 Chromeはフルスクリーン時に解像度が落ちる模様.

操作

PC
マウスホイールで前進後退、右ボタンドラッグでパンニング、左ボタンドラッグでオービット
スマートフォン
ピンチ操作で前進後退、ドラッグでオービット
起動画面
https://hinoado.com/r/d/rvr001.png

画面下に5つのボタンが表示されます.
左から順に

Z-
視野角を広くしてズームアウト
On(Off)
ジャイロ切替
VR
VRモード切替
[ ](□)
フルスクリーン切替
Z+
視野角を狭くしてズームイン
VRモード
https://hinoado.com/r/d/rvr002.png

VRモードに切り替えるとフルスクリーンとジャイロが自動でオンになります.

  • そのためモデルが画面上から見えなくなりますが、どこかに表示されています.
    • スマートフォンの場合は見回して探して下さい.
    • PCではジャイロをオフにして下さい.

VRモードでは画面上隅両側に視点間距離を調整するボタンが追加されます

P-
視差縮小
P+
視差拡大

VRモードは平行法ですが、視差を縮小していくと交差法になります.

ダウンロード

Rvr_20180117.zip

外部変形は、解凍された「中身」を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
有名な平屋建て

使い方

  1. Jwwで2.5Dを書く
  2. ツールバー「その他」>「外部変形」>「Rvr.bat」を選択
  3. 範囲選択>「選択確定」>し、実行した後に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 公開