For the past few weeks, I've been diving into Three.js and managed to successfully apply a texture to a cube I created directly in the code. However, when I attempted to load an OBJ file using OBJLoader, I ran into issues trying to load simple png or jpg textures with TextureLoader.
Now, I'm unsure of what exactly is going wrong. I'm not sure if this is the correct method, if I can't load a basic image properly, or if I'm simply applying it incorrectly.
I've noticed that applying a texture with an MTL file appears to be straightforward, but unfortunately, I'm not familiar with how to create one.
The current snippet of my code looks something like this:
var loader = new THREE.OBJLoader( manager );
loader.load( 'models/tshirt.obj', function ( object ) {
object.position.x = 0;
object.position.y = -200;
object.scale.x = 10;
object.scale.y = 10;
object.scale.z = 10;
obj = object;
texture = THREE.TextureLoader('img/crate.png'),
material = new THREE.MeshLambertMaterial( { map: texture } );
mesh = new THREE.Mesh( object, material );
scene.add( mesh );
} );
Unfortunately, this approach doesn't seem to work as expected. The model fails to load and instead throws random errors from Three.js. Interestingly, if I replace scene.add( obj); with scene.add( mesh);, the model actually loads.
What should I do next? Should I attempt to create an MTL file?
You can view my complete working code at
EDIT: When adding mesh instead of obj, I encounter the following error:
three.min.js:436 Uncaught TypeError: Cannot read property 'center' of undefined