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 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
JavaScript执行机制详细介绍
Dec 06 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
js location.replace与location.reload的区别
2010/09/08 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python自动连接ssh的方法
2015/03/07 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python字典排序的方法
2019/10/12 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
HTML5标签小集
2011/08/02 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
工商管理实习生自我鉴定范文
2013/12/18 职场文书
公司培训欢迎词
2014/01/10 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
生日祝酒词大全
2015/08/10 职场文书