这篇文章主要给大家介绍了关于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具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对爱安网的支持。

最新资讯
滴滴启动国庆出行安全部署 程维:安全发展观是必修课

滴滴启动国庆出行安全

滴滴出行CEO、安委会主任程维在会上表示,今年是滴滴安
爱回收E+轮融资超1亿美元 二手行业难做全品类

爱回收E+轮融资超1亿

陈雪峰谈到并未做全品类的原因时认为,二手行业不存在全
中通宣布将香港上市发行价定为每股218港元 下周二挂牌

中通宣布将香港上市发

中通快递(NYSE:ZTO)今晚宣布,将香港二次上市的发行价定为
微信支付正计划加码存款市场 相关功能正处测试阶段

微信支付正计划加码存

9月22日消息,微信支付正计划加码存款市场。记者近期注
比亚迪据称商谈向戴姆勒供应电动汽车芯片

比亚迪据称商谈向戴姆

知情人士透露,沃伦·巴菲特支持的比亚迪正在与戴姆勒洽
强如BAT、TMD也难免栽跟头

强如BAT、TMD也难免栽

被视为中国互联网顶流的BAT、TMD,家家有本难念的经,发展
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,