title: How to cast / recieve shadow in threeJs
body: <p>I'm pretty new to threeJS and i wanted ton have the shadow of the torus to be casted on the PlaneGeometry behind it.</p>
  <p>I tried to play with <code>.castShadow</code> &amp; <code>.receiveShadow</code> but with no result</p>
  <p>Could you explain what I did wrong ?</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-js lang-js prettyprint-override"><code>const canvas = document.getElementById("torus");
  // ____RENDERER ___
  const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true,
    alpha: true
  });
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    500
  );
  camera.position.set(0, 0, 30);
  camera.lookAt(0, 0, 0);
  
  const textureLoader = new THREE.TextureLoader();
  const normalTexture = textureLoader.load(
    "https://thumbs.dreamstime.com/b/normal-map-old-rough-loose-concrete-surface-normal-map-old-rough-loose-concrete-surface-texture-use-d-programs-d-195202276.jpg"
  );
  
  const scene = new THREE.Scene();
  
  // _____Torus____
  const geometry = new THREE.TorusGeometry(4, 1, 16, 100);
  const material = new THREE.MeshStandardMaterial({
    metalness: 0.7,
    roughness: 0.2,
    color: new THREE.Color(0xf1f1f1),
    normalMap: normalTexture
  });
  const torus = new THREE.Mesh(geometry, material);
  torus.castShadow = true; //default is false
  torus.receiveShadow = false;
  scene.add(torus);
  
  // _____Plane______
  const planeGeometry = new THREE.PlaneGeometry(20, 20, 32);
  const planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xF0F0F0,
    side: THREE.DoubleSide
  });
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.position.z = -4;
  plane.receiveShadow = true;
  scene.add(plane);
  
  //______Light
  const pointLight = new THREE.PointLight(0xffffff, 1, 100);
  pointLight.position.set(0, 5, 6);
  pointLight.intensity = 2;
  pointLight.castShadow = true;
  
  pointLight.shadow.mapSize.width = 512;
  pointLight.shadow.mapSize.height = 512;
  pointLight.shadow.camera.near = 0.5;
  pointLight.shadow.camera.far = 500;
  
  scene.add(pointLight);
  const pointLightHelper = new THREE.PointLightHelper(pointLight, 1);
  scene.add(pointLightHelper);
  
  
  
  
  function createGUI() {
    const lightColor = { color: "#ffffff" };
    var gui = new dat.GUI();
  
    var gui = gui.addFolder("PointLight 1");
  
    gui.add(pointLight.position, "x").min(-10).max(10).step(0.01);
    gui.add(pointLight.position, "y").min(-10).max(10).step(0.01);
    gui.add(pointLight.position, "z").min(-10).max(10).step(0.01);
    gui.add(pointLight, "intensity").min(0).max(10).step(0.01);
    gui.addColor(lightColor, "color").onChange(function () {
      pointLight.color.set(lightColor.color);
    });
  
    gui.open();
  
  }
  
  const animate = function () {
    requestAnimationFrame(animate);
  
    torus.rotation.x += 0.01;
  
    renderer.render(scene, camera);
  };
  
  renderer.setAnimationLoop(() =&gt; {
    renderer.render(scene, camera);
  });
  
  window.addEventListener("load", init, false);
  function init() {
    createGUI();
    animate();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="torus"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>