I've been working on a 3D house model and encountered another frustrating issue that seems to be common with three.js.
In Maya, I have created my scene with 9 ungrouped objects, each only a child of the world, with texture maps containing ambient occlusion and baked lighting assigned via shadingMaps. Despite having trouble using the mtl file, I managed to load the texture maps separately and create materials in three.js.
Everything looks fine in the browser except for the walls and floor object, which is simple in design but causing unexpected texture distortion. While exporting objects into obj files, I learned that only one UV channel is supported, so I copied my UVs into the default channel and deleted extras before export. But when I apply the material in the browser, the textures appear misplaced.
This issue perplexes me, especially since more complex objects display correctly. I've tried various approaches, including direct export to js from Maya and using a browser-based converter without success.
If anyone has insight on how to troubleshoot this problem, please share your expertise. I've included relevant code below:
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({antialias: true} );
var wallTexture = THREE.ImageUtils.loadTexture("obj/final_walls.jpg");
var wallMaterial = new THREE.MeshLambertMaterial( {color: 0x929EAC, map:wallTexture} );
var manager = new THREE.LoadingManager();
var loader = new THREE.OBJMTLLoader( manager );
loader.load( 'obj/wallOnly.obj','obj/wallOnly.mtl', function ( object ) {
object.children[2].material = wallMaterial;
floorplan.add(object);
camera.lookAt( object );
} );
Please assist me in resolving this issue!