與Three.js一起使用TEXTURE_2D

Question

有沒有辦法在Three.js中使用TEXTURE_2D作爲紋理？

我有很高分辨率的圖像，我正嘗試在Three.js圖像查看器中使用。性能現在是一個問題，所以我試圖將圖像轉換爲POT，看看它是否有任何區別。我使用的腳本這裏建議：http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences

function createTextureFromImage(image) { 
    var gl = renderer.context; 
    var texture = gl.createTexture(); 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    if (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height)) { 
     // Scale up the texture to the next highest power of two dimensions. 
     var canvas2 = document.createElement("canvas"); 
     canvas2.width = nextHighestPowerOfTwo(image.width); 
     canvas2.height = nextHighestPowerOfTwo(image.height); 
     var ctx = canvas2.getContext("2d"); 
     ctx.drawImage(image, 0, 0, image.width, image.height); 
     image = canvas2; 
    } 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 
    gl.generateMipmap(gl.TEXTURE_2D); 
    gl.bindTexture(gl.TEXTURE_2D, null); 
    return texture; 
} 

但我想不出如何使用返回紋理對象與THREE.Texture。有任何想法嗎？

編輯1： 我一直在尋找通過three.js所代碼，發現它含蓄地做一些事情像什麼，我想實現： https://github.com/mrdoob/three.js/blob/master/src/loaders/Loader.js

誰能證實？

Answer 1

像這樣的東西應該工作：

function createTextureFromImage(image) { 

    var canvas = document.createElement("canvas"); 

    canvas.width = nextHighestPowerOfTwo(image.width); 
    canvas.height = nextHighestPowerOfTwo(image.height); 

    var ctx = canvas2.getContext("2d"); 

    ctx.drawImage(image, 0, 0, image.width, image.height); 

    return canvas; 
} 

var texture = new THREE.Texture(createTextureFromImage(image));