Three.js Image Textures and Shininess

‹prev | My Chain | next›

I am not quite satisfied with the image / face that I made last night for my
Three.js-based avatar island. It was a bit hard to see and did not quite line like a "real" face.

First up, I try a different face picture:

I am still adding it and a point light to the avatar's head just as I did yesterday:

  var img = new Image();
  var texture = new THREE.Texture(img);
  img.onload = function () { texture.needsUpdate = true; };
  img.src = 'face.png';
  texture.needsUpdate = true;

  var head_material = new THREE.MeshPhongMaterial({map: texture});
  var head_geometry = new THREE.SphereGeometry(75);
  var head = new THREE.Mesh(head_geometry, head_material);
  head.position.y = (100 + 35) * .8;
  head.rotation.y = -Math.PI/2;
  avatar.add(head);

  var light = new THREE.PointLight(0xffffff, 2);
  light.position.set(25, 150, 500);
  avatar.add(light);

Hopefully that will show up a little better. And it does:

But there is still a very much dark-side of the head kind of thing going on here. It is even more pronounced when the avatar is walking to the side:

So I add an "ambient" light to the scene. This ought to illuminate everything, including the front of the face and the back of the head. I had tried the ambient light the other day when I first messed about with Three.js lights and materials, but I could not quite get it working. Hopefully I won't have any such trouble tonight.

So I add it:

  scene.add(new THREE.AmbientLight(0xffffff));

I think I would like it a little shinier. Somehow that seems like it would have more depth.

So I make the material shiny and add a point light next to the head:

  var img = new Image();
  var texture = new THREE.Texture(img);
  img.onload = function () { texture.needsUpdate = true; };
  img.src = 'face.png';
  texture.needsUpdate = true;

  var head_material = new THREE.MeshPhongMaterial({
    map: texture,
    shininess: 40
  });
  var head_geometry = new THREE.SphereGeometry(75);
  var head = new THREE.Mesh(head_geometry, head_material);
  head.position.y = (100 + 35) * .8;
  head.rotation.y = -Math.PI/2;
  avatar.add(head);

  var light = new THREE.PointLight(0xffffff, 10);
  light.position.set(50, 300, 0);
  avatar.add(light);

Which results in:

I think that will about do it for avatar island—at least on Three.js. I will probably let my kids mess about with the face. If nothing else, that seems like a decent template for them to put faces in the right place.


Day #465