THREE.js - Cannot read property 'lib' of undefined (THREE.ShaderUtils.lib["normal"])

2
votes

I'm working through the exercises found in the WebGL getting started book by Oreilly.

The following line causes a run-time error. I googled around and don't see anyone else have the issue, so what am I doing wrong?

var specularMap= THREE.ImageUtils.loadTexture("WebGLBook/images/earth_specular_2048.jpg");

var shader   = THREE.ShaderUtils.lib[ "normal" ]; <-- fails
var uniforms = THREE.UniformsUtils.clone(shader.uniforms);

uniforms['tNormal'].texture   = normalMap; 
uniforms['tDiffuse'].texture  = surfaceMap;

The noted lines fails w/the following error:

Uncaught TypeError: Cannot read property 'lib' of undefined solar-system-spec-map.html:60
Earth.createGlobe solar-system-spec-map.html:60
Earth.init solar-system-spec-map.html:51
EarthApp.init solar-system-spec-map.html:33
(anonymous function) solar-system-spec-map.html:93
deferred.resolveWith jquery-1.6.4.js:1016
jQuery.extend.ready jquery-1.6.4.js:437
DOMContentLoaded

What's also strange about this is that "ShaderUtils" is not listed in the THREE.js documentation ... http://mrdoob.github.com/three.js/docs/55/

What's going on?!

2
javascriptthree.jswebgl

2 Answers

9
votes

The naming convention changed, this should work now

var shader = THREE.ShaderLib[ "normalmap" ];
4
votes

From the github repo:

"The book's code works if you use the older Three.js in the libs folder. Starting from r50 upwards, it's much simpler, just set the maps as properties of MeshPhongMaterial, like this:

var material = new THREE.MeshPhongMaterial({
    map: earthSurfaceMap,
    normalMap: earthNormalMap,
    specularMap: earthSpecularMap});

That's it, no need of uniforms or computeTangents()."

This worked!