title: 3D model not casting shadows in ThreeJS
body: <p>I am importing a <em>glTF</em> model into <a href="https://threejs.org" rel="nofollow noreferrer">ThreeJS</a> and have a <a href="https://threejs.org/docs/#api/en/geometries/PlaneGeometry" rel="nofollow noreferrer">PlaneGeometry</a> acting as a ground. I need the model to cast shadows onto the plane/ground.</p>
  <p><a href="https://i.stack.imgur.com/JMyZz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JMyZz.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/kIIOsm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kIIOsm.png" alt="enter image description here" /></a></p>
  <p>I've tried enabling</p>
  <pre><code>renderer.shadowMap.enabled = true;
  </code></pre>
  <p>on</p>
  <pre><code>const renderer = new THREE.WebGLRenderer({ alpha: true });
  </code></pre>
  <p>I also have 2 lights:</p>
  <pre><code>const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
  hemiLight.position.set(0, 10, 0);
  scene.add( hemiLight );
  const dirLight = new THREE.DirectionalLight(0xffffff);
  dirLight.position.set(0, 0, 10);
  dirLight.castShadow = true;
  dirLight.shadow.camera.top = 200;
  dirLight.shadow.camera.bottom = -200;
  dirLight.shadow.camera.left = - 200;
  dirLight.shadow.camera.right = 200;
  dirLight.shadow.camera.near = 0.1;
  dirLight.shadow.camera.far = 500;
  scene.add( dirLight );
  </code></pre>
  <p>Final code</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-css lang-css prettyprint-override"><code>body
  {
    margin: 0px;
    padding: 0px;
  }
  
  div#container canvas
  {
    cursor: grab;
  }
  
  div#container canvas:active
  {
    cursor: grabbing;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Import 3D Model into Three JS&lt;/title&gt;
    
    &lt;script type="module" defer&gt;
    import * as THREE from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
  
    import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js';    // for .glb and .gltf.glb
    // import { OBJLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/OBJLoader.js';   // for .obj
  
    import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js';
  
    const container = document.querySelector('div#container');
  
    const path_to_model = './ImportModel/Mini-Game Variety Pack/Models/gltf/tree_forest.gltf.glb';
    const loader = new GLTFLoader();
  
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 500);
  
    // Add lights
    const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
    hemiLight.position.set(0, 10, 0);
    scene.add( hemiLight );
    const dirLight = new THREE.DirectionalLight(0xffffff);
    dirLight.position.set(0, 0, 10);
    dirLight.castShadow = true;
    dirLight.shadow.camera.top = 200;
    dirLight.shadow.camera.bottom = -200;
    dirLight.shadow.camera.left = - 200;
    dirLight.shadow.camera.right = 200;
    dirLight.shadow.camera.near = 0.1;
    dirLight.shadow.camera.far = 500;
    scene.add( dirLight );
  
    // Make renderer
    const renderer = new THREE.WebGLRenderer({
      alpha: true
    });
  
    // Make transparent
    renderer.setClearColor(0xffffff, 0);
  
    // Set it to window size
    renderer.setSize(window.innerWidth, window.innerHeight);
  
    // Force shadows
    renderer.shadowMap.enabled = true;
  
    // Helper (optional)
    // const camera_helper = new THREE.CameraHelper(dirLight.shadow.camera);
    // scene.add(camera_helper);
  
    // Double quality
    const quality = 2;
    renderer.setSize(window.innerWidth * quality, window.innerHeight * quality, false);
  
    // Add mouse movement
    const controls = new OrbitControls(camera, renderer.domElement);
  
    // Add floor (plane)
    const plane_geometry = new THREE.PlaneGeometry(10, 10);
    const plane_material = new THREE.MeshPhongMaterial({
      color: 0xffff00,
      side: THREE.DoubleSide
    });
    const plane = new THREE.Mesh(
      plane_geometry,
      plane_material
    );
    plane.rotation.x = 1.5708;
    plane.castShadow = true;
    plane.receiveShadow = true;
    scene.add(plane);
  
    console.log(plane);
  
    // Import glTF
    loader.load(path_to_model, function (gltf)
    {
      //gltf.scene.position.y = -5;
      //gltf.scene.center();
      //gltf.scene.scale.set(0.1, 0.1, 0.1);
  
      // Make it cast shadows
      gltf.scene.castShadow = true;
      gltf.scene.traverse(function(node)
      {
        if (node.isMesh)
        {
          node.castShadow = true;
          //node.receiveShadow = true;
        }
      });
  
      console.log(gltf);
  
      console.log('Adding glTF model to scene...');
      scene.add(gltf.scene);
      console.log('Model added.');
  
      console.log('Moving camera 5z...');
      camera.position.z = 5;
      console.log('Camera moved.');
      }, undefined, function (error)
      {
        console.error(error);
      });
  
    container.appendChild(renderer.domElement);
  
    function animate()
    {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container"&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Update:</strong> changed <code>MeshBasicMaterial</code> to <code>MeshPhongMaterial</code> in plane as suggested by <a href="https://stackoverflow.com/questions/68148511/3d-model-not-casting-shadows-in-threejs?noredirect=1#comment120445899_68148511">@Justin</a>.</p>