Jww/外部変形/RVR の変更点

Top / Jww / 外部変形 / RVR
追加された行はこの色です。
削除された行はこの色です。
Jww/外部変形/RVR へ行く。
#author("2018-01-27T09:19:04+09:00","","")
#author("2024-08-02T09:23:59+09:00","","")
#contents
*概要 [#ye96359b]
-RVRはJwwの2.5DデータをWebGLに変換して3D表示とVRを試みています
-多角形ソリッドと高さが与えられた線・線形ソリッドのみに対応
-WebGLの表示は[[three.js>https://ja.wikipedia.org/wiki/Three.js]]に丸投げ
-three.jsは動作が確認できている版を同梱

*サンプル [#zc24090c]
[[サンプル>http://hinoado.com/r/d/Rvr/20180114/]]
[[サンプル>https://hinoado.com/r/d/Rvr/20180114/]]

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

*操作 [#hb803904]
:PC|マウスホイールで前進後退、右ボタンドラッグでパンニング、左ボタンドラッグでオービット

:スマートフォン|ピンチ操作で前進後退、ドラッグでオービット

:起動画面|http://hinoado.com/r/d/rvr001.png
:起動画面|https://hinoado.com/r/d/rvr001.png

画面下に5つのボタンが表示されます.
左から順に
:Z-|視野角を広くしてズームアウト
:On(Off)|ジャイロ切替
:VR|VRモード切替
:[　](□)|フルスクリーン切替
:Z+|視野角を狭くしてズームイン


:VRモード|http://hinoado.com/r/d/rvr002.png
:VRモード|https://hinoado.com/r/d/rvr002.png

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

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

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

VRモードは[[平行法>https://www.google.co.jp/search?num=100&newwindow=1&client=firefox-b&dcr=0&ei=PfVbWpyvIcvL0gTxjImIDw&q=%E7%AB%8B%E4%BD%93%E8%A6%96+%E5%B9%B3%E8%A1%8C%E6%B3%95&oq=%E7%AB%8B%E4%BD%93%E8%A6%96+%E5%B9%B3%E8%A1%8C%E6%B3%95&gs_l=psy-ab.3..0l8.17561.21941.0.22313.14.14.0.0.0.0.100.1329.13j1.14.0....0...1.1.64.psy-ab..0.11.1048...0i7i4i30k1j0i8i7i4i30k1j0i7i30k1.0.6pkHinFFAAI]]ですが、視差を縮小していくと[[交差法>https://www.google.co.jp/search?num=100&newwindow=1&client=firefox-b&dcr=0&ei=VPVbWpbYOsq90ASunoOoDA&q=%E7%AB%8B%E4%BD%93%E8%A6%96+%E4%BA%A4%E5%B7%AE%E6%B3%95&oq=%E7%AB%8B%E4%BD%93%E8%A6%96+%E4%BA%A4%E5%B7%AE%E6%B3%95&gs_l=psy-ab.3..0l8.27220.27775.0.28539.6.6.0.0.0.0.161.734.3j3.6.0....0...1..64.psy-ab..3.2.253...0i4i37k1.0.pQUA4vSemlQ]]になります．




*ダウンロード [#d502a258]
[[Rvr_20180117.zip>http://hinoado.com/r/d/Rvr_20180117.zip]]
[[Rvr_20180117.zip>https://hinoado.com/r/d/Rvr_20180117.zip]]

外部変形は、解凍された「中身」をJwwフォルダに直置きすれば動きます．

webglは「webgl」フォルダの「index.html」をダブルクリックで開きます．

**付属ファイル [#j991cbc1]
***Jwwのインストールフォルダに保存するファイル(2個) [#saddb93c]
:Rvr.exe|プログラム本体
:Rvr.bat|外部変形用batファイル
***Jww直下に「webgl」フォルダを作って保存しておくファイル(9個) [#jed840f3]
:index.html|ブラウザで表示するためのファイル
:Rmodel.js|モデル定義ファイル(外部変形が出力するのはこのファイルのみ)
:Rscene.js|WebGLを表示するための設定ファイル
:Rlight.js|WegGLで照明を定義するファイル
:Rstyle.css|スタイルシート
ここから下は[[three.jsのサイト>https://threejs.org/]]で配布されているライブラリの一部を同梱
:three.min.js|WebGL表示
:DeviceOrientationControls.js|画面表示
:OrbitControls.js|操作系
:StereoEffect.js|VR表示
***2.5Dサンプル [#p72980e5]
:Rvr_asmple.jww|サンプル
:Rvr_Farnsworth.jww|有名な平屋建て


*使い方 [#ab67bdd7]
+Jwwで2.5Dを書く
+ツールバー「その他」＞「外部変形」＞「Rvr.bat」を選択
+範囲選択＞「選択確定」＞し、実行した後にindex.htmlをブラウザで開く

Rmodel.jsは標準では「webgl」フォルダに出力されます.
外変実行時の基点がモデルの原点となり、WebGLで最初の注視点になります．
webサーバーにデータ一式を置けばスマートホンでも見られます.

''※同梱のjs,html,cssファイルを全てRmodel.jsと同じフォルダに置いて下さい.''


*カスタム [#p897eea8]
**インターフェイス [#j1572bd1]
Rvr.exeが作成するのは「model_001.js」のみで、シーンや照明の設定は別のjavascriptで行っています.
index.htmlは実行するjsとブラウザで表示するボタン類を定義してあり、外観はstyle.cssで定義してあるのでインターフェイスをカスタムしたい時はindex.htmlとstyle.cssを編集して下さい.
index.htmlは文字コードをUTF-8で保存して下さい.
UIのボタンを隠したい時はstyle.cssの「opacity」を「0」にすれば見えなくなり、ホバー又はクリック時のみ表示されるようになります.
**視点 [#mc0f7e7d]
視点はscene.jsの15行目
   camera.position.set(0, 5.5, 30);
で調整出来ます．
5.5が高さ、30が変換時の基準点からのY座標距離
※注視点は原点(外変実行時の基点)
**出力パスを変更[#tf6c2c78]
batファイルで出力パスの初期値は
 Rvr.exe /\webgl
です．
「/」に続けて出力パスを書いて指定できますが、出力先フォルダは予め作成しておいて下さい．
Rvrはフォルダを作りません．
また、フォルダ名の前には半角￥を必ず書いて下さい．

*更新履歴 [#u26a1c6e]
2018-01-17 公開