1

I am new to 3D Technology by referring few sited I have managed to get some code running to render 3D object. The object was generated by 3D Software Maya. I received these files – .obj (object file) .mtl (material file) .png (texture files).

Using ‘three.js’ I tried to render the object in browser and for that I used three approaches as given below – 1. OBJLoader and explicitly load texture file. 2. OBJMTLLoader 3. JSON loader by converting .obj file into .js. In all the cases 3D object was rendered successfully but common problem I faced is that it is not at all loading its ‘texture’. Object file, Material file and Texture file all are at same location. It is observed that shading is applied on the object so I can see some parts colourful but the ‘texture’ part (png files) is not getting applied on the object so partly it looks black and dark. There is no error as browser doesn’t show any.

Snippets using JSON loader –

var oLoader = new THREE.JSONLoader();
 oLoader.load('Main_unit_01.js', function (geometry, materials) {

 // get original materials
 var material = new THREE.MeshFaceMaterial(materials);

  //var material = new THREE.MeshPhongMaterial();
  //material.map = new THREE.ImageUtils.loadTexture(
  //         "final_texture_v01.png");
  var mesh = new THREE.Mesh(geometry, material);
  mesh.scale.set(10, 10, 10);
  Test.scene.add(mesh); 

OBJMTL loader needs material file, using this approach it is observed that it loads both object and material file but not texture, here is a small part information present in MTL file –

newmtl phongE1SG
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
map_Kd final_texture_v01.png
Ni 1.00
Ks 0.50 0.50 0.50

Here is the some part of information present in .js file which was the result of .obj to .js conversion –

"DbgColor" : 238,
"DbgIndex" : 3,
"DbgName" : "phongE1SG",
"colorAmbient" : [0.0, 0.0, 0.0],
"colorDiffuse" : [0.0, 0.0, 0.0],
"colorSpecular" : [0.5, 0.5, 0.5],
"illumination" : 4,
"mapDiffuse" : "final_texture_v01.png",
"opticalDensity" : 1.0

In both above material and js files we can see that ‘.png’ file has been mentioned with some tag. After reading some suggestions given on some blogs I tried to explicitly set the relative path into these files but no success. I have checked most of the blog here and applied most of suggestion but it didn't work. Also I have checked in "github.com" for help but could not get any help. None of the browser gives any error like particular file not found. Here are the few links which I have followed. 1. three.js JSONLoader Material Not Showing 2. Loading textures with JSONloader

I am not able to post more than 2 links but I have followed so many sites.

Please suggest if any solution to get texture on the object.

1 Answer 1

0

The MTL file Kd attribute corresponds to the js attribute colorDiffuse. The Ka attribute is the colorAmbient. As you can see they are both 0. That is why you cannot see the model. Try to make the ambient term (0.2, 0.2, 0.2) and the diffuse term (0.8, 0.0, 0.8).

Sign up to request clarification or add additional context in comments.

1 Comment

It works, It means there was some problem in exported maya file.you helped a lot cause I spend almost a week on that :-).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.