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 相关文章推荐
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
JavaScript 常用函数
Dec 30 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 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
PHP 高手之路(三)
2006/10/09 PHP
支持oicq头像的留言簿(一)
2006/10/09 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php 错误处理经验分享
2011/10/11 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
某公司部分笔试题
2013/11/05 面试题
省级优秀毕业生主要事迹
2014/05/29 职场文书
2014年协会工作总结
2014/11/22 职场文书
2015年妇女工作总结
2015/05/14 职场文书
初中语文教学随笔
2015/08/15 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
oracle索引总结
2021/09/25 Oracle