【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】初音ミクをプログラミングで動かすには

MikuMikuDanceという初音ミクをはじめとした3Dモデルを動かすことのできるフリーソフトがあ

記事を読む

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

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

記事を読む

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

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

記事を読む

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

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

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

記事を読む

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

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

記事を読む

monacaでWebサイトをアプリ化

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

記事を読む

【jQuery】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

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 ↑