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

どうも、とがみんです。

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

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

Three.jsで立方体。 pic.twitter.com/vyUpweuDQG
— 究極の自由を追求するブログFresopiya (@fresopiya) July 7, 2019

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

Contents

実装するもの
実装方法

実装するもの

今回実装したものです。

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

three.jsで立方体。リサイズ終了時に再描画。 pic.twitter.com/bYNwYQUsUD
— 究極の自由を追求するブログFresopiya (@fresopiya) July 7, 2019

実装方法

viewportの設定

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

<meta name="viewport" content="width=device-width"/>

1	<meta name="viewport" content="width=device-width"/>

リサイズ時に再描画

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

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

// リサイズイベント発生時に実行
 var timer = false;
 window.addEventListener('resize', function() {
   //timerがfalseでないなら、timerに代入されたsetTimeoutでセットされたタイマーを解除する。
   if (timer !== false) {
     clearTimeout(timer);
   }
   //100ms後にinit()関数を実行する。
   timer = setTimeout(function() {
     init();
   }, 100);
 });
 
 //〜省略
 function init() {
 　// サイズを指定
 　const width = window.innerWidth;//ブラウザの幅取得
 　const height = window.innerHeight;//ブラウザの高さ取得
 　
   //〜省略
   
 }