【three.js】设置three.js全屏展示,并解决大小动态变化

目录

一、设置全屏

二、canvas画布宽高度动态变化


一、设置全屏

这个很简单,直接用代码读取当前全屏需要的长宽即可。

const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
const height = window.innerHeight; //窗口文档显示区的高度作为画布高度

二、canvas画布宽高度动态变化

比如我把浏览器缩小,可以看出三维图并没有跟着自适应。

如何解决呢?

我们需要监听浏览器大小的变化,代码如下,当浏览器尺寸发生变化,相机的参数也要跟着变化。

// onresize 事件会在窗口被调整大小时发生
window.onresize = function () {
    // 重置渲染器输出画布canvas尺寸
    renderer.

相关推荐

  1. React Three Fiber动画

    2024-06-13 08:30:01       39 阅读
  2. [three.js]UV动画

    2024-06-13 08:30:01       24 阅读
  3. threejs WebGLRenderer 像素比对画布大小的影响

    2024-06-13 08:30:01       43 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-13 08:30:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-13 08:30:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-13 08:30:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-13 08:30:01       20 阅读

热门阅读

  1. 深入理解JVM类加载器与双亲委派模型机制

    2024-06-13 08:30:01       6 阅读
  2. Apache 网站服务基础

    2024-06-13 08:30:01       4 阅读
  3. Ubuntu根分区在线扩容

    2024-06-13 08:30:01       8 阅读
  4. 小程序中的模版语法

    2024-06-13 08:30:01       5 阅读
  5. [Linux] Screen的简单使用与中途退出保持运行

    2024-06-13 08:30:01       6 阅读
  6. 四、Nginx配置文件-负载均衡

    2024-06-13 08:30:01       7 阅读
  7. 如何在命令行判断node.js启动了没有

    2024-06-13 08:30:01       9 阅读
  8. 【Python机器学习】非负矩阵分解(NMF)

    2024-06-13 08:30:01       8 阅读