Three.js学习9:Three.js 响应式设计

当浏览器窗口尺寸变化的时候,Three.js 渲染的场景,也就是 canvas 不会变化。

让 canvas 随着窗口的尺寸变化,可以利用 window 对象的 resize 事件实现响应式变化。

window.onresize = function(){winH = window.innerHeight;winW = window.innerWidth;renderer.setSize( winW, winH );renderer.render( scene, camera );
}

 resize 事件函数里,重新计算窗口尺寸,让渲染器重新进行大小渲染。不过,画面会被拉扯变形。这是因为,窗口的宽高比跟之前的不一样了。

需要重新调整 camera 相机视锥体的宽高比。  

window.onresize = function(){winH = window.innerHeight;winW = window.innerWidth;renderer.setSize( winW, winH );camera.aspect = winW/winH;camera.updateProjectionMatrix();renderer.render( scene, camera );
}

相机的方法updateProjectionMatrix ()其作用是更新摄像机投影矩阵。在相机的任何参数被改变以后必须被调用。

这样就实现了 Three.js 的响应式设计。

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

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

相关文章

Python Matplotlib 的学习笔记

Python Matplotlib 的学习笔记 0. Python Matplotlib 简介1. 为什么要用 Matplotlib?2. Matplotlib 基础类详解2-1. Line(线)2-2. Marker(标记)2-3. Text(文本)2-4. Legend(图例&…

预算紧缩下创新创业者应采取哪3个策略来保持创新?

在今天越来越饱和的消费市场中,品牌零售通过复杂、过度的的促销、折扣、优惠券和忠诚度奖励来吸引消费者,但这种做法可能削弱消费者的忠诚度,损害品牌声誉,并抑制新的收入机会。相反,零售商应采取更简化、以客户为中心…

什么是自编码器Auto-Encoder?

来源:https://www.bilibili.com/video/BV1Vx411j78H/?spm_id_from333.1007.0.0&vd_sourcef66cebc7ed6819c67fca9b4fa3785d39 为什么要压缩呢? 让神经网络直接从上千万个神经元中学习是一件很吃力的事情,因此通过压缩提取出原图片中最具代…

steam游戏搬砖项目靠谱吗?有没有风险?

作为一款fps射击游戏,csgo在近几年可谓是火出圈,作为一款全球竞技游戏,深受玩家喜爱追捧,玩家追求的就是公平公正,各凭本事,像其他游戏可能还会有皮肤等装备属性加成,在csgo里面是不存在的。 纯…

手撕链表OJ

𝙉𝙞𝙘𝙚!!👏🏻‧✧̣̥̇‧✦👏🏻‧✧̣̥̇‧✦ 👏🏻‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - :来于“云”的“羽球人”。…

HTML快速入门教程

HTML:超文本标记语言(Hyper Text Markup Language),是通过标签的形式将内容组织起来然后共享到网络之上供其他电脑访问查看。 大家可以思考一下,怎么将自己电脑上的文件或图片共享给其他电脑? 这时候会说通…

NLP快速入门

NLP入门 课程链接:https://www.bilibili.com/video/BV17K4y1W7yb/?p1&vd_source3f265bbf5a1f54aab2155d9cc1250219 参考文档链接1:NLP知识点:Tokenizer分词器 - 掘金 (juejin.cn) 一、分词 分词是什么? 每个字母都有对应…

CSS之画常见的图形

1.三角形 .shape {width: 0;height: 0;border-top: 100px solid rgba(0, 0, 0, 0);border-right: 100px solid rgba(0, 0, 0, 0);border-bottom: 100px solid blue;border-left: 100px solid rgba(0, 0, 0, 0);}使用border属性实现。宽高设置为0,border里其中一个方…

《剑指 Offer》专项突破版 - 面试题 45 和 46 : 二叉树最低层最左边的值和二叉树的右侧视图(C++ 实现)

目录 面试题 45 : 二叉树最低层最左边的值 面试题 46 : 二叉树的右侧视图 面试题 45 : 二叉树最低层最左边的值 题目: 如何在一棵二叉树中找出它最低层最左边节点的值?假设二叉树中最少有一个节点。例如,在下图所示的二叉树中最低层最左边…

FPGA_简单工程_拨码开关

一 框图 二 波形图 三 代码 3.1 工程代码 module bomakiaguan (input [15:0] switch, // 输入16路拨码开关output reg [15:0] led // 输出16个LED灯 );always (switch) beginled < switch; // 将拨码开关的值直接赋给LED灯 end // 将拨码开关的值直接赋给LED灯 endmodu…

【C++】模板(超详细!!!!!!)

文章目录 前言1. 泛型编程2. 函数模板2.1 函数模板概念2.2 函数模板格式2.3 函数模板的原理2.4 函数模板的实例化2.5 模板参数的匹配原则2.6 声明和定义分离 3. 类模板3.1 类模板的定义格式3.2 类模板的实例化 4. 模板分离编译4.1 什么是分离编译4.2 模板的分离编译 总结 前言 …

Spring Boot 笔记 018 创建接口_文章列表(分页)

1.1 分页查询 1.1.1 创建pageBean封装分页的数据 package com.geji.pojo;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;import java.util.List;//分页返回结果对象 Data NoArgsConstructor AllArgsConstructor public class PageB…