网站建设要考,php7 mysql wordpress,建站工具有哪些,网络热词的利弊文章目录参考描述界面自适应问题resize 事件修改画布大小修改视锥体的宽高比全屏显示dblclick 事件检测全屏显示状态进入全屏显示状态退出全屏显示状态尾声参考
项目描述ThreeJS官方文档哔哩哔哩老陈打码搜索引擎BingMDN 文档document.mozFullScreenElementMDN 文档Element.re…
文章目录参考描述界面自适应问题resize 事件修改画布大小修改视锥体的宽高比全屏显示dblclick 事件检测全屏显示状态进入全屏显示状态退出全屏显示状态尾声参考
项目描述ThreeJS官方文档哔哩哔哩老陈打码搜索引擎BingMDN 文档document.mozFullScreenElementMDN 文档Element.requestFullscreen()MDN 文档Document.exitFullscreen()
描述
项目描述npm8.19.3nodev16.19.0Edge110.0.1587.41 (正式版本) (64 位)ThreeJS0.148.0webpack5.75.0webpack-cli5.0.1
注
在观察本篇博客后续内容前请先搭建 ThreeJS 运行的相关环境如还未搭建相关环境请移步至我的另一篇博客 初识 ThreeJS ThreeJS 相关环境搭建。
界面自适应
问题
若你未为 ThreeJS 项目设置界面自适应功能可能会产生如下问题 在画布创建完成后改变窗口大小并不会对画布尺寸产生影响于是产生了上图中的空白部分。
resize 事件
当浏览器视口浏览器的可视区域发生改变时将触发 Window 对象的 resize 事件。我们可以在该事件对应的事件处理函数中实现界面自适应功能。
// 为 window 对象添加监听器以监听 resize 事件
window.addEventListener(resize, () {// 在此处实现界面自适应功能
})修改画布大小
相关
// 导入 ThreeJS
import * as three from three;
// 渲染器的创建
const renderer new three.WebGLRenderer();主逻辑
window.addEventListener(resize, () {renderer.setSize(window.innerWidth, window.innerHeight);
})其中
renderer.setSize() 函数用于设置画布的尺寸该函数接收两个参数分别用于设置画布的宽度及画布的高度。window.innerWidth 与 window.innerHeight 分别对应浏览器视口浏览器的可视区域的当前宽度及高度。
执行效果 界面的自适应功能已被实现但场景中的物体将随浏览器视口尺寸的改变而被拉伸或挤压。
分析
渲染器以摄像机的各方面属性位置角度等来计算在画布中需要绘制的内容视锥体。renderer.setSize() 仅改变了画布大小并没有改变视锥体的宽高比所以在我们更改画布大小后场景中的元素将被拉伸。
视锥体
在三维计算机图形学中视锥体英语viewing frustum又称视景体、视锥是三维世界中在屏幕上可见的区域即虚拟摄像机的视野。
该区域的实际形状依所模拟的摄像机镜头而定但顾名思义其常见的形状是方平截头体。将四棱锥截为平截头体的两个平面称作近平面 和远平面。如果某个物体到摄像机的距离比近平面近或比远平面远那么这个物体不会被显示。 上述内容引用自 维基百科 修改视锥体的宽高比
你需要使用摄像机对象的 aspect 属性指定视锥体的宽高比并使用摄像机对象的 updateProjectionMatrix() 使宽高比生效。
相关
// 导入 ThreeJS
import * as three from three;
// 创建透视摄像机
const camera new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);透视摄像机
在 ThreeJS 中你可以使用如下代码创建透视摄像机
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number );其中
项目描述fov视锥体垂直视野角度默认值为 50。aspect视锥体的宽高比默认值为 1。near规定视锥体近端面与摄像机之间的距离默认值为 0.1。far规定视锥体远端面与摄像机之间的距离默认值为 2000。
主逻辑
window.addEventListener(resize, () {renderer.setSize(window.innerWidth, window.innerHeight);// 设置视锥体的宽高比camera.aspect window.innerWidth / window.innerHeight;// 使得视锥体的宽高比生效camera.updateProjectionMatrix();
})执行效果 全屏显示
在 Edge 浏览器中你可以通过敲击 F11 来使得当前页面进入或退出全屏显示。当然你也可以通过 JavaScript 实现用户可以通过其他方式来进入或退出全屏显示。这里我们将实现双击页面进入或退出全屏显示的效果。
dblclick 事件
当你在页面中进行双击操作时将触发 dbclick 事件我们可以在该事件对应的事件处理函数中实现双击以进入或退出全屏显示的功能。
// 为 window 对象添加监听器以监听 dblclick 事件
window.addEventListener(dblclick, () {// 在此处实现双击以进入或退出全屏显示的功能
})检测全屏显示状态
在通过 JavaScript 代码进入或退出全屏显示前我们需要检测当前的全屏显示状态。你可以通过 document.fullscreenElement 来达成此目的。
document.fullscreenElement
document.fullscreenElement 返回当前文档中正在以全屏模式显示的Element 节点如果没有使用全屏模式则返回 null 。
实现
window.addEventListener(dblclick, () {if(document.fullscreenElement){// 若已有元素进入全屏显示状态则执行// 此部分代码。}else{// 若无元素进入全屏显示状态将执行// 此部分代码。}
})注
通过敲击 F11 进入全屏显示后document.fullscreenElement 将返回 null 。也就是说document.fullscreenElement 不能检测到通过敲击 F11 进入全屏显示后的状态。
进入全屏显示状态 Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。 调用此 API 并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式返回的 Promise 会 resolve并且该元素会收到一个fullscreenchange 事件通知它已经进入全屏模式。如果全屏请求被拒绝返回的 promise 会变成 rejected 并且该元素会收到一个fullscreenerror 事件。如果该元素已经从原来的文档中分离那么该文档将会收到这些事件。 相关
// ThreeJS 的导入
import * as three from three;
// 渲染器的创建
const renderer new three.WebGLRenderer();进入全屏显示状态
window.addEventListener(dblclick, () {if(document.fullscreenElement){// 若已有元素进入全屏显示状态则执行// 此部分代码。}else{renderer.domElement.requestFullscreen();}
})注 你可以在进入或退出全屏显示状态前对 fullscreenchange 和 fullscreenerror 事件进行监听以便在某一元素进入或退出全屏显示状态或进行前两种可能某一元素进入或退出全屏显示状态时发生错误时进行合适的处理提高对程序的掌控能力。 系统将维护全屏显示栈若你在进入全屏显示状态后 N 次执行进入全屏显示状态的相关代码那么你需要执行退出全屏显示状态的操作 N1 次才能够完全退出全屏显示状态。
退出全屏显示状态
你可以通过执行 document.exitFullScreen() 函数来退出当前所处的全屏显示状态。
window.addEventListener(dblclick, () {if(document.fullscreenElement){document.exitFullscreen();}else{renderer.domElement.requestFullscreen();}
})尾声
欢迎建议 如果你对这篇博客右什么意见欢迎指出。
欢迎提问 如果各位对文章中的某些内容不太理解欢迎提问。
