Three.js实现浏览器变动时进行自适应的方法


Posted in Javascript onSeptember 26, 2017

前言

有的时候,我们打开了浏览器的页面,显示了当前的渲染的模型。但是,如果你没有设置场景模型跟随着浏览器的宽高度变化进行自适应,就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实现浏览器变动时进行自适应的方法

上面就是全屏状态下显示的效果,下面是直接将浏览器改成了一半的效果:

Three.js实现浏览器变动时进行自适应的方法

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Three.js具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
koa源码中promise的解读
Nov 13 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 #Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 #Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 #Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 #Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 #Javascript
Three.js实现绘制字体模型示例代码
Sep 26 #Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 #Javascript
You might like
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Django 请求Request的具体使用方法
2019/11/11 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
联谊活动策划书
2014/01/26 职场文书
服装创业计划书范文
2014/02/05 职场文书
大学生个人自荐信
2014/02/24 职场文书
霸王洗发水广告词
2014/03/14 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
2016年十一促销广告语
2016/01/28 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书