This plane is black and texture cannot be displayed

Questions
1

I want to add a chess texture into a plane and rotate the plane 90° around x axis. But the plane turn to black and can’t see any texture. If I change the rotating angle, such as to 30°, it seems work and texture show. So why this happen? And what should do if I want the texture to be displayed at 90°? Here is my core code:

  // ball
  ballMesh = new THREE.Mesh(
    new THREE.SphereGeometry(ballRadius, 16, 8),
    new THREE.MeshLambertMaterial({
      color: 0xffff00
    })
  );
  ballMesh.position.y = ballRadius;
  scene.add(ballMesh);

  // Texture
  loader = new THREE.TextureLoader();
  loader.load(
    './chess.png',  // add texture img from local file
    function(texture) {
      // repeat texture
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.repeat.set(4, 4);
      // Plane
      plane = new THREE.Mesh(
        new THREE.PlaneGeometry(5, 5),
        new THREE.MeshLambertMaterial(
          {
            map: texture,
            side: THREE.DoubleSide
          }
        )
      );
      plane.rotation.x =  Math.PI/2;
      scene.add(plane);
      renderer.render(scene, camera);
    }
  );

this is the init situation (code: plane.rotation.x = 0):
image

and the texture show at 30° (code: plane.rotation.x = Math.PI/6):
image

and the plane turns to black at 90° (code: plane.rotation.x = Math.PI/2):
image

2

Try to add an ambient light to your scene. I assume your plane just receives almost no light at shallow angles.

3

Thank you for your comment! Problem solved after add an ambient light :grin: