Threejs_03 全屏+响应式画布实现

news2024/11/13 16:50:53

咋控制全屏呢?

1.做一个用来点击的按钮

var btn = document.createElement("button");
btn.innerHTML = "点击全屏";
btn.style.position = "absolute";
btn.style.top = "10px";
btn.style.left = "10px";
btn.style.zIndex = "999";

2.给这个按钮添加一个事件,并且给他放入屏幕中

btn.onclick = function () {
  // 全屏 (画布)
  // renderer.domElement.requestFullscreen();
  // 全屏 (document.body)  可以看到写入的按钮
  document.body.requestFullscreen();
};
// 将按钮追加
document.body.appendChild(btn);

请注意:这个时候应该让document来实现这个requestFullscreen 否则 全屏以后 就看不见这个按钮了。因为全屏以后,看见的就是document 而不是renderer了

点击以后 就能进入全屏模式了

3.退出全屏按钮,虽然说进入全屏以后 会显示点击键盘上的ESC可以退出全屏,但是我们也需要做出这个功能。

//退出全屏按钮 
var exitBtn = document.createElement("button");
exitBtn.innerHTML = "点击退出全屏";
exitBtn.style.position = "absolute";
exitBtn.style.top = "10px";
exitBtn.style.left = "100px";
exitBtn.style.zIndex = "999";
exitBtn.onclick = function () {
  // 退出全屏
  document.exitFullscreen();
};
// 将按钮追加
document.body.appendChild(exitBtn);

这个时候,全屏的功能就实现了

咋控制画布自适应呢?

 问题蛮严重的哦~

resize事件

我们可以侦听窗口的resize改变,触发回调函数,动态的修改画布的大小比例

// 监听窗口的变化 重新设置渲染器的大小 画布自适应窗口
window.addEventListener("resize", () => {
  // 重新设置渲染器的大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重新设置相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 重新计算相机的投影矩阵
  camera.updateProjectionMatrix();
});

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【注册Huggingface】获取token

Hugging Face是一家美国公司,专门开发用于构建机器学习应用的工具。该公司的代表产品是其为自然语言处理应用构建的transformers库,以及允许用户共享机器学习模型和数据集的平台。 Huggingface 是一个开源的cv、nlp框架,提供了超过100,000个…

代码随想录算法训练营第五十九天丨 单调栈02

503.下一个更大元素II 思路 做本题之前建议先做739. 每日温度 (opens new window)和 496.下一个更大元素 I (opens new window)。 这道题和739. 每日温度 (opens new window)也几乎如出一辙。 不过,本题要循环数组了。 关于单调栈的讲解我在题解739. 每日温度 …

NextJS开发:ssr服务器端渲染页面,添加加载进度提示

nextjs中ssr服务器端渲染的页面加载速度慢的时候,需要显示一个如下图的加载进度提示,来优化用户体验。 nextjs框架中已经预留了加载动画的接口页面,我们只需要提那家加载动画tsx,处理页面逻辑就可以实现。 page.tsx 同级目录创建…

金融市场数据至上:QuestDB 为您的数据提供最优解 | 开源日报 No.81

vlang/v Stars: 34.7k License: MIT V 是一个开源项目,它是一种简单、易于学习的编程语言。该项目具有以下核心优势和主要功能: 简洁性:可以在周末内掌握这门语言。快速编译:使用 Clang 后端约为 110k loc/s,本地和…

X12学习手册

EDI术语中的X12是指ANSI X12 报文标准(EDI Document Standard),于 1979 年发布,由认证标准委员会维护,在过去的几十年中得到扩展,以满足全球业务流程的要求,包括汽车、物流、零售、医药、金融、…

回顾以前的java

System.out.println(card1);打印的是对象的话会自动调用我们重写的toString方法 这个方法通常在Object类中定义,所有的Java类都继承自Object类 实例方法有个this,谁调用这个方法谁就是this 1.练习重写实例方法,调用this 调用object的equals,实际是判断地址相不相等…

ModernCSS.dev - 来自微软前端工程师的 CSS 高级教程,讲解如何用新的 CSS 语法来解决旧的问题

今天给大家安利一套现代 CSS 的教程,以前写网页的问题,现在都可以用新的写法来解决了。 ModernCSS.dev 是一个现代 CSS 语法的教程,讲解新的 CSS 语法如何解决一些传统问题,一共有30多课。 这套教程的作者是 Stephanie Eckles&am…

uniapp的/绝对定位/相对定位/固定定位/粘滞定位

