你可以在three.js中加载一个作为纹理加载为其他纹理mipmap的图像吗？

Question

这是一个问题，而不是问题。

我正在与地图集纹理地形工作。为了减轻颜色流血，我想用外部工具中内置的mipmap来提供地形纹理。

暂时我使用...

terrainTexture = THREE.ImageUtils.loadTexture 

...加载每一个纹理贴图的水平，并将它们添加到0级质感...

terrainTexture.mipmaps[mipsTexs[tex.sourceFile]] = tex.image; 

.. 。mipsTexs只是一个关联数组，以知道哪个位置对应于每个纹理。

真正的问题是，当我手动使用mipmap和color，但使用webgl生成的mipmap时出现色彩渗色工件时，地形会全黑。

手动mipmap的唯一例子是在示例中，但纹理的mipmaps是canvas。我想知道，我看到的全黑问题可能是由于使用JS图像而不是Canvases。

Answer 1

This example展示了如何建立自己的贴图：

function mipmap(size, color) { 

    var imageCanvas = document.createElement("canvas"), 
    context = imageCanvas.getContext("2d"); 

    imageCanvas.width = imageCanvas.height = size; 

    context.fillStyle = "#444"; 
    context.fillRect(0, 0, size, size); 

    context.fillStyle = color; 
    context.fillRect(0, 0, size/2, size/2); 
    context.fillRect(size/2, size/2, size/2, size/2); 
    return imageCanvas; 

} 

var canvas = mipmap(128, '#f00'); 
var textureCanvas1 = new THREE.Texture(canvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping); 
textureCanvas1.repeat.set(1000, 1000); 
textureCanvas1.mipmaps[ 0 ] = canvas; 
textureCanvas1.mipmaps[ 1 ] = mipmap(64, '#0f0'); 
textureCanvas1.mipmaps[ 2 ] = mipmap(32, '#00f'); 
textureCanvas1.mipmaps[ 3 ] = mipmap(16, '#400'); 
textureCanvas1.mipmaps[ 4 ] = mipmap(8, '#040'); 
textureCanvas1.mipmaps[ 5 ] = mipmap(4, '#004'); 
textureCanvas1.mipmaps[ 6 ] = mipmap(2, '#044'); 
textureCanvas1.mipmaps[ 7 ] = mipmap(1, '#404'); 
textureCanvas1.needsUpdate = true;