Texture doesn't load correctly

Questions
,
1

Hi there,
I want to load an obj image with texture but the texture doesn’t load.
Here’s my code:

let materialLoader = new MTLLoader();
let objectLoader = new OBJLoader();
materialLoader.setPath(‘rose/’)
materialLoader.load(‘rose.mtl’, function(materials){
materials.preload();
objectLoader.setMaterials(materials);
objectLoader.setPath(‘rose/’);
objectLoader.load(‘rose.obj’, function(mesh){
scene.add(mesh);
document.querySelector(‘h1’).style.display = ‘none’;
});
});

and also I set the alpha: true for transparent background.

Here’s the result:
photo_2020-06-11_23-01-06

I’ll be grateful for your help

2

Try it this way. :slightly_smiling_face:
From the Collection of examples from discourse.threejs.org 2018
loadOBJ
Links in source code.

3

When I set my image, the default example doesn’t work though.

4

Have you noticed that textures cannot be loaded locally so easily?

See https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

and https://hofk.de/main/discourse.threejs/
… Local use of the examples … at the bottom

5

yes, I run the default example and everything works fine.
but when I change the image, the texture doesn’t load.

6

Hm, not judging by this. :thinking:

Can you make a live example ( jsfiddle, codepen, … )

7

Yes of course, Here’s my code:
https://jsfiddle.net/amir04lm26/w2dj4Lk8/
But I couldn’t upload the assets because of the large size. So if you want them, I’ll upload them on an upload center.

8

And this is the iamge:
https://free3d.com/3d-model/rose-31675.html

I added the files from the image folder that contains the image’s file and texture, to a local folder by the name of rose.

9

I downloaded the rose and used it in my example. Result - black rose.

Correct in Win 10 3D viewer.

From there - tried to open 3D with Paint - error/selection necessary for texture.

I am not at all an expert in creating and loading models. Maybe someone else can help? :confused:

10

**[quote=“Amir_zare, post:1, topic:16131, full:true”]
Hi there,
I want to load an obj image with texture but the texture doesn’t load.
Here’s my code:

let materialLoader = new MTLLoader();
let objectLoader = new OBJLoader();
materialLoader.setPath(‘rose/’)
materialLoader.load(‘rose.mtl’, function(materials){
materials.preload();
objectLoader.setMaterials(materials);
objectLoader.setPath(‘rose/’);
objectLoader.load(‘rose.obj’, function(mesh){
scene.add(mesh);
document.querySelector(‘h1’).style.display = ‘none’;
});
});

and also I set the alpha: true for transparent background.

Here’s the result:
photo_2020-06-11_23-01-06

I’ll be grateful for your help
[/quote]

**

Can anyone help??? :thinking:

11

Solved at GitHub:

12

Thanks, It’s working.