Texture not applying to model

[GoogleCodeExporter]

What steps will reproduce the problem?

1. Texture file not applying to .obj file
2. Have attempted .png / .jpg versions of the file

---------------

I cannot get the texture to apply to the model in the .obj file I am using. I 
have verified the texture works using a variety of other 3d modeling tools 
(Blender, Verold, etc).

---------------

Dev URL: http://jaqson.github.io/amen-3d-spect/

JSFiddle: http://jsfiddle.net/jeremyccrane/Z9bFY/9/

---------------

Javascript Code:

        var canvas;
    var viewer;

    function init() {

        canvas = document.getElementById('cv');
        viewer = new JSC3D.Viewer(canvas);
        viewer.setParameter('SceneUrl', '3d/New_Brain.obj');
        viewer.setParameter('InitRotationX', 0);
        viewer.setParameter('InitRotationY', 0);
        viewer.setParameter('InitRotationZ', 0);
        //viewer.setParameter('ModelColor', '#FFFFFF');
        viewer.setParameter('BackgroundColor1', '#000000');
        viewer.setParameter('BackgroundColor2', '#000000');
        viewer.setParameter('RenderMode', 'standard');
        viewer.setParameter('ModelUrl', '3d/New_Brain.obj');
        viewer.setParameter('MipMapping', 'on');
        viewer.setParameter('Renderer', 'webgl');
        viewer.setParameter('Definition', 'standard');
        viewer.init();
        viewer.update();

        //var model = new JSC3D.Model;

        var textures = [];
        //alert('pre texture fire');
        var tex = new JSC3D.Texture;
        tex.onready = function() {
            //alert('texture firing');
            viewer.setTexture(this);
            viewer.update();
        };
        tex.createFromImage('3d/uvmap.jpg');

    }

Original issue reported on code.google.com by jer...@jaqson.com on 28 Jul 2014 at 5:27

[GoogleCodeExporter]

Hi, Jeremy:

Nice experiment!

I suggest you use an mtl file to define the materials as well as the texture 
maps for the obj model. Jsc3d's build-in obj loader can deal with it 
automatically.

If you are to load and apply textures manually, certainly it can be done but 
you have to take care of more details. Be aware that both the model and the 
texture are loaded asynchronously. The right time to apply texture is when both 
of them are ready.

In my opinion, part of your code should be rewritten as following:

  var theTex = new JSC3D.Texture;
  theTex.onready = function() {
    console.info('texture has been loaded successfully.');
    // wait until the model is also ready and apply our texture then
    var applyTexture = function() {
      var scene = viewer.getScene();
      // check if the model is done
      if (scene && scene.getChildren().length > 0) {
        // This assumes there's only a single mesh!
        // It's true for your model.
        var mesh = scene.getChildren()[0];
        mesh.setTexture(theTex);
        console.info('texture has been applied.');
        // tell the viewer to render a new frame
        viewer.update();
      } else {
        // if the model is not ready yet, wait a short interval and check it again
        setTimeout( applyTexture, 1000 );
      }
      applyTexture();
    };
  };
  texTex.createFromUrl('3d/uvmap.jpg');
  console.info('begin to load texture ...');

Besides, 'standard' is not a valid value for the startup parameter 
'RenderMode', you can use either 'texture', 'textureflat' or 'texturesmooth'. 
The meaning of these values can be found here: 
http://code.google.com/p/jsc3d/wiki/StartupParameters. You can also refer to 
the API documentation to get details of the methods used in above code: 
http://jsc3d.googlecode.com/svn/trunk/jsc3d/docs/index.html.

Original comment by Humu2...@gmail.com on 29 Jul 2014 at 7:34

[GoogleCodeExporter]

Thank you for the assistance!!

It worked perfectly. I did have to move one item on your recommended code - run 
applyTexture(); outside of itself. I have attached the updated and functioning 
javascript below:

------------------

              var theTex = new JSC3D.Texture;
          theTex.onready = function() {
            console.info('texture has been loaded successfully.');
            // wait until the model is also ready and apply our texture then
              var applyTexture = function() {
                  var scene = viewer.getScene();
                  // check if the model is done
                  if (scene && scene.getChildren().length > 0) {
                    // This assumes there's only a single mesh!
                    // It's true for your model.
                    var mesh = scene.getChildren()[0];
                    mesh.setTexture(theTex);
                    console.info('texture has been applied.');
                    // tell the viewer to render a new frame
                    viewer.update();
                  } else {
                    // if the model is not ready yet, wait a short interval and check it again
                    setTimeout( applyTexture, 1000 );
                  }
                };
              applyTexture();
          };
          theTex.createFromUrl('3d/uvmap.jpg');
          console.info('begin to load texture ...');

------------------

Thanks again!

- Jeremy

Original comment by jer...@jaqson.com on 29 Jul 2014 at 5:43

[GoogleCodeExporter]

The final result looks wonderful!

Original comment by Humu2...@gmail.com on 30 Jul 2014 at 11:05