【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
  • このエントリーをはてなブックマークに追加

関連記事

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

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

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

記事を読む

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

jQueryで要素にappendとafterを使って追加する

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

【jQuery】大量の画像で重くなったページを遅延ロードで軽くする方法【Lazy Load】

画像をふんだんに使っているページでは読み込みの際に非常に時間がかかるという問題点があります。数枚なら

記事を読む

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

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

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

記事を読む

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

→もっと見る

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