Question

在我的threejs项目的控制台中，我看到了类似以下的警告。

THREE.WebGLRenderer: Texture has been resized from (613x345) to (512x256).

四处搜寻，似乎不需要担心。但是我想删除这些日志以保持控制台清洁。我们该如何实现？

Answer 1

设置

texture.minFilter = THREE.LinearFilter;

将关闭mipmapping和将大小调整为2的幂的需求。

或者，在使用纹理之前，将其手动调整为2的幂。

three.js r.102

Answer 2

如果使用加载程序（例如FBXLoader，ObjectLoader），则可以在WebGLTextures执行此操作之前调整图像大小。这是我的解决方案：

  function resizeImage(image) {
    const scale = 1
    const width = THREE.Math.floorPowerOfTwo(scale * image.width)
    const height = THREE.Math.floorPowerOfTwo(scale * image.height)
    if (width === image.width && height === image.height) {
      return image
    }
    if ((typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement) ||
        (typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement) ||
        (typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap)) {
      document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas')

      const canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas')

      canvas.width = width
      canvas.height = height

      const context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, width, height)
      return canvas
    } else {
      return image
    }
  }

  function resizeAllImages(obj) {
    // console.log('resizeAllImages')
    obj.traverse(o => {
      if (o.material) {
        if (o.material.map && o.material.map.image) {
          o.material.map.image = this.resizeImage(o.material.map.image)
        } else if (o.material.length > 1) {
          o.material.forEach(m => {
            if (m.map && m.map.image) {
              m.map.image = this.resizeImage(m.map.image)
            }
          })
        }
      }
    })
  }

在加载模型后解析图像，然后在WebGLTextures之前调整图像的大小。

function onLoad(obj) {
  // ...
      // FXB loader async loading texture image.
      setTimeout(() => {
        resizeAllImages(scene)
      }, 1)
  //...
}

//loader.load(url,onLoad)

renderers\webgl\WebGLTextures.js中的相对代码

    function resizeImage( image, needsPowerOfTwo, needsNewCanvas, maxSize ) {

        var scale = 1;

        // handle case if texture exceeds max size

        if ( image.width > maxSize || image.height > maxSize ) {

            scale = maxSize / Math.max( image.width, image.height );

        }

        // only perform resize if necessary

        if ( scale < 1 || needsPowerOfTwo === true ) {

            // only perform resize for certain image types

            if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
                ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
                ( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {

                var floor = needsPowerOfTwo ? _Math.floorPowerOfTwo : Math.floor;

                var width = floor( scale * image.width );
                var height = floor( scale * image.height );

                if ( _canvas === undefined ) _canvas = createCanvas( width, height );

                // cube textures can't reuse the same canvas

                var canvas = needsNewCanvas ? createCanvas( width, height ) : _canvas;

                canvas.width = width;
                canvas.height = height;

                var context = canvas.getContext( '2d' );
                context.drawImage( image, 0, 0, width, height );

                console.warn( 'THREE.WebGLRenderer: Texture has been resized from (' + image.width + 'x' + image.height + ') to (' + width + 'x' + height + ').' );

                return canvas;

            } else {

                if ( 'data' in image ) {

                    console.warn( 'THREE.WebGLRenderer: Image in DataTexture is too big (' + image.width + 'x' + image.height + ').' );

                }

                return image;

            }

        }

        return image;

    }

    function textureNeedsPowerOfTwo( texture ) {

        if ( isWebGL2 ) return false;

        return ( texture.wrapS !== ClampToEdgeWrapping || texture.wrapT !== ClampToEdgeWrapping ) ||
            ( texture.minFilter !== NearestFilter && texture.minFilter !== LinearFilter );

    }

three.js r.109

删除three.js中的“纹理已调整大小”控制台日志

2 个答案: