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具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
相关文章
ES6中Proxy与Reflect实现重载(overload)的方法
这篇文章主要介绍了ES6中Proxy与Reflect实现重载(overload)的方法,分析了重载的原理及使用Proxy和Reflect来实现重载的操作步骤与相关技巧,需要的朋友可以参考下2017-03-03在JavaScript 中按字母排序之如何在 JS 中按名称排序
有时你可能有一个单词数组,你想按字母顺序(从 a-z)对每个单词进行排序,或者你可能有一个包含用户信息(包括名字)的对象数组,例如,你想按照用户的名字来排序,接下来通过本文给大家介绍在JavaScript 中按字母排序之如何在 JS 中按名称排序,需要的朋友可以参考下2023-09-09
最新评论