質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

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

mitsuru_cbc
mitsuru_cbc

総合スコア31

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

0クリップ

166閲覧

投稿2023/02/01 09:28

実現したいこと

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

お世話になります。

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

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

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

javascript

1 function onResize() { 2 // サイズを取得 3 const width = window.innerWidth; 4 //const height = window.innerHeight; 5 const height = width; // 高さと幅を同じサイズにする(サイズを正方形扱いとする) 6 7 // レンダラーのサイズを調整する 8 renderer.setPixelRatio(window.devicePixelRatio); 9 renderer.setSize(width, height); 10 11 // カメラのアスペクト比を正す 12 camera.aspect = width / height; 13 camera.updateProjectionMatrix(); 14 }

投稿2023/02/01 10:21

cx20

総合スコア4557

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mitsuru_cbc

2023/02/02 01:43

ありがとうございます! ``` const height = width ``` すごくシンプルな解決方法で目からウロコでした! ただ、これだとスマホ等の縦長の画面で見た際、下にcanvas外の余白ができてしまいますね・・・ 参考サイト(一般的なリサイズ方法)でウインドウを横長にした際、 ・球体(3D空間)は高さ基準で拡縮 ・左右もcanvasが伸びる(3D空間内の背景) となるのと同じように、 幅基準で拡縮しながら、上下のcanvasサイズはウインドウの高さにフィットさせられるとベストなんですが・・・
mitsuru_cbc

2023/02/08 14:23

いろいろ試してみましたが、lookat使わないならcameraをZ軸で90度回転させて、 canvasをcssで-90度回転、 リサイズのsizeとaspectをwidth<->height 逆にしたらいい感じになりました。 が、lookAt使うとcameraのupの処理がちょっと大変だったので、 今回はシンプルに解決できるこちらの回答をベストアンサーとさせていただきます。 ありがとうございました!
cx20

2023/02/08 20:09

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。