title: Directional light shadow in mapbox
body: <p>I have a custom mesh geometry (three js) in mapbocx. I am trying to create a light for casting directional shadows but I always end up woth the light source in the base plane (which results in no casted shadows on my objects above the plane). Does anyone know how I can move the light source so it is above the plane? I added a helper to see the scope box and I would like to move it upwards along the z-vector in the image below.</p>
  <p><a href="https://i.stack.imgur.com/nSqSr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nSqSr.png" alt="enter image description here" /></a></p>
  <pre><code>//Create a WebGLRenderer and turn on shadows in the renderer
          const renderer = new THREE.WebGLRenderer();
          renderer.shadowMap.enabled = true;
          renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
  
          //Add Ambient light
          const amblight = new THREE.AmbientLight(0xffffff, 0.8);
          amblight.position.set(8, 10, 5); //default; light shining from top
          scene.add(amblight);
  
          //Create a DirectionalLight and turn on shadows for the light
          const light = new THREE.DirectionalLight(0xffffff, 0.5);
          //light.position.set(8, 10, 5); //default; light shining from top
          light.position.y = 2000;
          light.position.x = 10;
          light.position.z = 5;
          light.castShadow = true; // default false
          scene.add(light);
          //scene.add(light.target);
  
          //Set up shadow properties for the light
          light.shadow.mapSize.width = 512;
          light.shadow.mapSize.height = 512;
          light.shadow.camera.left = -100;
          light.shadow.camera.right = 100;
          light.shadow.camera.top = 100;
          light.shadow.camera.bottom = -100;
          light.shadow.camera.near = 0.5;
          light.shadow.camera.far = 100; //Scope box depth
  
          //Create a plane that receives shadows (but does not cast them)
          const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
          const planeMaterial = new THREE.MeshPhongMaterial({
            color: 0x808080,
            opacity: 0.8,
            transparent: true,
          });
          const plane = new THREE.Mesh(planeGeometry, planeMaterial);
          plane.receiveShadow = true;
          scene.add(plane);
  
          const meshString = result.mesh.meshString;
          const mesh = meshToThreejs(rhino, meshString, THREE);
          //scene.add(mesh);
  
          //Add shadows
          mesh.castShadow = true; //default is false
          mesh.receiveShadow = true; //default
          scene.add(mesh);
  
          //ENd shadows
  
          //Create a helper for the shadow camera (optional)
          const helper = new THREE.CameraHelper(light.shadow.camera);
          scene.add(helper);
  </code></pre>