如何在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中将预加载的图像作为纹理使用

回答

相关问题