javascript爲webgl加載紋理

Question

我試圖對象化一種在webgl中加載紋理的方法。我有一系列的行星，我設定了一個名稱和其他值。我所有的紋理都被稱爲sun.jpg，mercury.jpg等，所以當我建立名稱字符串時，我可以使用Planets[i].name+".jpg"來獲取紋理的名稱。 我得到的錯誤是

Uncaught TypeError: Cannot read property 'image' of undefinedSpheredPlanetsGL.js:138 handleLoadedTextureSpheredPlanetsGL.js:179 TextureName.(anonymous function).image.onload

我設置的textureName陣列是這樣的：（此數組認爲我以後引用單個變量）

var TextureName = []; 
    function setBufferName() 
    { 
     for(var i = 0; i < Planets.length; i++) 
     { 
      TextureName[i] = {name: Planets[i].name+"TextureName"}; 
     } 
    } 

然後我初始化紋理是這樣的：（這應該確保「sunTextureName」應引用的所有行星「sun.jpg」等）

function initTexture() 
    { 
     for(var i = 0; i < Planets.length; i++) 
     { 
      TextureName[i] = gl.createTexture(); 
      TextureName[i].image = new Image(); 
      TextureName[i].image.onload = function() 
      { 
       handleLoadedTexture(TextureName[i]); 
      } 
      TextureName[i].image.src = Planets[i].name+".jpg"; 
     } 
    } 

那麼錯誤發生在這裏的時候「handleLoade dTexture（TextureName [1]）」之稱和IM不知道爲什麼功能是這樣的：

function handleLoadedTexture(texture) 
    { 
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 
     gl.bindTexture(gl.TEXTURE_2D, texture); 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); 
     gl.generateMipmap(gl.TEXTURE_2D); 
     gl.bindTexture(gl.TEXTURE_2D, null); 
    } 

更清晰錯誤發生在這條線gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);。我不知道爲什麼，因爲我傳入變量，我應該引用數組中的內容。

任何幫助？

Answer 1

問題是你的計數器變量的範圍。 您的循環遞增計數器變量，並在其大於或等於Planets.length時退出。當你的回調執行時，循環已經完成，並且i保留在Planets.length。

您可以使用IIFE（立即調用函數表達式）創建的i作用域複製像這樣：

for(var i = 0; i < Planets.length; i++) 
    { 
     TextureName[i] = gl.createTexture(); 
     TextureName[i].image = new Image(); 
     TextureName[i].image.onload = (function (index) { 
      return function() { handleLoadedTexture(TextureName[index]) } 
     })(i); 
     TextureName[i].image.src = Planets[i].name+".jpg"; 
    }