three.js mtl材质贴图未显示_ThreeJS 源码剖析之 Renderer（二）

前言?

鸽了这么久，终于有心情更新一篇文章了?自己最近也在断断续续的学着 WebGL 的相关内容，只不过是因为比较懒就没有写文章，我这个人比较佛系，公众号就是学习、分享和交流的一种方式，有小伙伴看了有帮助便是好的，没有规定必须多久更新一篇，遇到好的文章也不会转载(有可能会在写文章时顺手推荐一下)，我更不会出面试题的相关文章(因为网上这种文章实在数不胜数)。

又碎碎念、嘚吧嘚了一会，话不多说，让我们一起开启秃头之旅?

一起变秃?‍?

clear

this.clear = function ( color, depth, stencil ) {
     
  let bits = 0;

  if ( color === undefined || color ) bits |= _gl.COLOR_BUFFER_BIT;
  if ( depth === undefined || depth ) bits |= _gl.DEPTH_BUFFER_BIT;
  if ( stencil === undefined || stencil ) bits |= _gl.STENCIL_BUFFER_BIT;

  _gl.clear( bits );
};

clear 方法接收三个可选参数，分别是清空 颜色缓冲区、深度缓冲区和模板缓冲区。而 gl.clear() 方法可以接受一个复合值，所以采用了 bits |= value 形式来清空缓冲区。同时，clearColor/clearDepth/clearStencil 三个方法内部也都是调用的本 clear 方法。

setSize

当我们 new 了一个 Renderer 之后，会经常调用 setSize 来设置 canvas 的大小，那我们就看一下 setSize 的实现：

this.setSize = function ( width, height, updateStyle ) {
     
  if ( xr.isPresenting ) {
     
    console.warn( 'THREE.WebGLRenderer: Can\'t change size while VR device is presenting.' );
    return;
  }
  
  _width = width;
  _height = height;
  _canvas.width = Math.floor( width * _pixelRatio );
  _canvas.height = Math.floor( height * _pixelRatio );

  if ( updateStyle !== false ) {
     
    _canvas.style.width = width + 'px';
    _canvas.style.height = height + 'px';
  }

  this.setViewport( 0, 0, width, height );
};

在上面的代码中我们不仅仅设置了 canvas 的 width 和 height，同时还设置了 style 以及 viewport 的 width 和 height。如果我们将 style 的宽高和 canvas 的宽高设置的不同会出现什么效果呢？以之前 WebGL基础 系列文章中纹理贴图中超级赛人的代码为例，下图是我们正常显示的图片(style 和 canvas 宽高都是 600px)：