.setViewport()
通过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。