CODEWITHSUNDEEP
three.js
Roger Miranda Perez
Roger Miranda Perez

Reputation: 112

THREE.JS OBJLoader giving 'Unexpected line' while loading images

I can't load images (JPG, PNG, or BMP) with OBJLoader.

Here's some of the code:

function init() {
  ...
  loader = new THREE.OBJLoader();
  loadOBJ();
}

function createLeeMaterial() {
    let leeTexture = new THREE.Texture();
    
    loader.load('lee/lee_diffuse.jpg', (image) => {
        leeTexture.image = image;
        leeTexture.needsUpdate = true;
    });
    
    let leeMaterial = new THREE.MeshPhongMaterial();
    leeMaterial.map = leeTexture;
    
    return leeMaterial;
}

function loadOBJ() {
    loader.load('lee/lee.obj', (object) => {
        object.traverse((child) => {
            if (child instanceof THREE.Mesh) {
                child.material = createLeeMaterial();
                child.receiveShadow = true;
                child.castShadow = true;
            }
        });
        
        object.position.y = -2;
        object.position.z = 10;
        scene.add(object);
    });
}

I can load the .obj, but not the .jpg (and it exists in the folder). Mesh loaded, but not the material

I had problems once related to the hosting that I'm using: the website seems to remove special characters (like non-ASCII ones). Maybe that's breaking the images?

Upvotes: 1

Views: 159

Answers (1)

Mugen87
Mugen87

Reputation: 31026

I can't load images (JPG, PNG, or BMP) with OBJLoader.

OBJLoader can only handle OBJ assets. If you want to load textures, do it this way:

const textureLoader = new THREE.TextureLoader();
const leeTexture = textureLoader.load( 'lee/lee_diffuse.jpg' );

Upvotes: 1

Related Questions