如何在THREE.js中將預加載的圖像作爲紋理使用

此特定項目具有非畫布後退例程，該例程也使用預加載例程。圖像添加和適當加載，但我無法弄清楚如何在THREE.js中使用它們，因爲THREE.js將使用它自己的圖像加載器來重新加載圖像。如何在THREE.js中將預加載的圖像作爲紋理使用

**這裏的JS **

function MAIN_PRELOAD() { 

var Preload_List = []; 
var Preload_Loaded = 0; 
var Preload_Errors = 0; 

function preload_scene() { 

    // Skip Empty List... 
    if(SceneAssets.length < 1) return; 
    for(var i in SceneAssets) { 

    // Skip Blanks... 
    if(SceneAssets[i]['material']['map'].length < 1) continue; 

    // Skip Repeats... 
    if(Preload_List.indexOf(SceneAssets[i]['material']['map']) >= 0) continue; 

    // Add to list... 
    console.log('Image added to preloader: '+SceneAssets[i]['material']['map']); 
    Preload_List[Preload_List.length] = SceneAssets[i]['material']['map']; 

    } 
} 

function preload_masks() { 

    // Skip Empty List... 
    if(MaskLayer['textures'].length < 1) return; 
    for(var i in MaskLayer['textures']) { 

    // Skip Blanks... 
    if(MaskLayer['textures'][i].length < 1) continue; 

    // Skip Repeats... 
    if(Preload_List.indexOf(MaskLayer['textures'][i]) >= 0) continue; 

    // Add to list... 
    console.log('Image added to preloader: '+MaskLayer['textures'][i]); 
    Preload_List[Preload_List.length] = MaskLayer['textures'][i]; 

    } 
} 

function preload_finished() { 

    console.log('Preloading has finished!'); 
    // NYI: Hide the loading overlay... 
    init(); 
    animate(); 

} 

function preload_init() { 

    // Preload Assets... 
    preload_scene(); 
    preload_masks(); 

    // Finish if empty... 
    if(Preload_List.length < 1) { 
    preload_finished(); 
    return; 
    } 

    // Iterate if filled... 
    for(var i in Preload_List) { 

    // Enclosure for event trapping... 
    (function(i) { 

    var imageElement = document.createElement('img'); 

    imageElement.onload = function() { 
    console.log('Image "'+Preload_List[i]+'" done loading!'); 
    Preload_Loaded ++; 
    if(Preload_Loaded + Preload_Errors == Preload_List.length) { 
     preload_finished(); 
    } 
    }; 

    imageElement.onerror = function() { 
    console.log('Image "'+Preload_List[i]+'" failed to load...'); 
    Preload_Errors ++; 
    if(Preload_Loaded + Preload_Errors == Preload_List.length) { 
     preload_finished(); 
    } 
    }; 

    imageElement.src = Preload_List[i]; 

    })(i); 

    } 

} 
preload_init(); 

} 

MAIN_PRELOAD();

目前尚未實行的是口罩的一切，直到呈現預緊完成一個固體覆蓋。

需要說明的是，我的應用程序的兩個部分都可以單獨工作，但是在開始時存在一個大的處理停頓，因爲所有內容都正在加載並添加到現場，這對整體用戶體驗不利。

在演示文稿中，當它根據需要加載遮罩層時，也會出現週期性的延遲，並且每次執行時，都會通過新的HTTP請求而不是通過THREE.ImageUtils.loadTexture()從瀏覽器緩存中進行。

我最好的猜測是，我必須以某種方式使用預加載創建作爲THREE.ImageUtils.loadTexture()更換的unappended img元素，我只是找不到任何地方的任何做同樣的事情，我認爲這將是一個偉大的方式如果我可以使它工作，爲THREE.js緩存場景資產。

解決此問題的替代方法也將被考慮。

使用three.js所R70

來源

2015-02-24 RedYetiCo

你發送給'THREE.ImageUtils.loadTexture（）'什麼？ – 2pha 2015-02-25 02:11:56

目前它使用圖像的相對路徑，所以從新的HTTP請求中加載圖像是合乎邏輯的。我想使用圖像緩存版本，而不是。 – RedYetiCo 2015-02-25 14:59:18

爲什麼preloader加載時不會創建紋理？ – 2pha 2015-02-25 15:01:38

var texture; 
var imageElement = document.createElement('img'); 
imageElement.onload = function(e) { 
    texture = new THREE.Texture(this); 
    texture.needsUpdate = true; 
    init(); 
}; 
imageElement.src = "myimage.png"; 

init() { 
    material = new THREE.MeshPhongMaterial({ map : texture }); 
}

這裏是一個fiddle證明。
注意：在小提琴中我使用了一個圖像dataUrl，這只是因爲我可以將圖像用作紋理而不會出現CORS錯誤。在一個網站上，您應該能夠像平常一樣將圖像src設置爲文件路徑。

來源

2015-02-26 04:58:29 2pha

如何在THREE.js中將預加載的圖像作爲紋理使用

回答

相關問題