Three.js：THREE.WebGLRenderer：图像不是2的幂（1600x900）。 调整为1024x512

Question

I'm currently learning three.js. I wanna display a 16x9 photo in my scene.

This is the code for adding an Array of images to my scene:

  const material = new MeshBasicMaterial({
    map: loader.load(images[i]),
    transparent: true,
    opacity: 1,
  });
  const plane = new Mesh(new PlaneGeometry(imageWidth, 45), material);
  plane.overdraw = true;
  plane.position.x = i * (imageWidth + imageOffset);
  plane.position.y = 0;
  this.introImages.push({
    obj: plane,
    round: 1,
  });
  this.introImagesGroup.add(this.introImages[i].obj);

Now I'm getting the console warning:

THREE.WebGLRenderer: image is not power of two (1600x900). Resized to 1024x512

I have read that texture dimensions should be the power of two so it can be put into memory in an optimized way which makes me think if the way I'm putting my images in the scene is the correct way or if there is another way of putting images that don't follow this in three.js?

Answer 1

You probably don't want THREE.js to scale down your image, because you'd be losing resolution, so you want to scale it up to the next ^2. You have two options:

1. You could scale up your image and export it at a ^2 resolution 2048 x 1024 in your favorite photo editor.

2. You could dynamically generate a 2048 x 1024 canvas, draw the image onto it scaled up, and use that canvas as your texture source:

    var imgURL = "path/to/whatever.jpg"; // Create image element const image = document.createElement('img'); image.src = imgURL; // Once image is loaded image.onload = () => { // Create canvas, size it to ^2 dimensions var canvas = document.createElement('canvas'); canvas.width = 2048; canvas.height = 1024; // Draw image on canvas, scaled to fit var ctx = canvas.getContext('2d'); var ctx.drawImage(image, 0, 0, 2048, 1024); // Create texture var texture = new THREE.Texture(canvas); }; 

Then you can assign that texture variable to whatever material you want, and Three.js won't complain.

Edit:

If you want to avoid texture re-sizing, you could just change your texture.minFilter to THREE.NearestFilter or THREE.LinearFilter , and the engine won't give you warnings. The problem with doing this is that your textures could look grainy or aliased when scaled down, since they won't be Mipmapped

This could be the result you like, or it could look bad, depending on your project. You could see the effects of using NearestFilter in this example: https://threejs.org/examples/?q=filter#webgl_materials_texture_filters

Answer 2

I have read that texture dimensions should be the power of two so it can be put into memory in an optimized way which makes me think if the way I'm putting my images in the scene is the correct way or if there is another way of putting images that don't follow this in three.js?

In WebGL 1 you need POT textures for mipmapping. The mentioned warning disappears if you set the .minFilter property of your canvas texture to THREE.LinearFilter . Keep in mind that using mipmaps is not necessary for all scenarios.