# Mesh not casting shadows on other mesh and mysterious ray of light bouncing
**URL:** https://discourse.threejs.org/t/mesh-not-casting-shadows-on-other-mesh-and-mysterious-ray-of-light-bouncing/27589
**Category:** Questions
**Tags:** shadows
**Created:** [June 27, 2021, 2:27pm UTC](https://discourse.threejs.org/t/mesh-not-casting-shadows-on-other-mesh-and-mysterious-ray-of-light-bouncing/27589 "2021-06-27T14:27:10Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Hankybree](https://discourse.threejs.org/u/Hankybree)
#### Post date: [June 27, 2021, 2:27pm UTC](https://discourse.threejs.org/t/mesh-not-casting-shadows-on-other-mesh-and-mysterious-ray-of-light-bouncing/27589/1 "2021-06-27T14:27:10Z")
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.
Code for creating scene and renderar in mapbox:
```javascript
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:
```javascript
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:
```javascript
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:
```javascript
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:
```javascript
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?
---
### Author:  [@Hankybree](https://discourse.threejs.org/u/Hankybree)
#### Post date: [June 27, 2021, 2:29pm UTC](https://discourse.threejs.org/t/mesh-not-casting-shadows-on-other-mesh-and-mysterious-ray-of-light-bouncing/27589/2 "2021-06-27T14:29:05Z")
Forgot to mention Im using version 0.106.2 of Three
---
### Author:  [@Mugen87](https://discourse.threejs.org/u/Mugen87)
#### Post date: [June 28, 2021, 12:13pm UTC](https://discourse.threejs.org/t/mesh-not-casting-shadows-on-other-mesh-and-mysterious-ray-of-light-bouncing/27589/3 "2021-06-28T12:13:47Z")
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](https://github.com/mrdoob/three.js/pull/21281#issuecomment-779257362).
---
### Author:  [@Hankybree](https://discourse.threejs.org/u/Hankybree)
#### Post date: [June 28, 2021, 1:47pm UTC](https://discourse.threejs.org/t/mesh-not-casting-shadows-on-other-mesh-and-mysterious-ray-of-light-bouncing/27589/4 "2021-06-28T13:47:06Z")
This solved the issue. Thank you!