CODEWITHSUNDEEP
javascriptthree.js
novs12
novs12

Reputation: 667

THREE.js Imported model doesn't apply face textures

I'm trying to import a model that was exported from blender using the THREEJS exporter. So far the model loads and appears in my scene with the materials being applied correctly (Car is yellow as it's supposed to be and the glass is transparent as it's supposed to be.)

But it's not applying my textures to the car which are saved in .tga form.

If I DO NOT include the textures in my server directory where the model is i will get this error:

http://novsstudio.com/race/model//wheel.tga 404 (Not Found)

Notice it has two /'s after model. I'm not sure if this is my problem, and I don't know how to fix it.

But when I upload my textures to /race/model/ all the textures are DOWNLOADED as seen in the Network tab in Chrome but are not applied to the model. I believe maybe threejs cant find them because it's looking for them in /race/model//?

Here's my code to import the model:

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "model/car.js", addModelToScene );
// addModelToScene function is called back after model has loaded

var ambientLight = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambientLight);
ambientLight.position.set(0, 500, 200);



function addModelToScene( geometry, materials ) 
{
    var material = new THREE.MeshFaceMaterial( materials );
    android = new THREE.Mesh( geometry, material );
    android.scale.set(10,10,10);
    scene.add( android );
}

To see a live example of what it looks like now go to http://novsstudio.com/race You can also view the source there too to get the full source and you can also browse my directories to see where i have all my files at http://novsstudio.com/race/model

Thank for the help let me know if you need more information.

Tip: You can move the camera at my website by clicking and holding/dragging to see the whole model.

Upvotes: 2

Views: 1909

Answers (1)

WestLangley
WestLangley

Reputation: 104783

See the TGALoader located in the examples/js/loaders directory.

Example: http://threejs.org/examples/webgl_materials_texture_tga.html.

Alternatively, you can convert you TGA files to PNGs and modify the JSON file accordingly.

EDIT: Updated to three.js r.68

Upvotes: 5

Related Questions