Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
Three.js

【Three.js】Three.jsでのリサイズ処理の方法

どうも、とがみんです。

以前の記事で、「Three.js」を利用して、立方体を作成しました。


しかし、以下のように、画面のサイズを変えても、画面の大きさに合わせて、変化することもなく最初に定めた大きさのまま固定されていました。

この記事では、デバイスに合わせた大きさで表示させたり、ブラウザのサイズを変更した際に、自動的に描画サイズが変更されるようにする方法について紹介していきます。

実装するもの

今回実装したものです。

以前の立方体を作成したものに変更を加え作成しました。ブラウザの大きさを変更すると、それに合わせて、描画されるサイズも変更されます。

実装方法

viewportの設定

viewportを設定します。viewportとは、ブラウザウィンドウの表示領域に当たるものです。
width=device-widthを指定することで、デバイスごとに合わせて、表示領域の幅が決定されます。

リサイズ時に再描画

【Three.js】Web上で3Dオブジェクトの実装方法にて、リサイズ時に、ブラウザの幅や高さを取得し、再描画されるようにします。

下記コードで、リサイズ時終了後100ms後に、init()関数が呼び出され、widthheightにブラウザの幅高さが格納され、再描画されるようになっています。

まとめ

ブラウザのサイズがリサイズされた後に、リサイズ後のブラウザの幅や高さを再取得し、描画する方法について紹介しました。

参考文献

>Three.jsでの最適なリサイズ