title: Three.js - Why is the shadow of these items looking like this?
body: <p>I'm learning about three.js.</p>
  
  <p>I make a example to practise but the shadow of the items is looking wrong or stranger.</p>
  
  <p><a href="https://i.stack.imgur.com/pfg6E.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pfg6E.jpg" alt="This is my problem: the shadows"></a></p>
  
  <p>Should be like this (this image is of a old tutorial):</p>
  
  <p><a href="https://i.stack.imgur.com/Ewhpr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ewhpr.jpg" alt="Good shadows"></a></p>
  
  <p>And the code is this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.js"&gt;&lt;/script&gt;
  
  &lt;div id="WebGL-salida"&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
    $(function() {
      var scene = new THREE.Scene();
  
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  
      var renderer = new THREE.WebGLRenderer();
  
      var color = new THREE.Color("rgb(200, 250, 250)");
      renderer.setClearColor(new THREE.Color(color));
      renderer.setSize(window.innerWidth, window.innerHeight);
  
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
  
  
      var ejesAyuda = new THREE.AxesHelper(20); //son los ejes de ayuda creo
      scene.add(ejesAyuda);
  
      var planeGeometry = new THREE.PlaneGeometry(60, 20);
  
      var planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xcccccc
      });
  
      var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  
      plane.receiveShadow = true;
  
  
      plane.rotation.x = -0.5 * Math.PI; // -90º
      plane.position.x = 15;
      plane.position.y = 0;
      plane.position.z = 0;
  
      scene.add(plane);
  
  
      var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
  
  
      var cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0xff0000
      });
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  
      cube.castShadow = true; //con esto le indicamos que queremos que emita sombra
  
      cube.position.x = -4;
      cube.position.y = 3;
      cube.position.z = 0;
  
      scene.add(cube);
  
      var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
      var sphereMaterial = new THREE.MeshLambertMaterial({
        color: 0x7777ff
      });
      var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  
      sphere.castShadow = true; //con esto le indicamos que queremos que emita sombra
  
      sphere.position.x = 20;
      sphere.position.y = 4;
      sphere.position.z = 2;
      scene.add(sphere);
  
      camera.position.x = -30;
      camera.position.y = 40;
      camera.position.z = 30;
      camera.lookAt(scene.position);
  
      var spotLight = new THREE.SpotLight(0xffffff, 0.8);
      spotLight.position.set(-40, 60, -10);
      spotLight.castShadow = true;
      scene.add(spotLight);
  
      $("#WebGL-salida").append(renderer.domElement);
      renderer.render(scene, camera);
    });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And please, if you know about a good beginner three.js tutorial or course (I don't care if it isn't free), tell me, because i'm a bit lost in this and like web developer i'm interested in this webGL world :)</p>