Three.js 渲染视图 .setViewport()

Question

通过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。