【Three.js】ブラウザサイズに合わせたアスペクト比を間違えて画面が歪む

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

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

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

var aspect = 600 / 600;

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

var aspect = window.innerWidth / window.innerHeight;

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

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