编辑：

Question

我目前正在学习three.js。我想在场景中显示一张16x9的照片。

这是将S1 S2 S3 S4 S5 1713 203145 203458 1627752 1629027 1713 45222 203145 1627752 1629027 1713 203145 203458 1627752 1629027 45222 203145 203458 1627752 1629027 1713 45222 203145 1627752 1629027数组添加到我的场景的代码：

images

现在我收到控制台警告：

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

我已经读过，纹理尺寸应该是 2的幂，因此可以以优化的方式将其存储到内存中，这使我思考是否将图像放置到场景中的方式是正确的方法，或者是否有另一种方法将图像不遵循此方法放置在three.js中？

Answer 1

您可能不希望THREE.js将图像缩小，因为您将失去分辨率，因此希望将其缩放到下一个^ 2。您有两种选择：

您可以按比例放大图像，然后在自己喜欢的照片编辑器中以^ 2分辨率2048 x 1024导出图像。

您可以动态生成2048 x 1024画布，将图像按比例绘制到其上，然后将该画布用作您的纹理来源：

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);
};

然后，您可以将texture变量分配给所需的任何材料，Three.js不会抱怨。

编辑：

如果要避免调整纹理大小，只需将texture.minFilter更改为THREE.NearestFilter或THREE.LinearFilter，引擎就不会发出警告。这样做的问题在于，由于缩小后的纹理不会Mipmapped

，因此您的纹理在缩小时可能看起来很粗糙或混叠。

根据您的项目，这可能是您喜欢的结果，也可能看起来很糟糕。在此示例中，您可以看到使用NearestFilter的效果：https://threejs.org/examples/?q=filter#webgl_materials_texture_filters

Answer 2

我已经阅读到纹理尺寸应该是2的幂，因此可以以优化的方式将其存储到内存中，这使我思考将图像放置在场景中的方式是否正确或是否存在另一种将不遵循此图像的图像放置在three.js中的方法？

在WebGL 1中，您需要POT纹理进行映射。如果将画布纹理的.minFilter属性设置为THREE.LinearFilter，则上述警告将消失。请记住，并非在所有情况下都使用mipmap。

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

2 个答案:

编辑：