物体が前後に長く歪んで見える

立方体や球を作成した時に、すごい違和感を感じました。なんか長さがおかしく感じるのですよ。下記に画像を載せておきます。

threejs_01_141012

threejs_02_141012

アスペクト比を間違えると画面が歪む

原因は画面のサイズとアスペクト比が合っていないことでした。私は現在、ブラウザウィンドウ最大のサイズで描写しています。なのに、下記のようにアスペクト比を定義していました。

var aspect = 600 / 600;

 実際のウィンドウは600 * 600を使用しているわけではありません。最大サイズの場合は、下記がお勧めです。

var aspect = window.innerWidth / window.innerHeight;

これならウィンドウのサイズを変更されても対応できます。それではもう一度レンダリングしてみましょう。

threejs_03_141012

threejs_04_141012

 

明らかに前と見栄えが違いますよね?あー、スッキリした♪