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