WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 Three.js免费视频教程

Three.js渲染视口.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。

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com