Three.jsのリサイズ（3D空間の拡縮）をブラウザ幅基準にしたい

Question

実現したいこと

• Three.jsのリサイズをブラウザの幅基準にしたい

お世話になります。

Three.jsでプロジェクトを作り、
https://ics.media/tutorial-three/renderer_resize/
こちらにあるようないわゆる一般的なリサイズ処理をすると、
3D空間の拡縮（上記参考サイトの動作サンプルでいうとワイヤーの球体の拡縮）はウインドウの高さ基準で行われ、
ウインドウ幅を小さくしても、球体の大きさは変わらずcanvasのサイズだけ変わるかと思います。

これを、ウインドウ幅基準で拡縮するにはどうしたらいいでしょうか？

よろしくお願いいたします。

Answer 1

ウインドウ幅基準で拡縮するには

こちらで如何でしょうか。
https://jsfiddle.net/cx20/785gfdm4/

  function onResize() {
    // サイズを取得
    const width = window.innerWidth;
    //const height = window.innerHeight;
    const height = width; // 高さと幅を同じサイズにする（サイズを正方形扱いとする）

    // レンダラーのサイズを調整する
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);

    // カメラのアスペクト比を正す
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }

Comments

[mitsuru_cbc]

ありがとうございます！

```
const height = width
```
すごくシンプルな解決方法で目からウロコでした！

ただ、これだとスマホ等の縦長の画面で見た際、下にcanvas外の余白ができてしまいますね・・・

参考サイト（一般的なリサイズ方法）でウインドウを横長にした際、
・球体（3D空間）は高さ基準で拡縮
・左右もcanvasが伸びる（3D空間内の背景）
となるのと同じように、
幅基準で拡縮しながら、上下のcanvasサイズはウインドウの高さにフィットさせられるとベストなんですが・・・

[mitsuru_cbc]

いろいろ試してみましたが、lookat使わないならcameraをZ軸で90度回転させて、
canvasをcssで-90度回転、
リサイズのsizeとaspectをwidth<->height 逆にしたらいい感じになりました。

が、lookAt使うとcameraのupの処理がちょっと大変だったので、
今回はシンプルに解決できるこちらの回答をベストアンサーとさせていただきます。
ありがとうございました！

[cx20]

自己解決されていたようですみません。

> cameraをZ軸で90度回転させて、canvasをcssで-90度回転、
なるほど。cameraを回転させることで縦横が逆になるので高さ基準での拡縮が実際には幅基準での拡縮の扱いになる、ということのようですね。勉強になります。