【Three.js(r74)】windowのリサイズに合わせてcanvas変更

Thress.jsを利用しているとPC・スマホの画面いっぱいで見せたい場合があるけど、その際にリサイズのイベントでcanvasのサイズを変更する。

画面リサイズイベントを取得

こちらは普通にjQueryでリサイズを取得

//画面リサイズ
$(window).on('resize',function(){
    width = $(window).width();
    height = $(window).height();
});

リサイズに対してカメラをアップデートする

次にcameraのaspectを再設定。
ここで重要?なのがcameraをアップデートしなくてはならない。
それがupdateProjectionMatrixってことで、これを入れるとカメラのアスペクト比が画面にそってちょうどよい具合に調整される。

//カメラリサイズ
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.render(scene, camera);


  • このエントリーをはてなブックマークに追加