onWindowResize（）関数を使用してウィンドウサイズが変更されたときにジオメトリのサイズを比例的に変更する

Question

私はJavaScriptを使用して最初のステップをコーディングしています。私はいくつかのコースを作り、今私は、私は非常にthrees.orgのすべての例で使用されるこの機能を試していますThree.js

を使用してWebGLの世界を探検しています。この機能により

 function onWindowResize() { 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 

     } 

私がセンタリングすることができます私のジオメトリを減らしたり、ブラウザのウィンドウの幅を広げたりすると、ブラウザのウィンドウの高さを減らしたり、高くすると、ジオメトリを小さくしたり大きくしたりすることができます。

しかし、今は、ウィンドウの高さを小さくすると、中央に配置されているためにジオメトリが表示されます。しかし、ウィンドウの幅を小さくすると、すべてのジオメトリが中央に表示されますが、小さく表示されるわけではありません。

この例では：http://codepen.io/gnazoa/pen/BjoBZz私のonWindowResize()機能でobject.scale.devideScalar(1.5);を使用してこの問題を回避しようとしましたが、変更はありません。

私は正しい経験のために、それは本当に重要と考えるので、一瞬、私は私のデスクトップ画面にこのジオメトリを参照してくださいので、私は、このためのソリューションを探しています：

そして、この不完全なジオメトリ私のiphone：

はあなたには、いくつかの提案を持っていますか？この問題は解決する可能性がありますか？

Answer 1

js/Three.jsの世界へようこそ！そして、フィドルをまとめることに感謝します。ここにはmy suggested solutionです

1）あなたは、ブラウザでJavaScriptを使用して作業する場合44

object.scale.devideScalar(1.5); 

が

object.scale.divideScalar(1.5); 

あるべきライン上の不幸なタイプミスがあり、firefoxを開き、あなたのdevのツール（chrome、またはあなたを選択のブラウザ）。

Uncaught TypeError: object.scale.devideScalar is not a function 

2）それでも問題は解決します。あなたが書いたように、lineはonWindowResize（）を呼び出すたびに縮尺を66％に減らすことによってthree.jsキューブを変更（変更）します。あなたが想像するように、0.66 ^多くが非常に素早くゼロになり、キューブは消えます。バマー。

私はあなたが望むものは、オブジェクトのスケールが画面のスケールに一致すると思います。だから、立方体は常に開始またはサイズ変更された画面に関係なく、あなたのdivのおよそ50％（または何でも）を占有します。

まず、シーンが縦ではなく横でサイズが変更されているように見える理由を簡単に説明します。 three.js perspective camera fov（視野、つまりカメラがあなたのレンダーに集まるビューの角度）は、垂直方向のスペースに依存します。カメラの空き容量を更新すると、カメラが同じ位置に保たれるように調整されます。あなたはあなたが「背の高い」電話でそれを見ることができます。立方体の見た目の高さは垂直空間で同じですが、側面は切り取られています。

これは問題を引き起こします。オブジェクトのスケールをいじりはあなたがコメントアウトのように行うことができます。

object.scale.set(factor, factor, factor); 

これは一種のラインで物事を得ることができますが、複数のキューブを持っているか、あなたのオブジェクトを（スケールがすべて終わった転換起動したときに手に負えなくなり、場所）。レンダラは、3D投影を歪ませることなく、あなたが提案する方法で伸ばすことはできません。このように考えてみましょう。キューブを持っている場合、そのキューブは画面を歪ませることができますか？長方形の画面には、空白、キューブを切り取ったり、縮尺を歪ませたりします。

私はまた、最終目標が（より少ないCPUと頭痛の時間を伴う任意の数の2dのjavascriptまたはcssソリューションでエミュレートできる）矩形ではないとも仮定しています。

したがって、my radical solutionには、キャンバスのサイズを変更してコンテナを完全に埋め込むことはできません。変更された例では、部分的にウィンドウを埋めるdivを含むコンテンツを配置します。あなたの好みに合わせてCSSを変更してください。 、いずれの場合も

width: 100%; 
height: 100vh; 

プレビューウィンドウのサイズを変更し、キャンバスを調整すると私のコード：ウィンドウを埋めるための一つの方法は次のようになります。私はこの比率を16：9（普通のテレビ）に設定しましたが、好きなように変更することもできます。コンテナ自体は紫色で、レンダリングキャンバスは薄い青色で、立方体は青です。実際の新しいコードは次のとおりです。

var targetAspectRatio = 16/9; //cinematic! 
function aspectSize(availableWidth, availableHeight) { 
    var currentRatio = availableWidth/availableHeight; 
    if (currentRatio > targetAspectRatio) { 
    //then the height is the limiting factor 
    return { 
     width: availableHeight * targetAspectRatio, 
     height: availableHeight 
    }; 
    } else { 
    // the width is the limiting factor 
    return { 
     width: availableWidth, 
     height: availableWidth/targetAspectRatio 
    }; 
    } 
} 

本質的に、0を超えるサイズの四角形は、十分に広くないか、または十分な高さではありません。限られた次元で多くのスペースを占めるのは、他のアスペクト比を維持するものだけを使用することです。

コンテナ内にレンダラーを中央に配置するハッキングされた線（68:69）もあります。コンテナがウィンドウの場合、レンダラーは中央に配置されます。

あなたの仕事に役立ち、幸運を祈っています。