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.mfbz.cn/a/264072.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Amazon 实验③】使用Amazon WAF做基础 Web Service 防护之速率策略

文章目录 1. 速率策略1.1 介绍 2. 实验步骤2.1 添加规则2.2 测试2.3 结果 通过上一篇文章大家了解到如何使用Amazon WAF做关于自定义规则设置的 Web Service 防护【Amazon 实验②】使用Amazon WAF做基础 Web Service 防护之自定义规则,本篇文章将继续讲解一下关于速…

关于频谱仪是如何来实现辐射功率测量

1.1 内部基本原理框架 首先是接收到外部信号输入,然后经过可变衰减器衰减,接着进行变频,接着经过带宽带通滤波器进行滤波,滤波后的信号送入检波器进行信号检测,再经对数放大器放大后,送入低通滤波器进行视频…

vue3+ts 中使用provide和inject

provide 提供 inject 注入 provide 和 inject 是可以跨多级组件使用的。这意味着你可以在任意深度的组件层次结构中使用 provide 在祖先组件中提供数据,然后在后代组件中使用 inject 来访问这些数据。 C组件是B组件的子组件,B组件是A组件的子组件…

【圣诞】极安云科赠书活动第①期:CTF实战:从入门到提升

【圣诞】极安云科赠书活动第①期:CTF实战:从入门到提升 9787111724834 9787121376955 9787302556275 ISBN编号:9787111724834 书名:CTF实战:从入门到提升 定:99.00元 开本:184mm260&#xff…

文心一言 VS 讯飞星火 VS chatgpt (162)-- 算法导论13.1 2题

二、用go语言,对图13-1中的红黑树,画出对其调用TREE-INSERT 操作插人关键字 36 后的结果。如果插人的结点被标为红色,所得的树是否还是一棵红黑树?如果该结点被标为黑色呢? 文心一言,代码不能运行: 在Go语言中&…

【C#】TimeSpan

文章目录 概述属性时间计算拓展来源 概述 TimeSpan结构:表示一个时间间隔。 它含有以下四个构造函数: TimeSpan(Int64)将 TimeSpan结构的新实例初始化为指定的刻度数。(DateTime.Tick:是计算机的一个计时周期,单位是一百纳秒&…

阿里联合字节测试开发带你从0到1开发自动化测试框架

一、序言 随着项目版本的快速迭代、APP测试有以下几个特点: 首先,功能点多且细,测试工作量大,容易遗漏;其次,代码模块常改动,回归测试很频繁,测试重复低效;最后&#x…

数字图像处理-空间域图像增强-爆肝18小时用通俗语言进行超详细的总结

目录 灰度变换 直方图(Histogram) 直方图均衡 直方图匹配(规定化) 空间滤波 低通滤波器 高通滤波器 ​​​​​​​ 本文章讲解数字图像处理空间域图像增强,大部分内容来源于课堂笔记中 灰度变换 图像增强&…

Tiktok怎样多开不封号?海外云手机就能解决!

Tik Tok作为全球范围内最热门的短视频平台之一,其中蕴含的市场机遇毫无疑问是十分巨大的。因此很多企业创建一个甚至多个Tik Tok账户进行商业活动,但是多开账户实际上很容易被封号。本文将详细介绍如何利用海外云手机解决Tik Tok多开导致封号的难题。 为…

Ring Co-XOR encryption based reversible data hiding for 3D mesh model

期刊:Signal Processing 作者:Lingfeng Qu et al. -- 摘要: 加密域可逆数据隐藏被广泛应用于云存储数字媒体的内容安全、隐私保护和便捷管理。然而,RDH-ED技术在三维网格模型载体中的应用研究仍处于起步阶段。为解决现有针对三…

【C语言】记录一次自己犯下的低级错误 o(╯□╰)o(局部数组与指针数组的传参、赋值)

在这里分享一下本人犯下的低级错误,希望大家别掉同样的坑 o(╥﹏╥)o 文章目录 事情原委错误分析及解救办法错误一: 使用局部数组arr并将其作为返回值解决方法:使用动态内存分配来创建数组,并在函数结束前手动释放内存。 错误二&…

多任务数据采集

进程:操作系统中资源分配的基本单位 线程:使用进程资源处理具体任务 一个进程中可以有多个线程:进程相当于一个公司,线程是公司里面的员工。 一 多线程 多线程都是关于功能的并发执行。而异步编程是关于函数之间的非阻塞执行&…

快递收发线上管理教程

前台快递收发几乎是每家公司行政前台的“必修课”,所以网络上制度模板满天飞,但现实中能彻底解决快递收发管理难题的几乎为零,那前台快递收发管理,究竟要如何才能摆脱制度的桎梏? 纵观各种前台快递收发制度范本&#…

【基础知识】大数据组件HBase简述

HBase是一个开源的、面向列(Column-Oriented)、适合存储海量非结构化数据或半结构化数据的、具备高可靠性、高性能、可灵活扩展伸缩的、支持实时数据读写的分布式存储系统。 只是面向列,不是列式存储 mysql vs hbase vs clickhouse HMaster …

智能优化算法应用:基于野马算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于野马算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于野马算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.野马算法4.实验参数设定5.算法结果6.参考文献7.MA…

Spring中你一定要知道的afterPropertiesSet()

文章目录 功能源码 功能 初始化bean执行的回调方法其一,它不像PostConstruct一样可以有多个,只能调用一次;它执行的时机是在PostConstruct之后,从它的名称也可以看出,他是在属性填充完,也就是bean初始化完…

计算机软考有哪些科目?都考什么内容?

一、软考初级科目 1、程序员 考核内容:计算机相关基础知识;基本数据结构和常用算法;C程序设计语言以及C、JAVA中的一种程序设计语言。 岗位描述:从事软件开发和调试工作的初级技术人员。 2、网络管理员 考核内容:…

【ICCV2023】MMVP:基于运动矩阵的视频预测

目录 导读 本文方法 步骤1:空间特征提取 步骤2:运动矩阵的构造和预测 步骤3:未来帧的合成和解码 实验 实验结果 消融实验 结论 论文链接:https://openaccess.thecvf.com/content/ICCV2023/html/Zhong_MMVP_Motion-Matrix…

【NeRF】Point-NeRF:Point-NeRF: Point-based Neural Radiance Fields阅读记录

文章目录 个人理解摘要简介基于点的NeRF表示体渲染和辐射场(Volume rendering and radiance fields)基于点的辐射场(Point-based radiance field)逐点处理(Per-point processing)视点相关的辐射率回归&…

Kylin基础知识点解析与应用探索

目录 学习目标: 学习内容: 学习时间: 学习产出: Kylin简介 什么是Kylin Kylin的历史和发展 Kylin在大数据领域的地位和作用 Kylin架构 Kylin的组成部分和模块 Kylin的工作原理和流程 Kylin与其他大数据组件的关系和集成 Kylin功能…
最新文章