你可以在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;