Three.js 渲染视图 .setViewport() - 文章教程

Three.js 渲染视图 .setViewport()

发布于 2021-09-11 字数 2268 浏览 1098 评论 0

通过Threejs渲染器的 .setViewport() 方法的四个参数可以在canvas画布上定义一个矩形的局部区域,如果没有通过.setViewport()方法设置一个局部区域的情况下,Threejs执行渲染方法.render()时候,渲染场景中模型进行平移缩放变换的时候以整个canvas画布为准,如果通过视口方法.setViewport()设置了一个矩形范围,那么执行渲染方法.render()时候,渲染场景中模型进行平移缩放变换的时候不以整个canvas画布为准,而是以视口方法.setViewport()设置的矩形范围为准。

简单地说,就是通过.setViewport()方法可以实现在一个canvas画布上面不同区域分别执行.render()输出渲染结果。

.setViewport() 方法

方法setViewport(x,y,width,height),四个参数都是像素值(整数常数),(x,y)表示视口左上角相对canvas画布左上角原点的坐标位置,默认值是(0,0)(width,height)表示视口的宽高尺寸,默认值是(canvas宽度,canvas高度)

通过视口变换方法setViewport()设置渲染区域后,Threejs渲染区域计算不在是默认的整个canvas画布,而是setViewport()设置的区域范围。

// 渲染函数
function render() {
  // 默认情况就是整个canvas画布
  // renderer.setViewport(0, 0, window.innerWidth, window.innerHeight)
  //矩形范围宽高都是canvas画布的二分之一  左侧偏移20 顶部偏移200
  renderer.setViewport(20, 200, window.innerWidth / 2, window.innerHeight / 2)
  //矩形范围宽高都是canvas画布的四分之一  左侧偏移20 顶部偏移200
  // renderer.setViewport(20, 200, window.innerWidth / 4, window.innerHeight / 4)
  renderer.render(scene, camera);
  mesh.rotateY(0.01);
  requestAnimationFrame(render);
}
render();

封装 gl.viewport()

three.js提供的渲染器对象 WebGLRenderer 实际上是对WebGL绘制函数gl.drawArray()、视口函数gl.viewport()等原生WebGL API方法的封装, three.js渲染器对象的方法 .setViewport() 对应的就是WebGL APIgl.viewport()

关于 gl.viewport() API的介绍:https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/viewport。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

晚风撩人

这个人比较懒,什么都没有填写!

21 文章
1 评论
24137 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0