Question

我试图在用户交互后更新几何上的图像资源，基本上加载低资产资产开始，并在用户与之交互时交换到高资产。如果我只使用如下标准代码：

var materials = [
    new THREE.MeshPhongMaterial({ map:loader.load('assets/object/0.jpg' )  }),
    new THREE.MeshPhongMaterial({ map:loader.load('assets/object/1.jpg' )  }),
    new THREE.MeshPhongMaterial({ map:loader.load('assets/object/2.jpg' )  }),
    new THREE.MeshPhongMaterial({ map:loader.load('assets/object/3.jpg' )  }),
    new THREE.MeshPhongMaterial({ map:loader.load('assets/object/4.jpg' )  }),
    new THREE.MeshPhongMaterial({ map:loader.load('assets/object/5.jpg' )  }),
]; 
target.material.map.needsUpdate = true;
var texture = new THREE.MeshFaceMaterial( materials );
target.material = texture;

从显示基色的几何图形中清除低资产资产，高资产资产需要一秒钟才能加载，然后显示在几何图形上。

我需要加载资产然后交换它们，从某些阅读中看起来好像是THREE.LoadingManager（），但是我有点迷失。

到目前为止，这就是我所拥有的，但它会抛出错误......

var textureManager = new THREE.LoadingManager();
textureManager.onProgress = function ( item, loaded, total ) {
    console.log(item+' = '+loaded / total * 100) + '%';
};
textureManager.onLoad = function () {
    console.log(' loading complete');

    var materials = [
        new THREE.MeshPhongMaterial({ map:myTextureArray[0] }),
        new THREE.MeshPhongMaterial({ map:myTextureArray[1] }),
        new THREE.MeshPhongMaterial({ map:myTextureArray[2] }),
        new THREE.MeshPhongMaterial({ map:myTextureArray[3] }),
        new THREE.MeshPhongMaterial({ map:myTextureArray[4] }),
        new THREE.MeshPhongMaterial({ map:myTextureArray[5] })
    ]; 
    target.children[i].material.materials.map.needsUpdate = true;
    var texture = new THREE.MeshFaceMaterial( materials );
    target.children[i].material = texture;
};

var textureLoader = new THREE.ImageLoader( textureManager );
myTextureArray = [];
var myTexture = new THREE.Texture();

myTextureArray.push(   textureLoader.load( 'assets/objtect1/hires/0.jpg', function ( image ) { myTexture.image = image; } )  );
myTextureArray.push(   textureLoader.load( 'assets/objtect1/hires/1.jpg', function ( image ) { myTexture.image = image; } )  );
myTextureArray.push(   textureLoader.load( 'assets/objtect1/hires/2.jpg', function ( image ) { myTexture.image = image; } )  );
myTextureArray.push(   textureLoader.load( 'assets/objtect1/hires/3.jpg', function ( image ) { myTexture.image = image; } )  );
myTextureArray.push(   textureLoader.load( 'assets/objtect1/hires/4.jpg', function ( image ) { myTexture.image = image; } )  );
myTextureArray.push(   textureLoader.load( 'assets/objtect1/hires/5.jpg', function ( image ) { myTexture.image = image; } )  );

我可能会出错的任何想法？

Answer 1

为了其他人的利益，问题在于我使用的是ImageLoader，而不是TextureLoader。

替换：

var textureLoader = new THREE.ImageLoader( textureManager );

使用

var textureLoader = new THREE.TextureLoader( textureManager );

使用THREE.LoadingMAnager（）加载THREE.BoxGeometry的材质？

1 个答案: