normal mapping

Here we show side by side a model with just a diffuse texture versus one with diffuse, specular, normal map, and ambient occlusion textures. The additional textures were all guessed from the diffuse textures using the default settings of the free ShaderMap tool. Expending effort to produce better additional textures would no doubt result in a prettier model.

In terms of code, this example is essentially a combination of previous ones. We load two different models and create an orbiting camera. That's it.

1-2-three
example 4: normal mapping

<!DOCTYPE html>
<html>
<head>
<title>example 4: normal mapping</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/three/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">

function init() {  
  var canv = document.getElementsByTagName("canvas")[0];
  var w = canv.clientWidth;
  var h = canv.clientHeight;

var renderer = new THREE.WebGLRenderer({canvas:canv});
  renderer.setSize( w, h );
  renderer.setClearColor(new THREE.Color(0xeeeeee), 1);

var scene = new THREE.Scene();
  
  var camera = new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  scene.add(camera);
  
  // Camera looks toward negative z with y up
  camera.position.set( 5, 5, 75 );
  
  var control = new THREE.OrbitControls(camera,canv);
  
  var loader = new THREE.ObjectLoader(  );
  
  var onScene = function(scn) {
    var mesh = scn.getObjectByName("A10");
    mesh.material.shininess = 3;
    scene.add( mesh );
    scene.add( scn.getObjectByName("A10-Spec") );
    requestAnimationFrame(render);
  };
  loader.load( "models/A10/TwoA10s.json", onScene );

var light = new THREE.DirectionalLight( 0xFFFFFF );
  light.position.set( 0, 1, 0 );
  scene.add( light );
  
  var lightAmb = new THREE.AmbientLight( 0xDDDDDD );
  scene.add( lightAmb );
  
  var clock = new THREE.Clock();
  
  var render = function() {
    var dt = clock.getDelta();
    control.update(dt);
    renderer.render(scene,camera);
    requestAnimationFrame(render);
  };
}
  
window.onload = init;
window.onresize = init;
</script>
</head>
<body><canvas style="width:100%;height:95%;border:1px gray solid;"></body>
</html>

normal mapping

1-2-threeexample 4: normal mapping

1-2-three
example 4: normal mapping