WEB 3D技术 three.js 设置图像随窗口大小变化而变化

本文 我们来讲讲我们图层适应窗口变化的效果
可能这样说有点笼统 那么 自适应应该大家更熟悉

就是 当我们窗口发生变化说 做一些界面调整比例

例如 我们这样一个i项目界面
在这里插入图片描述
我们打开 F12
在这里插入图片描述
明显有一部分被挡住了

那么 我们可以刷新
在这里插入图片描述
这样是正常了 但是 我们将F12关掉
在这里插入图片描述
给F12的位置 全部变成了空白

可能有人会说 用户用什么F12呀?
但用户可能这样呀
在这里插入图片描述
用户可能会 缩小屏幕

其实 我们监听窗口变化 直接用js原生的方式就好了 window 对象的 resize事件
我们在最下面写

// 监听窗口发生变化
window.addEventListener("resize",() =>{// 重置液染界亮高比renderer.setSize(window.innerWidth, window.innerHeight);//重置和机宽窝比camera.aspect = window.innerWidth / window.innerHeight;// 更相机投彩矩阵camera.updateProjectionMatrix();
})

在这里插入图片描述
然后 我们运行代码
在这里插入图片描述
我们拖拽 他就会跟着我们的屏幕走了
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/293687.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c# OpenCV 检测(斑点检测、边缘检测、轮廓检测)(五)

在C#中使用OpenCV进行图像处理时,可以使用不同的算法和函数来实现斑点检测、边缘检测和轮廓检测。 斑点检测边缘检测轮廓检测 一、斑点检测(Blob) 斑点检测是指在图像中找到明亮或暗的小区域(通常表示为斑点)&#…

win11下配置visual studio 2022+PCL1.13.1

第一部分:visual studio2022 安装 vs官网网址如下:https://visualstudio.microsoft.com/zh-hans/vs/ 第一步:我们打开官网链接,按如下操作点击下载免费版本的exe文件 第二步:打开下载目录下的安装文件进行安装&#…

EndNote插入参考文献

下载参考文献格式 复制刚刚下载的文件到endnote安装的位置下的Styles文件 重启endnote,在open style manager中勾选我们的格式 1.知网 下载,上传 可以attach PDF 分组 引用 2.Web of science 打开EndNote后,双击上面这个.ciw文件&#xff0c…

CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem:Webpack5 升级后相关插件和配置更新说明

前言 项目对应的 webpack5 版本如下: npm i webpack5.89.0 -D npm i webpack-cli5.1.4 -D升级插件 说明一下,我更喜欢固定版本号,这样随机bug会少很多,更可控~ npm i postcss-loader6.1.1 -D npm i postcss-pxtorem6.0.0 -D配…

吴恩达RLHF课程笔记

1.创建偏好数据集 一个prompt输入到LLM后可以有多个回答,对每个回答选择偏好 比如{prompt,answer1,answer2,prefer1} 2.根据这个数据集(偏好数据集),创建reward model,这个model也是一个LLM,并且它是回归模型&#…

机器学习---推荐系统案例(二)

四、推荐系统---模型训练 1、模型训练代码 模型训练代码参照scala文件:Recommonder.scala 1.Logger.getLogger("org.apache.spark").setLevel(Level.ERROR) 2.val conf new SparkConf().setAppName("recommonder").setMaster("local[*…

虾皮开通:如何在虾皮上开通跨境电商店铺

在当今的数字时代,跨境电商已经成为了全球贸易的一种重要形式。虾皮(Shopee)作为东南亚市场份额第一的跨境电商平台,为卖家提供了广阔的销售机会。如果您想在虾皮上开通店铺,以下是一些步骤和注意事项供您参考。 先给…

百川大模型AI对话实战——Python开发一个对话机器人

百川大模型开放提供API体验中心,体验不错,有小伙伴也对搭建自己的对话机器人比较兴趣,今天通过Python来简单介绍下,如何调用百川大模型的API来构建自己的小产品。 在开发环境中安装Python,如何安装?参照网…

mysql面试:面试常问题概览、定位慢查询(explain命令)、mysql体系结构、支持的存储引擎(InnoDB)、面试回答模板

面试常问题概览 如何定位慢查询 通常页面加载过慢、接口压测响应时间过长(超过1s),此时我们应该要定位具体是否里面有mysql的慢查询的因素。 方案一:调试和运维工具 调试工具:Arthas 运维工具:Prometheu…

用数码管慢速动态扫描显示数字“1234“

#include<reg51.h> // 包含51单片机寄存器定义的头文件 void delay(void) //延时函数&#xff0c;延时一段时间 { unsigned char i,j; for(i0;i<250;i) for(j0;j<250;j) ; } void main(void) { while(1) //无限循…

python报错A value is trying to be set on a copy of a slice

加入.copy()即可避免该报错提示 原代码&#xff1a; df5df4.drop_duplicates() print(df5.shape)df5[班型中文名称]df5[班型名称]-A print(df5.head()) 输出结果&#xff1a; 修改后代码&#xff1a; df5df4.drop_duplicates().copy() print(df5.shape)df5[班型中文名称]df…

【PHP手麻系统源码】基于mysql+laravel+vue开发的医院手术麻醉系统源码,实现围术期患者数据的自动采集与共享

手麻系统作为医院信息化系统的一环&#xff0c;由监护设备数据采集系统和麻醉信息管理系统两个子部分组成。手麻信息系统覆盖了患者术前、术中、术后的手术过程&#xff0c;可以实现麻醉信息的电子化和手术麻醉全过程动态跟踪。 以服务围术期临床业务工作的开展为核心&#xf…