I get black using meshNormalMaterial with bufferGeometry

Questions
,
1

Why do I get black using meshNormalMaterial with this bufferGeometry?

  "use strict";
  let scene, camera, renderer, geometry, material, mesh;
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 40, 800/600, 1, 10 );
  camera.position.z = 5;
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( 800, 600 );
  renderer.setClearColor(0xcccccc);
  document.body.appendChild( renderer.domElement );

  let apositions = [ rand1(), rand1(), rand1(), // three vertices,
                     rand1(), rand1(), rand1(), // one triangle
                     rand1(), rand1(), rand1() ];
  geometry = new THREE.BufferGeometry();
  geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( apositions, 3 ) );
  material = new THREE.MeshNormalMaterial( { side:THREE.DoubleSide } );
  mesh = new THREE.Mesh( geometry, material );
  scene.add(mesh);

  renderer.render( scene, camera );
  
function rand1() { // between -1 and 1
  return 2*Math.random()-1;
}
2

You need normals

.computeVertexNormals( );
2 Likes
3

{ thumb up } thanks