Loading textures on vrmlloader

[385]

Not really sure whether a bug or not?

I'm loading a vrml with vrmlloader that also has textures in the same file folder, but vrmlloader shows me just a blackscreen? No textures loaded. Any Idea? I'm new in this so excuse me for this question if the way of thinking is wrong...

http://stackoverflow.com/questions/35768609/loading-textures-on-vrml-loader-with-three-js

[mrdoob]

/ping @makc

[makc]

@385 try loader.texturePath = 'your_path'... otherwise, see what does texture name actally look like in wrl file

[makc]

@385 better yet, go to dev tools network panel and see where (or if) it actually tries to load them from

[385]

Hi guys, just look at this: http://bit.ly/1L6tGGB its loading (console output), everyhting seems to fine, but cannot see anything.

[Mardonis]

i see you have camera.add(dirLight); wouldn't you need to add dirLight to the scene as scene.add(dirLight);

also i see some deprecated stuff just as fyi incase you are unable to see it. THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead. THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.

[385]

HI @Mardonis, yeah the deprecated stuff I already know this (maybe fix it later) fixed!

whole script exactly the same like: http://threejs.org/examples/webgl_loader_vrml.html

[makc]

ok I see there is peculiar file structure and texture is not caught at all, I will check.

[makc]

so, @385 's file has this format:

transparency 0
}
texture
ImageTexture
{url
"K20920039A_w0000n0000.jpg"

the file that is parsed ok in my project, to compare:

                shininess      0.4000
            }
            texture  ImageTexture  {
                url [ "Text_color_white.jpg", "D:/Shared/Project/Frametastic/Lw/Expressions/Text_color_white.jpg" ]
            }
        }

