Three.js實現(xiàn)瀏覽器變動時進行自適應(yīng)的方法

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:28:59

Three.js實現(xiàn)瀏覽器變動時進行自適應(yīng)的方法

Three.js實現(xiàn)瀏覽器變動時進行自適應(yīng)的方法:前言有的時候，我們打開了瀏覽器的頁面，顯示了當(dāng)前的渲染的模型。但是，如果你沒有設(shè)置場景模型跟隨著瀏覽器的寬高度變化進行自適應(yīng)，就gg了。所以，今天額外補上一篇相關(guān)的怎么跟隨瀏覽器變動進行自適應(yīng)，下面話不多說了，來一起看看詳細的介紹吧。要是

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀Three.js實現(xiàn)瀏覽器變動時進行自適應(yīng)的方法:前言有的時候，我們打開了瀏覽器的頁面，顯示了當(dāng)前的渲染的模型。但是，如果你沒有設(shè)置場景模型跟隨著瀏覽器的寬高度變化進行自適應(yīng)，就gg了。所以，今天額外補上一篇相關(guān)的怎么跟隨瀏覽器變動進行自適應(yīng)，下面話不多說了，來一起看看詳細的介紹吧。要是

前言

有的時候，我們打開了瀏覽器的頁面，顯示了當(dāng)前的渲染的模型。但是，如果你沒有設(shè)置場景模型跟隨著瀏覽器的寬高度變化進行自適應(yīng)，就gg了。所以，今天額外補上一篇相關(guān)的怎么跟隨瀏覽器變動進行自適應(yīng)，下面話不多說了，來一起看看詳細的介紹吧。

要是場景隨著瀏覽器的大小變動進行自適應(yīng)，就需要監(jiān)聽window的resize事件，就是瀏覽器變動事件。

window.onresize = function(){}

或者使用addEventListener事件

window.addEventListener("resize",function(){})

事件監(jiān)聽成功了以后，就需要寫變動后需要觸發(fā)的表達式了：

//窗口變動觸發(fā)的函數(shù) 
function onWindowResize() { 
 
 camera.aspect = window.innerWidth / window.innerHeight; 
 camera.updateProjectionMatrix(); 
 renderer.setSize( window.innerWidth, window.innerHeight ); 
 
}

上面主要就是更新了照相機的比例和渲染器的比例，就達到了當(dāng)前的效果。

代碼使用的上一節(jié)的，就不上傳代碼了（需要的朋友點擊這里），上傳兩張示例效果。