カメラコントロールを付加する
動画と比較してWebGLのもっとも分かりやすい魅力はカメラのアングルを自由に操作できることでしょう。jThreeには2種類のカメラコントロールプラグインが用意されています。どちらもメソッドを呼ぶ際にコントロール機能を適用するrdr要素のCSSセレクタを渡します。省略するとすべてのrdr要素に適用されます。返り値は適用したrdr要素が1つならコントローラーオブジェクト、複数ならコントローラーオブジェクトの配列です。コントローラーオブジェクトはstop()とstart()で制御でき、reset()でカメラを初期位置に戻します。
Trackball
オブジェクト鑑賞に適しています。ある1点を中心に回転したりズームができます。
| 操作 | 機能 |
|---|---|
| 左ドラッグ | 視点を中心に回転 |
| 右ドラッグ | 上下左右方向に視点移動 |
| ホイール | 視点までズームイン、視点からズームアウト |
jThree.Trackball.jsを読み込んでTrackballメソッドを呼び出すと適用されます。
var ball = jThree.Trackball();
setupメソッドにハッシュを与えることでプロパティの設定ができます。
ball.setup( { rotateSpeed: 2 } );
| プロパティ名 | 値 | デフォルト値 |
|---|---|---|
| rotateSpeed | 回転速度 | 1.0 |
| zoomSpeed | ズーム速度 | 1.2 |
| panSpeed | 視点移動速度 | 0.3 |
| damping | 操作終了時の速度減衰率 | 0.2 |
FlyView
空間移動に適しています。鳥のように空間を飛び回ることができます。
| 操作 | 機能 |
|---|---|
| 左ボタン長押し | マウス位置に向かって前進 |
| 右ボタン長押し | マウス位置から遠ざかるように後退 |
| ホイール | 加減速 |
| W,A,S,D,十字キー | 前後左右移動 |
| R,Fキー | 上下移動 |
jThree.FlyView.jsを読み込んでFlyViewメソッドを呼び出すと適用されます。
var fly = jThree.FlyView();
setupメソッドにハッシュを与えることでプロパティの設定ができます。
fly.setup( { movementSpeed: 50 } );
| プロパティ名 | 値 | デフォルト値 |
|---|---|---|
| movementSpeed | 移動速度 | 10 |
| acceleration | 加減速度 | 10 |
| lookSpeed | 視点移動速度 | 0.1 |
Oculus Riftに対応させる
Oculus Rift（DK1）に対応するためのjThreeプラグインを紹介します。Oculus Riftとは、米フェイスブックの子会社であるOculus VR社が開発したヘッドマウントディスプレイで頭の動きに表示を追従させられるのが特徴です。
jThree.Oculus.jsを読み込んでOculusメソッドを呼び出してコントロールオブジェクトを生成します。引数にはOculusモードを適用したいrdr要素のセレクタを指定できます。省略すると"rdr:first"が適用されます。
好きなタイミングでコントロールオブジェクトのstartメソッドを呼ぶことで画面表示がOculusモードに切り替わります。WebGLの表示サイズ自体は変わらないので全画面表示の処理は自身で実装する必要があります。stopメソッドで通常表示に戻せます。
jThree.Oculus().start();
Oculusを接続することに関して特別な設定は不要ですが、頭の動きに表示を追従させるにはユーザー側でブラウザの機能を拡張する必要があります。まずoculus.zipをダウンロード・解凍します。
Mac OS X
- binディレクトリからnpvr.pluginをコピー
- ~/Library/Internet Plug-Ins/以下にコピーしたnpvr.pluginを貼り付け
これでChrome/Firefox/Safari上で使用可能になります。
Windows
Chromeの場合：
- chrome://extensionsを開く
- "Developer mode"にチェックし"Load unpacked extension"をクリック
- binフォルダを選ぶ
Firefoxの場合：
- コマンドプロンプトを起動
- binフォルダにcdで移動
- install.batを実行
設定後ブラウザを再起動してコンテンツにアクセスすると、頭の動きに表示が追従するようになります。
- 参考サイト SONICJAM Developerz Blog