the code parsing this:

                    if ( matches = /([^\s]*){1}(?:\s+)?{/.exec( line ) ) {

                        // first subpattern should match the Node name

                        var block = { 'nodeType' : matches[ 1 ], 'string': line, 'parent': current, 'children': [], 'comment' : comment };

e.g.

so you see, @mrdoob, it relies on '{' being on the same line as 'ImageTexture' or any other node name.

[makc]

in fact, none of the file is parsed correctly, not just textures, because of this.

[385]

aaahhh nice, thank you very much for this information.

In fact that means: After '{' need a new line, and before it have to be at the same line like the node name...the same maybe also for '[' - just let me try it after I've fixed that :+1:

[385]

edited! Just look over again please :dancers: http://bit.ly/1L6tGGB

now got a warning: WN_Material is not defined. WN_KoorListe is not defined.

...but thats not right..they are defined...

[makc]

sorry @385 but it also relies on these word pairs to be on the same line:

in your file data.string is just 'Appearance {' and hence there is no match.

[makc]

@mrdoob and it should not rely on either... do you have any general purpose code in three.js (other loaders maybe) that tokenizes the string ?

[385]

fixed my friend already got the same warning

fixed: brackets,{, appearance at the same line, DEF in same line....

i try some other so...w'll see...

[385]

Now just this one: WN_KoorListe is not defined. -- (index):92

Maybe anyone has an idea

[makc]

Did not test, but maybe try

coord
USE WN_KoorListe

this on the same line?

[mrdoob]

@mrdoob and it should not rely on either... do you have any general purpose code in three.js (other loaders maybe) that tokenizes the string ?

Nope...

[shakeeltukatech]

I fixed the texture loading issue with vrmlloader.Please make this change in vrmlloader.js file put this line parent.material.map = THREE.ImageUtils.loadTexture( texturePath + textureName[ 1 ] ); instead of parent.material.map = textureLoader.load( texturePath + textureName[ 1 ] ); And don't make any change in WRL file

Plane.WRL File

DEF Plane001-1 Transform {
  translation -6.849 25.21 0
  rotation -1 0 0 -1.571
  children [
    Shape {
      appearance Appearance {
        material Material {
          diffuseColor 0.5882 0.5882 0.5882
          ambientIntensity 1.0
          specularColor 0 0 0
          shininess 0.145
          transparency 0
        }
        texture ImageTexture {
          url "box/Plane.jpg"
        }
      }
      geometry DEF Plane001-1-FACES IndexedFaceSet {
        ccw TRUE
        solid TRUE
        coord DEF Plane001-1-COORD Coordinate { point [
          -20.27 0 21.37, -10.14 0 21.37, 0 0 21.37, 10.14 0 21.37, 
          20.27 0 21.37, -20.27 0 10.68, -10.14 0 10.68, 0 0 10.68, 
          10.14 0 10.68, 20.27 0 10.68, -20.27 0 0, -10.14 0 0, 
          0 0 0, 10.14 0 0, 20.27 0 0, -20.27 0 -10.68, -10.14 0 -10.68, 
          0 0 -10.68, 10.14 0 -10.68, 20.27 0 -10.68, -20.27 0 -21.37, 
          -10.14 0 -21.37, 0 0 -21.37, 10.14 0 -21.37, 20.27 0 -21.37]
        }
        normal Normal { vector [
          0 1 0, ] }
        normalPerVertex TRUE
        texCoord DEF Plane001-1-TEXCOORD TextureCoordinate { point [
          0 0, 0.25 0, 0.5 0, 0.75 0, 1 0, 0 0, 0.25 0, 0.5 0, 
          0.75 0, 1 0, 0 0, 0.25 0, 0.5 0, 0.75 0, 1 0, 0 0.25, 
          0.25 0.25, 0.5 0.25, 0.75 0.25, 1 0.25, 0 0.5, 0.25 0.5, 
          0.5 0.5, 0.75 0.5, 1 0.5, 0 0.75, 0.25 0.75, 0.5 0.75, 
          0.75 0.75, 1 0.75, 0 1, 0.25 1, 0.5 1, 0.75 1, 1 1]
        }
        coordIndex [
          5, 0, 6, -1, 1, 6, 0, -1, 6, 1, 7, -1, 2, 7, 1, -1, 7, 2, 8, -1, 
          3, 8, 2, -1, 8, 3, 9, -1, 4, 9, 3, -1, 10, 5, 11, -1, 
          6, 11, 5, -1, 11, 6, 12, -1, 7, 12, 6, -1, 12, 7, 13, -1, 
          8, 13, 7, -1, 13, 8, 14, -1, 9, 14, 8, -1, 15, 10, 16, -1, 
          11, 16, 10, -1, 16, 11, 17, -1, 12, 17, 11, -1, 17, 12, 18, -1, 
          13, 18, 12, -1, 18, 13, 19, -1, 14, 19, 13, -1, 20, 15, 21, -1, 
          16, 21, 15, -1, 21, 16, 22, -1, 17, 22, 16, -1, 22, 17, 23, -1, 
          18, 23, 17, -1, 23, 18, 24, -1, 19, 24, 18, -1]
        texCoordIndex [
          15, 10, 16, -1, 11, 16, 10, -1, 16, 11, 17, -1, 12, 17, 11, -1, 
          17, 12, 18, -1, 13, 18, 12, -1, 18, 13, 19, -1, 14, 19, 13, -1, 
          20, 15, 21, -1, 16, 21, 15, -1, 21, 16, 22, -1, 17, 22, 16, -1, 
          22, 17, 23, -1, 18, 23, 17, -1, 23, 18, 24, -1, 19, 24, 18, -1, 
          25, 20, 26, -1, 21, 26, 20, -1, 26, 21, 27, -1, 22, 27, 21, -1, 
          27, 22, 28, -1, 23, 28, 22, -1, 28, 23, 29, -1, 24, 29, 23, -1, 
          30, 25, 31, -1, 26, 31, 25, -1, 31, 26, 32, -1, 27, 32, 26, -1, 
          32, 27, 33, -1, 28, 33, 27, -1, 33, 28, 34, -1, 29, 34, 28, -1]
        normalIndex [
          0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 
          0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 
          0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 
          0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 
          0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 
          0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 
          0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 
          0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, ]
        }
    }
  ]
} 

[makc]

put this line parent.material.map = THREE.ImageUtils.loadTexture( texturePath + textureName[ 1 ] ); instead of parent.material.map = textureLoader.load( texturePath + textureName[ 1 ] );

and this works because ... ?

[shakeeltukatech]

yes it works

[gkjohnson]

This issue is a bit old and I'm not sure if this is exactly related but I'm having trouble loading the textures with my VRML file, as well. The ImageTexture node is formed like so:

texture 
ImageTexture {
    repeatS FALSE
    repeatT FALSE
    url "textureName.jpg"
}

but the VRMLLoader expects url to be the first line:

if ( child.nodeType === 'ImageTexture' ) {

    var textureName = /"([^"]+)"/.exec( child.children[ 0 ] );

    if ( textureName ) {

        // ...

    }

}

According a spec description I found here these are all valid attributes but it's unclear to me whether or not order is supposed to be important. It also looks like the loader doesn't respect the texture repeat attributes.

Is this a bug? Should I create a different issue?

[makc]

@gkjohnson the situation is that original parser was over-sensitive to crlf, and had to be tweaked every time some little thing did not work. so another person wrote new parser (see one of the linked issues above). that parser was not conforming to 3js parsers style, so it was not merged (afair). but it might work for your file

[gkjohnson]

@makc Thanks! I did see the other PR and have found other ways to work around the problem. Is the suggestion that this shouldn't or won't be fixed, then? Looking back through the thread it seems that the issue I'm mentioning is a different problem. If it can be agreed that order is not important in the VRML spec and that the attribute order-dependent the behavior in the loader is a bug I can try to make a PR to address the problem in the ImageTexture case!

[makc]

Is the suggestion that this shouldn't or won't be fixed, then?

I can't speak for 3js team. But as someone who edited this parser before, I wouldn't go there again.

I can try to make a PR

I don't want to sound like I'm stopping you. By all means, go for it :no_mouth:

[Mugen87]

@gkjohnson Do it if you like :innocent: . The thing is....it's in general not great how VRMLLoader parses a wrl file. An approach similar to this project would be more robust: https://github.com/bartmcleod/VrmlParser