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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
npm ci命令的基本使用方法
Sep 20 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
使用swoole扩展php websocket示例
2014/02/13 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
原生js实现节日时间倒计时功能
2017/01/18 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
python如何从键盘获取输入实例
2020/06/18 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
优秀教师获奖感言
2014/01/31 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
设计大赛策划方案
2014/06/13 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
学生保证书
2015/01/16 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python