Mesh not casting shadows on other mesh and mysterious ray of light bouncing

Questions
1

I am trying to get a mesh to cast a shadow on a plane. The mesh is recieving light and casts shadows on itself but not on the plane. Also a ray of light is bouncing of the plane where it looks like the directional light hits.

NoShadows
NoShadows941×536 45.6 KB

Code for creating scene and renderar in mapbox:

var modelTransform = getModelTransform(location);

    var customLayer = {
      id: "3d-model",
      type: "custom",
      renderingMode: "3d",
      onAdd: function (threeMap, gl) {
        this.camera = new THREE.Camera();

        map = threeMap;

        // use the Mapbox GL JS map canvas for three.js
        this.renderer = new THREE.WebGLRenderer({
          canvas: map.getCanvas(),
          context: gl,
          antialias: true,
        });

        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
        this.renderer.autoClear = false;
      },
      render: function (gl, matrix) {
        var rotationX = new THREE.Matrix4().makeRotationAxis(
          new THREE.Vector3(1, 0, 0),
          modelTransform.rotateX
        );
        var rotationY = new THREE.Matrix4().makeRotationAxis(
          new THREE.Vector3(0, 1, 0),
          modelTransform.rotateY
        );
        var rotationZ = new THREE.Matrix4().makeRotationAxis(
          new THREE.Vector3(0, 0, 1),
          modelTransform.rotateZ
        );

        var m = new THREE.Matrix4().fromArray(matrix);
        var l = new THREE.Matrix4()
          .makeTranslation(
            modelTransform.translateX,
            modelTransform.translateY,
            modelTransform.translateZ
          )
          .scale(
            new THREE.Vector3(
              modelTransform.scale,
              -modelTransform.scale,
              modelTransform.scale
            )
          )
          .multiply(rotationX)
          .multiply(rotationY)
          .multiply(rotationZ);

        this.camera.projectionMatrix = m.multiply(l);
        this.renderer.state.reset();
        this.renderer.render(scene, this.camera);
        //map.triggerRepaint();
      }

function getModelTransform(location) {
  initTracker();

  var modelOrigin = [location[0], location[1]];
  var modelAltitude = 0;
  var modelRotate = [0, 0, 0];

  var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
    modelOrigin,
    modelAltitude
  );

  var modelTransform = {
    translateX: modelAsMercatorCoordinate.x,
    translateY: modelAsMercatorCoordinate.y,
    translateZ: modelAsMercatorCoordinate.z,
    rotateX: modelRotate[0],
    rotateY: modelRotate[1],
    rotateZ: modelRotate[2],
    scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits(),
  }

Code for creating light:

function createLights(THREE) {
  const lights = {}

  //const ambient = track(new THREE.AmbientLight(0xffffff, 0.7));
  //lights.ambient = ambient

  const directional = track(new THREE.DirectionalLight(0xffffff, 2, 100));
  directional.position.set(30, 40, 30); 

  // Shadow settings
  const shadowCameraSize = 40
  directional.castShadow = true; 
  directional.shadow.mapSize.width = 1024;
  directional.shadow.mapSize.height = 1024;
  directional.shadow.camera.left = -shadowCameraSize;
  directional.shadow.camera.right = shadowCameraSize;
  directional.shadow.camera.top = shadowCameraSize;
  directional.shadow.camera.bottom = -shadowCameraSize;
  directional.shadow.camera.near = 0.1;
  directional.shadow.camera.far = 200;

  lights.directional = directional

  return lights
}

Code for creating mesh:

function meshToThreejs(rhino, base64, THREE) {
  const mesh = rhino.DracoCompression.decompressBase64String(base64);
  let loader = new THREE.BufferGeometryLoader();
  var geometry = track(loader.parse(mesh.toThreejsJSON()));

  const material = track(
    new THREE.MeshPhongMaterial({
      vertexColors: true,
      side: THREE.DoubleSide,
    })
  );

  return track(new THREE.Mesh(geometry, material));
}

Code for creating plane:

function createPlane(THREE) {
  const planeGeometry = track(new THREE.PlaneGeometry(1000, 1000, 10, 10));
  const planeMaterial = track(new THREE.MeshPhongMaterial({
    side: THREE.DoubleSide,
    color: 0x008000
  }));
  const plane = track(new THREE.Mesh(planeGeometry, planeMaterial));
  plane.receiveShadow = true;

  return plane
}

Code for putting it all together and enable shadows for mesh:

const meshString = result.mesh.meshString;
            const mesh = meshToThreejs(rhino, meshString, THREE);
            mesh.castShadow = true; 
            mesh.receiveShadow = false; 
            scene.add(mesh);

            const lights = createLights(THREE)

            //scene.add(lights.ambient);
            scene.add(lights.directional)
            
            const plane = createPlane(THREE)
            scene.add(plane);

            const helper = new THREE.CameraHelper(lights.directional.shadow.camera);
            scene.add(helper);

            addCurves(rhino, result.mesh.curves, scene);
            map.triggerRepaint();

Have followed along with a bunch of different examples but can’t seem to figure this one out. What have I missed?

2

Forgot to mention Im using version 0.106.2 of Three

3

Can you please try it with the latest version of three.js?

In general, shadows should be supported when three.js is combined with mapbox, see WebGLState: Implement true reset. by Mugen87 · Pull Request #21281 · mrdoob/three.js · GitHub.

4

This solved the issue. Thank you!