I have the following code that draws a diamond in Three.js:

var material = new THREE.MeshPhongMaterial({color: 0x55B663, side:THREE.DoubleSide});
  var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(0, 1, 0));
  geometry.vertices.push(new THREE.Vector3(0, -1, 0));
  geometry.vertices.push(new THREE.Vector3(-1, 0, -1));
  geometry.vertices.push(new THREE.Vector3(1, 0, -1));
  geometry.vertices.push(new THREE.Vector3(1, 0, 1));
  geometry.vertices.push(new THREE.Vector3(-1, 0, 1));
  geometry.faces.push(new THREE.Face3(0, 4, 5));
  geometry.faces.push(new THREE.Face3(0, 3, 4));
  geometry.faces.push(new THREE.Face3(0, 2, 5));
  geometry.faces.push(new THREE.Face3(0, 2, 3));
  geometry.faces.push(new THREE.Face3(1, 4, 5));
  geometry.faces.push(new THREE.Face3(1, 3, 4));
  geometry.faces.push(new THREE.Face3(1, 2, 5));
  geometry.faces.push(new THREE.Face3(1, 2, 3));

And this is how I set up the lighting:

  var light = new THREE.PointLight(0xffffff);
  light.position.set(100,200,100);
  scene.add(light);
  light  = new THREE.DirectionalLight(0xffffff, 1.0);
  light.position.set(0, 0, 0);
  scene.add(light);
  light  = new THREE.AmbientLight(0x404040);
  scene.add(light);

But when the scene is rendered - only the ambient lighting is applied:

However, as soon as I change my custom geometry to a standard cube - it all works:

var geometry = new THREE.BoxGeometry(1, 1, 1);

I am lost. Why doesn't the lighting work with my custom geometry?

I have the following code that draws a diamond in Three.js:

var material = new THREE.MeshPhongMaterial({color: 0x55B663, side:THREE.DoubleSide});
  var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(0, 1, 0));
  geometry.vertices.push(new THREE.Vector3(0, -1, 0));
  geometry.vertices.push(new THREE.Vector3(-1, 0, -1));
  geometry.vertices.push(new THREE.Vector3(1, 0, -1));
  geometry.vertices.push(new THREE.Vector3(1, 0, 1));
  geometry.vertices.push(new THREE.Vector3(-1, 0, 1));
  geometry.faces.push(new THREE.Face3(0, 4, 5));
  geometry.faces.push(new THREE.Face3(0, 3, 4));
  geometry.faces.push(new THREE.Face3(0, 2, 5));
  geometry.faces.push(new THREE.Face3(0, 2, 3));
  geometry.faces.push(new THREE.Face3(1, 4, 5));
  geometry.faces.push(new THREE.Face3(1, 3, 4));
  geometry.faces.push(new THREE.Face3(1, 2, 5));
  geometry.faces.push(new THREE.Face3(1, 2, 3));

And this is how I set up the lighting:

  var light = new THREE.PointLight(0xffffff);
  light.position.set(100,200,100);
  scene.add(light);
  light  = new THREE.DirectionalLight(0xffffff, 1.0);
  light.position.set(0, 0, 0);
  scene.add(light);
  light  = new THREE.AmbientLight(0x404040);
  scene.add(light);

But when the scene is rendered - only the ambient lighting is applied:

However, as soon as I change my custom geometry to a standard cube - it all works:

var geometry = new THREE.BoxGeometry(1, 1, 1);

I am lost. Why doesn't the lighting work with my custom geometry?

• javascript
• 3d
• three.js

1 Answer 1

It's because you haven't specified normals for your custom figure. You also need to do:

geometry.puteFaceNormals();
geometry.puteVertexNormals();