Three.js实现浏览器变动时进行自适应的方法
更新时间：2017年09月26日 09:48:42 作者：专注前端30年
这篇文章主要给大家介绍了关于Three.js实现浏览器变动时进行自适应的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
前言
有的时候，我们打开了浏览器的页面，显示了当前的渲染的模型。但是，如果你没有设置场景模型跟随着浏览器的宽高度变化进行自适应，就gg了。所以，今天额外补上一篇相关的怎么跟随浏览器变动进行自适应，下面话不多说了，来一起看看详细的介绍吧。
要是场景随着浏览器的大小变动进行自适应，就需要监听window的resize事件，就是浏览器变动事件。
window.onresize = function(){}
或者使用addEventListener事件
window.addEventListener("resize",function(){})
事件监听成功了以后，就需要写变动后需要触发的表达式了：
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
上面主要就是更新了照相机的比例和渲染器的比例，就达到了当前的效果。
代码使用的上一节的，就不上传代码了（需要的朋友点击这里），上传两张示例效果。
上面就是全屏状态下显示的效果，下面是直接将浏览器改成了一半的效果：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Three.js具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
动态的改变IFrame的高度实现IFrame自动伸展适应高度
动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩原理： 在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度2012-12-12
这篇文章主要介绍了JS回调函数原理与用法,结合实例形式详细分析了JavaScript回调函数的概念、原理、用法,并给出了PHP回调函数的使用示例,需要的朋友可以参考下2019-07-07
这篇文章主要给大家介绍了关于JavaScript相等运算符的九条规则，文中通过示例代码介绍的非常详细，对大家的学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-10-10
结合ES6 编写 JavaScript 设计模式中的结构型模式
这篇文章主要介绍了结合ES6编写JavaScript 设计模式中的结构型模式，设计模式是软件设计中常见问题的解决方案，这些模式很容易重复使用并且富有表现力2022-07-07
这篇文章主要介绍了使用javascript实现密码强度显示，十分实用的功能，从个人项目中移植出来的，分享给大家，希望大家能够喜欢。2015-03-03
JavaScript中style.left与offsetLeft的使用及区别详解
这篇文章主要介绍了JavaScript中style.left与offsetLeft的使用及区别详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JavaScript实现Tab栏切换的实现方式,是面向对象的写法，本文给大家分享详细案例代码，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了JavaScript获取当前网页标题（title）的方法,涉及javascript中document.title方法的使用,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JavaScript中的包装对象介绍,存取字符串、数字、或布尔值的属性时创建的临时对象称作包装对象,本文着重讲解了什么是包装对象,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了微信小程序商品详情页的底部弹出框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
最新评论