Three.js實(shí)現(xiàn)瀏覽器變動(dòng)時(shí)進(jìn)行自適應(yīng)的方法
前言
有的時(shí)候，我們打開(kāi)了瀏覽器的頁(yè)面，顯示了當(dāng)前的渲染的模型。但是，如果你沒(méi)有設(shè)置場(chǎng)景模型跟隨著瀏覽器的寬高度變化進(jìn)行自適應(yīng)，就gg了。所以，今天額外補(bǔ)上一篇相關(guān)的怎么跟隨瀏覽器變動(dòng)進(jìn)行自適應(yīng)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
要是場(chǎng)景隨著瀏覽器的大小變動(dòng)進(jìn)行自適應(yīng)，就需要監(jiān)聽(tīng)window的resize事件，就是瀏覽器變動(dòng)事件。
window.onresize = function(){}
或者使用addEventListener事件
window.addEventListener("resize",function(){})
事件監(jiān)聽(tīng)成功了以后，就需要寫(xiě)變動(dòng)后需要觸發(fā)的表達(dá)式了：
//窗口變動(dòng)觸發(fā)的函數(shù)
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
上面主要就是更新了照相機(jī)的比例和渲染器的比例，就達(dá)到了當(dāng)前的效果。
代碼使用的上一節(jié)的，就不上傳代碼了（需要的朋友點(diǎn)擊這里），上傳兩張示例效果。
上面就是全屏狀態(tài)下顯示的效果，下面是直接將瀏覽器改成了一半的效果：
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- Three.js基礎(chǔ)學(xué)習(xí)之場(chǎng)景對(duì)象
- Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程詳解
- 利用Three.js如何實(shí)現(xiàn)陰影效果實(shí)例代碼
- Three.js實(shí)現(xiàn)繪制字體模型示例代碼
- Three.js利用Detector.js插件如何實(shí)現(xiàn)兼容性檢測(cè)詳解
- Three.js利用orbit controls插件（軌道控制）控制模型交互動(dòng)作詳解
- Three.js利用性能插件stats實(shí)現(xiàn)性能監(jiān)聽(tīng)的方法
- Three.js如何用軌跡球插件（trackball）增加對(duì)模型的交互功能詳解
- Three.js入門(mén)之hello world以及如何繪制線
- Three.js如何實(shí)現(xiàn)霧化效果示例代碼
相關(guān)文章
BootstrapValidator不觸發(fā)校驗(yàn)的實(shí)現(xiàn)代碼
BootstrapValidator是基于bootstrap3的jquery表單驗(yàn)證插件，是最適合bootstrap框架的表單驗(yàn)證插件，本文給大家介紹BootstrapValidator不觸發(fā)校驗(yàn)的實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧2016-09-09
設(shè)置iframe的document.designMode后僅Firefox中其body.innerHTML為br
設(shè)置iframe的document.designMode為On可以讓其可編輯，一般用在富文本編輯器組件中。這里僅列出各瀏覽器差異2012-02-02
JS關(guān)于for循環(huán)中使用setTimeout的四種解決方案
這篇文章主要介紹了JS關(guān)于for循環(huán)中使用setTimeout的四種解決方案，想深入了解JS的同學(xué)，一定要看下2021-05-05
JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)
數(shù)組是?JavaScript?中最強(qiáng)大的數(shù)據(jù)結(jié)構(gòu)，我們常常通過(guò)將字符串轉(zhuǎn)換為數(shù)組來(lái)解決許多算法。本文為大家總結(jié)了6個(gè)JS字符串轉(zhuǎn)數(shù)組的方法，希望對(duì)你有所幫助2022-09-09
javascript 的變量、作用域和內(nèi)存問(wèn)題
這篇文章主要介紹了javascript 的變量、作用域和內(nèi)存問(wèn)題的相關(guān)資料,需要的朋友可以參考下2017-04-04
如何提升JavaScript執(zhí)行效率與性能在前端開(kāi)發(fā)中位于一個(gè)很重要的地方，這節(jié)來(lái)研究下如何在平時(shí)做項(xiàng)目過(guò)程中，提升JavaScript性能與運(yùn)行效率,需要的朋友可以參考下2012-12-12
JS防抖節(jié)流函數(shù)的實(shí)現(xiàn)與使用場(chǎng)景
在行走江湖的過(guò)程中,會(huì)出現(xiàn)很多性能優(yōu)化的問(wèn)題來(lái)讓你手足無(wú)措,那么這篇文章主要給大家介紹了關(guān)于JS防抖節(jié)流函數(shù)的實(shí)現(xiàn)與使用場(chǎng)景,針對(duì)這兩個(gè)問(wèn)題來(lái)為你答疑解惑,需要的朋友可以參考下2021-07-07
詳解使用uni-app開(kāi)發(fā)微信小程序之登錄模塊
這篇文章主要介紹了詳解使用uni-app開(kāi)發(fā)微信小程序之登錄模塊，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要介紹了js防止頁(yè)面被iframe調(diào)用的方法,可防止頁(yè)面被別的網(wǎng)站iframe調(diào)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10
JS嵌套函數(shù)調(diào)用上下文的問(wèn)題解決
這篇文章主要探討了JS嵌套函數(shù)調(diào)用上下文的問(wèn)題,需要的朋友可以參考下2014-03-03