【[html5]你还分不清楚绝对定位和相对定位......】 相对定位一般配合绝对定位使用 <template><view class"content"><view style"background-color: black;width: 100%;height: 300px;position:relative;"><view class"one"…

c++多态之辨析:静态联编和动态联编

C的几种多态形式 从广义上来说&#xff0c;多态性是指一段程序能够处理多种类型对象的能力。在C中&#xff0c;这种多态性可以通过重载多态&#xff08;函数和运算符重载&#xff09;、强制多态&#xff08;类型强制转换&#xff09;、类型参数化多态&#xff08;模板&#xff…

【Linux】命令lsof使用详解

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f…

想要成为CSS大师?这些技巧是你必须知道的!

前言 CSS 是网页设计中不可或缺的一部分&#xff0c;掌握一些实用的 CSS 技巧&#xff0c;可以让你在设计中展现出更多的创意和个性。本文将介绍一些 CSS 技巧&#xff0c;帮助你提升自己的技能&#xff0c;成为一个真正的 CSS 大师。 1. 改变 input 自动填充的背景颜色 这段 …

【Linux】缓冲区+磁盘+动静态库

一、缓冲区 1、缓冲区的概念 缓冲区的本质就是一段用作缓存的内存。 2、缓冲区的意义 节省进程进行数据IO的时间。进程使用fwrite等函数把数据拷贝到缓冲区或者外设中。 3、缓冲区刷新策略 3.1、立即刷新&#xff08;无缓冲&#xff09;——ffush() 情况很少&#xff0c…

MacOS - Cpolar 在 Mac 上如何使用?

1、下载并配置环境变量 brew tap probezy/core && brew install cpolar 2、 Token 认证 cpolar authtoken xxx 3、安装服务 sudo cpolar service install 4、启动服务 sudo cpolar service start 5、创建隧道 访问地址&#xff1a;http://127.0.0.1:9200&…

Vue3-provide 和 inject 跨组件传递数据

Vue3-provide 和 inject 跨组件传递数据 功能&#xff1a;将数据从App组件跨过一个组件传递到B组件中provide&#xff1a;提供数据inject&#xff1a;接收数据 // App.vue <template><h2>我是App组件&#xff08;{{num}}&#xff09;</h2><A></A&g…

UASRT(2)

UASRT参数配置 数据发送过程 1.双缓冲 当要发送三个数据 且是连续发送 第一个数据写入TDR寄存器 然后到移位寄存器发送&#xff08;一个一个bit的发送&#xff09;在第一个数据在移位寄存器发送的时候第二个数据就已经被写入TDR寄存器了等到第一个数据发送完第二个数据就进入…

2023年中国农业机器人行业市场规模及发展趋势分析[图]

农业机器人是一种机器&#xff0c;是机器人在农业生产中的运用&#xff0c;是一种可由不同程序软件控制&#xff0c;以适应各种作业,能感觉并适应作物种类或环境变化&#xff0c;有检测(如视觉等)和演算等人工智能的新一代无人自动操作机械。 农业机器人分类 资料来源&#xf…

基于单片机PM2.5监测系统仿真设计

**单片机设计介绍&#xff0c; 基于单片机PM2.5监测系统仿真设计 文章目录 一 概要简介设计目标系统组成工作流程仿真设计结论 二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 # 基于单片机PM2.5监测系统仿真设计介绍 简介 PM2.5&#xff08;可吸…

3.8-镜像的发布

如果我们想将image push到docker hub里面&#xff0c;那么我们的image的名字一定要是这种格式&#xff1a;docker hub id/imageName&#xff0c;例如&#xff1a;lvdapiaoliang/hello-docker docker hub个人账户设置地址&#xff1a; 在push之前要先登录&#xff1a; docker l…

图神经网络:消息传递算法

一、说明 图网络-GNN&#xff08;Graph Neural Networks&#xff09;是近几年研究的主题之一&#xff0c;虽不及深度神经网络那么火爆&#xff0c;但在一些领域&#xff0c;如分子化学方面是不得不依赖的理论。本文就一些典型意义的图神经网络消息传递展开阐述。 二、图网络简述…

传输层协议 - UDP(User Datagrm Protocol)

文章目录&#xff1a; 传输层再谈端口号端口号划分知名端口号&#xff08;Well-Know Port Number&#xff09;netstat 命令iostat 命令pidof UDP 协议UDP 协议格式UDP 协议的特点面向数据报UDP 的缓冲区UDP 使用注意事项UDP 协议的应用基于 UDP 的应用层协议 在 DDoS 攻击中如何…