I am looking to enhance the image quality of a geometry after user interaction by initially loading low-resolution assets and then switching to high-resolution assets when the user interacts with it. When using the following standard code:
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;
The low-resolution assets disappear from the geometry at first, showing the base color, while the high-resolution assets take a moment to load before appearing on the geometry.
I have read about using THREE.LoadingManager() for asset loading and swapping, but I am encountering errors in my implementation.
Here's what I have so far, which is causing issues:
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; }));
Any suggestions on where I might be making mistakes?