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

関連記事

【jQuery】クリックイベントでマウスホイールクリックを検知する

$("a").click(function(){ … }); によりクリックイベントを関連付け

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

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

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

記事を読む

【javascript/jQuery】JSON形式のデータの表示確認をする

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者

記事を読む

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

MMDなどの3Dモデルが閲覧・共有できるニコニ立体が面白い

いよいよニコニ立体のサービスが開始されました。色々な3D作品が既にたくさん投稿されています。

記事を読む

AmazonのランキングRSSから画像リンクを作る

Amazon RSS Amazonでいい感じのRSSが無いかと探していたのですが実は本家に素晴らし

記事を読む

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanva

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

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

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

→もっと見る

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