I recently attempted to load an object with different textures in various places, inspired by the examples on three.js website. Despite successfully loading the object, I encountered an issue where the textures were not displaying as expected.
Here is the code snippet I used:
// LOAD TREE Example
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath("Assets/Objects/Tree_V9_OBJ/");
mtlLoader.load("Tree_V9_Final.mtl", function(materials){
materials.preload();
console.log(materials);
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('Assets/Objects/Tree_V9_OBJ/');
objLoader.load('Tree_V9_Final.obj', function(object){
console.log(object);
object.scale.x = 10;
object.scale.y = 10;
object.scale.z = 10;
scene.add(object);
});
});
In reviewing my folder structure:
https://i.sstatic.net/FCsfg.png
The visual outcome:
https://i.sstatic.net/9ILAC.png
Reviewing the console output:
https://i.sstatic.net/sC1Ym.png
This was the original source of the object:
Being new to utilizing three.js, I'm unsure of how to address this issue. Strangely, no errors are being displayed in the console. Can anyone provide insight into resolving this so that the object loads correctly with its textures?