【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

公開日: : 最終更新日:2014/10/07 3DCG, JavaScript/jQuery, Three.js, 画像処理

スポンサーリンク

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThree.jsのバージョンは2.0.5です。

変更できる内部パラメータ

内部パラメータといってもThree.jsで変更できるのはfov(Field Of Viewの略。この場合はY軸方向の縦の画角。)、aspect(アスペクト比。横サイズ÷縦サイズ)、near(手前の距離)、far(奥の距離)の4つです。

焦点距離は画角とフィルムサイズ(←これは上記4つとは別もの)で決まってきます(『画角と焦点距離のお話』参考)。また、X軸方向の横の画角については縦の画角(fov)とアスペクト比により求まります。

詳細は以下のリンクを参考にしてください。

この他にも変更できるパラメータは存在します。最後に一覧にしたので参考にしてください。

内部パラメータ変更ソース該当部

上記のパラメータのことはjThree.jsの8687行目のupdateProjectionMatrixメソッドを見るとわかります。通常に使う分にはPerspectiveCamera(透視投影)を使用しているはずなのでそこの部分を参考にできます。

THREE.PerspectiveCamera.prototype.updateProjectionMatrix = function () {

		/************(略)*************/

		var aspect = this.fullWidth / this.fullHeight;
		var top = Math.tan( THREE.Math.degToRad( this.fov * 0.5 ) ) * this.near;
		var bottom = -top;
		var left = aspect * bottom;
		var right = aspect * top;
		var width = Math.abs( right - left );
		var height = Math.abs( top - bottom );

		this.projectionMatrix.makeFrustum(
			left + this.x * width / this.fullWidth,
			left + ( this.x + this.width ) * width / this.fullWidth,
			top - ( this.y + this.height ) * height / this.fullHeight,
			top - this.y * height / this.fullHeight,
			this.near,
			this.far
		);

		/************(略)*************/
}

ここの

var top = Math.tan( THREE.Math.degToRad( this.fov * 0.5 ) ) * this.near;

の部分でfovが縦方向の画角(°)だとわかります。

ちなみにfov、aspect、near、farの初期値はjThree.js8605行目付近を参照すると、それぞれ50、1、0.1、2000に設定されていることがわかります。。

	/************(略)*************/
	this.fov = fov !== undefined ? fov : 50;
	this.aspect = aspect !== undefined ? aspect : 1;
	this.near = near !== undefined ? near : 0.1;
	this.far = far !== undefined ? far : 2000;
	/************(略)*************/

具体的なカメラ内部パラメータ変更方法

ここまではjThree.js(というかThree.js)でどのようにパラメータが管理されているか見てきましたが実際にどう変更すればいいかといった問題があります。jThree.jsはThree.jsをラップしているのでこのカメラを表すオブジェクトをどう取得してくればいいかちょっとわかりづらいかもしれません。(私は結構困った。)

そこで、実際にjThree.jsでパラメータをいじっているサンプルを参考にして書いてみました。じつは「jThree.Trackball.js」がかなり参考になるので一読してみるとよいと思います。

//カメラのオブジェクトを取得する(複数あっても最後の一つだけ取ってきてます)
var getCam = function(selector){
        var gc = null;
        jThree( isFinite( selector ) ? "rdr:eq(" + selector + ")" : selector || "rdr" ).each( function() {
                var cam =  jThree.three( jThree.getCamera( this ) );
                gc = cam;
                });
        return gc;
}
//カメラオブジェクト取得
var camera = getCam();
camera.fov = 48;
camera.aspect = 1.1;
camera.near = 0.01;
camera.far = 1000;
//パラメータの更新
camera.updateProjectionMatrix();

簡単に説明すると、getCamという関数でカメラのオブジェクトを取得してきます。そしたらそのオブジェクトから各パラメータを好きなように変更します。例では4つ全部変更してますが別に1つだけ変更でも何の問題もありません。最後にupdateProjectionMatrixメソッドを呼び出してパラメータを更新したら完了です。

getCam関数については「jThree.Trackball.js」の一部をほぼそのまま利用させてもらっていますのでそちらを参考にしてみてください。

デモ

これを利用したデモがあるのでそちらも参考にしてみてください。

カメラメンバ一覧

最後になりますが設定可能なメンバのメソッドおよび変数一覧です。ご参考に。

メンバメソッド一覧

●setLens
●setViewOffset
●updateProjectionMatrix
●resize
●lookAt
●constructor
●applyMatrix
●rotateOnAxis
●translateOnAxis
●translateX
●translateY
●translateZ
●localToWorld
●worldToLocal
●add
●remove
●traverse
●getObjectById
●getObjectByName
●getDescendants
●updateMatrix
●updateMatrixWorld
●clone
●addEventListener
●hasEventListener
●removeEventListener
●dispatchEvent
●dom

メンバ変数一覧

・id
・name
・parent
・children
・up
・position
・rotation
・rotate
・eulerOrder
・scale
・renderDepth
・rotationAutoUpdate
・matrix
・matrixWorld
・matrixAutoUpdate
・matrixWorldNeedsUpdate
・quaternion
・useQuaternion
・visible
・castShadow
・receiveShadow
・frustumCulled
・userData
・_lookAt
・qtAxisAngle
・matrixWorldInverse
・projectionMatrix
・projectionMatrixInverse
・fov
・aspect
・near
・far
・_listeners

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

【MMD】BlenderでCyclesを利用してレンダリングしてみる

Cyclesを使ってみる BlenderのCyclesを用いてレンダリングを試してみました。Cyc

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

【javascript】正規表現文字置換簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

javascriptで画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

【jquery】iframe内のスクロールイベント設定とスクロール量取得

ページ内に設置したiframeのスクロールイベントおよびスクロール量を取得したかったのでメモ

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