當使用onWindowResize（）函數更改窗口大小時，按比例更改幾何體的大小

Question

我正在編寫使用javascript編寫的第一步。我做了一些課程，我現在探討利用three.js所

我與這個功能threes.org的所有例子，非常使用的實驗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）你對線的不幸錯字44

object.scale.devideScalar(1.5); 

應該

object.scale.divideScalar(1.5); 

當用JavaScript在瀏覽器中工作，打開你的開發工具（chrome，firefox，或者你瀏覽器的選擇）。它會拋出類似的東西：

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

2）解決這個問題，你仍然有問題。你寫的這行代碼通過調用onWindowResize（），每調用一次，就會縮小66％，從而改變（更改）three.js立方體。正如你會想象的那樣，0.66 ^很多很快變成零，並且立方體消失。遊民。

我想你想要的是與屏幕的比例尺匹配的對象的比例尺。所以一個立方體總是佔用你的div的大約50％（或其他），不管是起始還是調整大小的屏幕。

首先，簡要說明爲什麼你的場景似乎在垂直而不是水平方向上調整大小。 fov（視野，即相機收集到您的渲染中的角度）的three.js perspective camera取決於垂直空間。當您更新相機的可用空間時，相機會調整以使場景保持相同的fov。你可以在你身上看到「高大」的電話;立方體的表觀高度在垂直空間中是相同的，但側面被切斷。

這會導致問題。與對象的規模搞亂可以做到像你註釋掉：

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

這可以種得到的東西線，而是變得很困難，當你有一個以上的立方體或者你開始改變你的對象（秤遍佈這個地方）。渲染器不能以您建議的方式拉伸而不會扭曲3D投影。這樣想一下：如果你有一個立方體，那麼這個立方體是否可以填滿任何屏幕而失真？矩形屏幕將具有：空白區域，切割立方體或扭曲比例。

我還假設最終目標不僅僅是一個矩形（您可以使用任何數量的2d javascript或css解決方案來模擬cpu和頭痛時間）。

因此，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）。如果容器是窗口，則渲染器將以此爲中心。

我希望對你的工作有所幫助，祝你好運。