欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年09月26日 09:48:42   作者：專注前端30年  
這篇文章主要給大家介紹了關(guān)于Three.js實現(xiàn)瀏覽器變動時進(jìn)行自適應(yīng)的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

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

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

window.onresize = function(){}

或者使用addEventListener事件

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

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

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

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

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


上面就是全屏狀態(tài)下顯示的效果，下面是直接將瀏覽器改成了一半的效果：


總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

相關(guān)文章

最新評論