Three.js | applying texture from Blender model

Question

I'm using a free 3d model from turbosquid. This model is using a texture that looks like this:

It does look good in Blender:

But once exported to three.js, it seems that the texture does not follow the uv map:

Here is the code i'm using:

var loader = new THREE.JSONLoader();
loader.load('json/Ship.json', function ( geometry, materials ) {
        ship = new THREE.Mesh(geometry, materials[0]);
        scene.add(ship);
    }
);

And here is the json I get once exported from Blender:

What am I missing? Thanks a lot for your help!

You normally don't need to load the textures manually. Try to create your mesh like this ship = new THREE.Mesh(geometry, materials[0]);. So don't create a new material but use the parameter of the callback. — Mugen87
@Mugen87 You're absolutly right, I've edited my question that it's less confusing. I still get the same result though :/ — TheCat
Can you make a try with this GLTFExporter. You can use GLTFLoader in order to load the asset. The JSON Blender exporter is somewhat buggy... — Mugen87
@Mugen87 The GLTFExporter gives me this error : "three.min.js:480 THREE.Object3D.add: object not an instance of THREE.Object3D.". I cant find a way to properly export the scene from Blender, what could I be missing? — TheCat
Are you able to share the .blend file? May want to try KhronosGroup/glTF-Blender-Exporter as well. — Don McCurdy

Don McCurdy Don McCurdy · Accepted Answer · 2018-05-07T17:19:59

There are some minor complexities in this model, which I think are causing issues for Blender exporters. They're not "wrong", but they're hard for exporters to handle without cleanup. You can fix those manually (open the .blend file in Blender, apply modifiers, remove all textures except the diffuse) but the easiest path is probably converting the OBJ version provided by Turbosquid to glTF. Going to the Cesium OBJ->glTF converter (or OBJ2GLTF if you need something programmatic) and dragging in the OBJ/MTL/texture will give the right result. NOTE: you'll need to move the sh3.jpg file into the same directory as the MTL file; it shouldn't be in the Textures/ folder.

Result on https://gltf-viewer.donmccurdy.com/ — using three.js r92 and THREE.GLTFLoader.

Three.js | applying texture from Blender model

1 Answers