I want to have shadows, I set as follows, really wondering what's the problem? I have a grid, with cubic and sphere as a child of it, and also I set the castShadow and Receive shadow for them but it has no result for shadow.
some parts of my code:
var camera, scene, renderer, dice, dice1;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(35,window.innerWidth/window.innerHeight, 0.1, 1000);
// Z is up for objects intended to be 3D printed.
camera.up.set(0, 0, 1);
scene.add(camera);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor(0x999999);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
var light = new THREE.PointLight(0x000000, 1, 1000);
light.position.set(10, 10,10);
light.castShadow = true; // default false
scene.add(light);
//Set up shadow properties for the light;
light.shadow.mapSize.width = 1024; // default
light.shadow.mapSize.height = 1024; // default
light.shadow.camera.near = 1; // default
light.shadow.camera.far = 1000 // default
var grid = new THREE.GridHelper(50, 50, 0xffffff, 0x555555);
grid.colorGrid = 0x00ff00;
grid.rotateOnAxis(new THREE.Vector3(1, 0, 0), 90 * (Math.PI / 180));
scene.add(grid);
objects.push(grid); // add to the array for DragControls
grid.receiveShadow=true;
//Create a sphere that cast shadows (but does not receive them)
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
sphere.position.set(10, 15, 10);
scene.add(sphere);
//initializing the color cubic
var material = new THREE.MeshBasicMaterial({
color: 0xff0000});
dice = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5, 1, 1, 1), material);
dice.position.set(10, 2.5, 10);
dice.castShadow = true;
grid.add(dice);
You cannot cast shadow on a grid. it is just lines.
Add this in your code to see shadows.
var plane = new THREE.Mesh(new THREE.PlaneGeometry(50,50), new THREE.MeshStandardMaterial( {color: 0x00ff00 }));
plane.castShadow = false;
plane.receiveShadow = true;
plane.position.set(0, 0, -1);
scene.add(plane);
Related
I would like to make IcosahedronGeometry in three.js and reflect an image on the front side of the geometry.
I already made a IcosahedronGeometry and made it rotate on it's axis.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// RENDERER
var renderer = new THREE.WebGLRenderer({
antialias: true
});
// RENDERER - SIZE OF CANVAS
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor('#ffffff');
document.body.appendChild(renderer.domElement);
// RESPONSIVE RENDERING
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
var groundMaterial = new THREE.MeshPhongMaterial({
shininess: 100,
color: 0xffffff,
specular: 0xffffff
});
const cubeCamera = new THREE.CubeCamera(75, 1000, 512);
scene.add(cubeCamera);
// GEOMETRY
var geometry = new THREE.IcosahedronGeometry(2, 1);
var material = new THREE.MeshStandardMaterial({
color: 0x98bbbd,
side: THREE.FrontSides,
roughness: 1,
metalness: 0.5,
envMap: cubeCamera.renderTarget
});
material.roughness = 0;
material.metalness = 1;
material.flatShading = true;
material.envMap = cubeCamera.renderTarget.texture;
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
console.log(sphere.position);
console.log(cubeCamera.position);
cubeCamera.position.copy(sphere.position);
cubeCamera.update(renderer, scene);
// FLOOR
var floorTexture = new THREE.ImageUtils.loadTexture('images/woman.png');
// floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
// floorTexture.repeat.set(1000, 1000);
var floorMaterial = new THREE.MeshBasicMaterial({
map: floorTexture,
side: THREE.BackSide
});
var floorGeometry = new THREE.PlaneGeometry(5, 5, 1, 1);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = 0;
floor.position.x = 0;
floor.position.z = 3;
scene.add(floor);
cubeCamera.lookAt(floor);
// CONTROLS
var orbit = new THREE.OrbitControls(camera, renderer.Mesh);
camera.position.z = 5;
// LIGHTS
var topLeftLight = new THREE.PointLight(0xffffff, 1, 1);
topLeftLight.position.set(-50, 50, -25);
scene.add(topLeftLight);
var topRightLight = new THREE.PointLight(0xffffff, 1, 10);
topRightLight.position.set(50, 150, -25);
scene.add(topRightLight);
var lightBottomRight = new THREE.PointLight(0xffffff, 1, 100);
lightBottomRight.position.set(40, -50, 25);
scene.add(lightBottomRight);
var lightBottomLeft = new THREE.PointLight(0xffffff, 1, 100);
lightBottomLeft.position.set(-40, -50, 25);
scene.add(lightBottomLeft);
var lightTopRight = new THREE.PointLight(0xffffff, 1, 100);
lightTopRight.position.set(40, 50, 25);
scene.add(lightTopRight);
var lightTopLeft = new THREE.PointLight(0xffffff, 1, 100);
lightTopLeft.position.set(-40, 50, 25);
scene.add(lightTopLeft);
var backLight = new THREE.PointLight(0xffffff, 1, 100);
backLight.position.set(0, 0, -25);
scene.add(backLight);
var light = new THREE.AmbientLight(0x404040, 2); // soft white light
scene.add(light);
// update function
function render() {
requestAnimationFrame(render);
sphere.rotation.x += 0.005;
sphere.rotation.y += 0.005;
sphere.visible = false;
cubeCamera.update(renderer, scene);
sphere.visible = true;
renderer.render(scene, camera);
}
render();
I would like to see a rotating IcosahedronGeometry which reflects an image on the front side. I tried adding a cube camera and pointing it at the PlaneGeometry with an image texture but nothing is reflecting.
I would like to simulate something like this, but it doesn't have to be exactly the same.
The desired result.
3 issues.
you have to call cubeCamera.update before you access cubeCamera.renderTarget.texture
The parameters to CubeCamera are new CubeCamera(near, far, size).
The code had new CubeCamera(75, 1000, 512) which means only things 75 to 1000 units away from the camera would be visible. The image plane you had is 3 units away so would not be visible.
You don't call lookAt with the CubeCamera as it's always looking in all directions.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// RENDERER
var renderer = new THREE.WebGLRenderer({
antialias: true
});
// RENDERER - SIZE OF CANVAS
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor('#ffffff');
document.body.appendChild(renderer.domElement);
// RESPONSIVE RENDERING
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
var groundMaterial = new THREE.MeshPhongMaterial({
shininess: 100,
color: 0xffffff,
specular: 0xffffff
});
const cubeCamera = new THREE.CubeCamera(0.001, 10, 512);
scene.add(cubeCamera);
// GEOMETRY
var geometry = new THREE.IcosahedronGeometry(2, 1);
var material = new THREE.MeshStandardMaterial({
color: 0x98bbbd,
side: THREE.FrontSide,
roughness: 1,
metalness: 0.5,
});
cubeCamera.update(renderer, scene);
material.roughness = 0;
material.metalness = 1;
material.flatShading = true;
material.envMap = cubeCamera.renderTarget.texture;
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// FLOOR
var loader = new THREE.TextureLoader();
var floorTexture = loader.load('https://i.imgur.com/UKBsvV0.jpg');
var floorMaterial = new THREE.MeshBasicMaterial({
map: floorTexture,
side: THREE.BackSide
});
var floorGeometry = new THREE.PlaneGeometry(5, 5, 1, 1);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = 0;
floor.position.x = 0;
floor.position.z = 3;
scene.add(floor);
// CONTROLS
var orbit = new THREE.OrbitControls(camera, renderer.Mesh);
camera.position.z = 5;
// LIGHTS
var topLeftLight = new THREE.PointLight(0xffffff, 1, 1);
topLeftLight.position.set(-50, 50, -25);
scene.add(topLeftLight);
var topRightLight = new THREE.PointLight(0xffffff, 1, 10);
topRightLight.position.set(50, 150, -25);
scene.add(topRightLight);
var lightBottomRight = new THREE.PointLight(0xffffff, 1, 100);
lightBottomRight.position.set(40, -50, 25);
scene.add(lightBottomRight);
var lightBottomLeft = new THREE.PointLight(0xffffff, 1, 100);
lightBottomLeft.position.set(-40, -50, 25);
scene.add(lightBottomLeft);
var lightTopRight = new THREE.PointLight(0xffffff, 1, 100);
lightTopRight.position.set(40, 50, 25);
scene.add(lightTopRight);
var lightTopLeft = new THREE.PointLight(0xffffff, 1, 100);
lightTopLeft.position.set(-40, 50, 25);
scene.add(lightTopLeft);
var backLight = new THREE.PointLight(0xffffff, 1, 100);
backLight.position.set(0, 0, -25);
scene.add(backLight);
var light = new THREE.AmbientLight(0x404040, 2); // soft white light
scene.add(light);
// update function
function render() {
sphere.rotation.x += 0.005;
sphere.rotation.y += 0.005;
sphere.visible = false;
cubeCamera.update(renderer, scene);
sphere.visible = true;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/js/controls/OrbitControls.js"></script>
I'm creating an HTML file integrating ThreeJs, basically I have created 4 Spheres, 1 of them projects the light, other 3 spheres turn in a wall. When the Spheres is behind the wall they should not reflect the light, what I supposed to do to solve this?
I've already try changing the materials of the Spheres which turns around the wall to Lambert and Phong, setting up castShadow to true, and recieveShadow to False
(function onLoad() {
var camera, scene, renderer, orbitControls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 30, -100);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.add(camera);
orbitControls = new THREE.OrbitControls(camera);
escena = scene;
esferaLuz = new THREE.SphereBufferGeometry(0.5, 16, 16);
luzUno = new THREE.SpotLight(0xFFFFFF, 1);
luzUno.angle = Math.PI / 12;
luzUno.penumbra = 0.05;
luzUno.decay = 2;
luzUno.position.set(-30, 40, -5);
mtLuzUno = new THREE.MeshBasicMaterial({color: 0xFFFFFF});
mallaLuzUno = new THREE.Mesh(esferaLuz, mtLuzUno);
luzUno.add(mallaLuzUno);
escena.add(luzUno);
luzUno.castShadow = true;
luzUno.shadow.mapSize.width = 1024;
luzUno.shadow.mapSize.height = 1024;
luzUno.shadow.camera.near = 10;
luzUno.shadow.camera.far = 200;
luzMap = new THREE.SpotLightHelper(luzUno);
escena.add(luzMap);
sombraMap = new THREE.CameraHelper(luzUno.shadow.camera);
escena.add(sombraMap);
var luzAmbiente = new THREE.AmbientLight( 0xffffff, 0.1 );
escena.add(luzAmbiente);
geometriaPlana = new THREE.CubeGeometry(100, 100, 2, 2);
mtPlano = new THREE.MeshLambertMaterial({color: 0x000000});
mtPlano.transparent = false;
mtPlano.depthWrite = true;
mallaPlano = new THREE.Mesh(geometriaPlana, mtPlano);
mallaPlano.rotation.x = -0.5*Math.PI;
mallaPlano.position.x = 15;
mallaPlano.position.y = 0;
mallaPlano.position.z = 0;
mallaPlano.receiveShadow = true;
escena.add(mallaPlano);
objEsfera = new THREE.SphereGeometry(5, 100, 100);
mtObjEsfera = new THREE.MeshPhongMaterial({color: 0xFFFFFF, specular:0xFFFFFF, shininess: 1024});
mallaObjEsfera3 = new THREE.Mesh(objEsfera, mtObjEsfera);
mallaObjEsfera3.position.set(20, 0, 0);
mallaObjEsfera3.castShadow = true;
mallaObjEsfera3.receiveShadow = false;
escena.add(mallaObjEsfera3);
objEsfera = new THREE.SphereGeometry(5, 100, 100);
mtObjEsfera = new THREE.MeshPhongMaterial({color: 0xF90E0E, specular:0xF90E0E, shininess: 512});
mallaObjEsfera2 = new THREE.Mesh(objEsfera, mtObjEsfera);
mallaObjEsfera2.position.set(5, 0, 0);
mallaObjEsfera2.castShadow = true;
mallaObjEsfera2.receiveShadow = false;
escena.add(mallaObjEsfera2);
objEsfera = new THREE.SphereGeometry(5, 100, 100);
mtObjEsfera = new THREE.MeshLambertMaterial({color: 0xF2E406});
mallaObjEsfera = new THREE.Mesh(objEsfera, mtObjEsfera);
mallaObjEsfera.position.set(-10, 0, 0);
mallaObjEsfera.castShadow = true;
mallaObjEsfera.receiveShadow = false;
escena.add(mallaObjEsfera);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio( window.devicePixelRatio);
renderer.setClearColor(0xEEEEEE);
renderer.shadowMap.enabled = true;
renderer.shadowMap.renderReverseSided = false;
renderer.sortObjects = false
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.gammaInput = true;
renderer.gammaOutput = true;
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
}
function animate() {
requestAnimationFrame(animate);
orbitControls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
I expect that when the spheres is behind the wall, don't show any type of reflects of light but when is on the front reflect the light .
One way to achieve your intended result is to work with shadows. So you have to set Object3D.castShadow and Object3D.receiveShadow to true for your spheres and your ground like in the following live example:
https://jsfiddle.net/85q3sfeg/
Also keep in mind that three.js does not support selective lighting so far. This issue was already discussed at github right here: https://github.com/mrdoob/three.js/issues/5180
Assuming all objects of your scene have a lit material applied, you can't define what light sources should affect what objects.
three.js R103
Okay. I'm clearly missing something here. I'm simply trying to get this code to cast shadows. I've turned on receive shadows and cast shadows for the cube and the floor but it still isn't showing. This shouldn't be this hard. I've used casting shadows before however I'm clearing missing something here. Any ideas would help. I'm at a loss because I know casting shadows isn't that hard. I must be missing something obvious.
Thanks in advance.
var camera, scene, renderer;
var RED = 0xff3300;
init();
render();
function init() {
renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
-
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 15000);
camera.position.set(1000, 500, 1000);
camera.lookAt(new THREE.Vector3(0, 200, 0));
scene = new THREE.Scene();
scene.background = new THREE.Color(0xcccccc);
var light = new THREE.SpotLight(0xdddddd, 1);
light.position.set(50, 600, 50);
scene.add(light);
var coloredCube = createCube(100, 100, 100, 0, 300, 0, 0, RED);
coloredCube.castShadow = true;
coloredCube.receiveShadow = true;
scene.add(coloredCube);
//create floor
var planeFloor = createSizedPlane(1000, 1000);
planeFloor = preparePlaneForScene(planeFloor, Math.PI / -2, 0, 0, 0, 0, 0);
planeFloor.castShadow = true;
planeFloor.receiveShadow = true;
scene.add(planeFloor);
}
function render() {
renderer.render(scene, camera);
}
function createSizedPlane(xSize, zSize, numberOfSegments) {
var planeGeometry = new THREE.PlaneGeometry(xSize, zSize, numberOfSegments);
planeGeometry.receiveShadow = true;
planeGeometry.castShadow = true;
var material = new THREE.MeshStandardMaterial({
roughness: 0.8,
color: 0xffffff,
metalness: 0.2,
bumpScale: 0.0005,
opacity: 1, transparent: false
}
);
return new THREE.Mesh(planeGeometry, material);
}
function preparePlaneForScene(plane, xRotation, yRotation, zRotation, xPosition, yPosition, zPosition) {
plane.rotation.x = xRotation;
plane.rotation.y = yRotation;
plane.rotation.z = zRotation;
plane.position.x = xPosition;
plane.position.y = yPosition;
plane.position.z = zPosition;
return plane;
}
function createCube(xSize, ySize, zSize, xPosition, yPosition, zPosition, yRotation, color) {
var cubeGeometry = new THREE.BoxGeometry(xSize, ySize, zSize);
var cubeMaterial = new THREE.MeshLambertMaterial({color: color});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = xPosition;
cube.position.y = yPosition;
cube.position.z = zPosition;
cube.rotation.y = yRotation;
cube.castShadow = true;
cube.receiveShadow = true;
return cube;
}
Enable shadowMap for renderer and casting shadow for light:
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
spotLight.castShadow = true;
spotLight.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(60, 1, 1, 2500));
spotLight.shadow.bias = 0.0001;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
THREE.SpotLightShadow should work too.
For directional light you would need orthographic projection (or use THREE.DirectionalLightShadow).
Using r70, the shadow shows as expected - r70 example (Shadow it correct shape)
Using r76 however, the shadow is abnormally shaped - r76 example (Shadow is abnormally shaped)
You can see that the shadows on the MeshLambertMaterial on the ground plane are not as expected.
Why is the shadows becoming abnormally shaped?
What needs to be changed to get it working in r76?
Here is the code I am using (same in both example):
var light;
light = new THREE.SpotLight(0xdfebff, 1);
light.position.set(300, 400, 50);
light.castShadow = true;
light.shadowCameraVisible = true;
scene.add(light);
var groundMaterial = new THREE.MeshLambertMaterial({
color: 0xFF0000,
});
plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), groundMaterial);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
plane.castShadow = false;
scene.add(plane);
var boxgeometry = new THREE.CubeGeometry(100, 100, 100);
var boxmaterial = new THREE.MeshLambertMaterial({
color: 0x0aeedf
});
var cube = new THREE.Mesh(boxgeometry, boxmaterial);
cube.castShadow = true;
cube.position.x = 0;
cube.position.y = 100;
cube.position.z = 0;
scene.add(cube);
webglRenderer = new THREE.WebGLRenderer({ alpha: true });
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
webglRenderer.shadowMapEnabled = true;
webglRenderer.shadowMapSoft = true;
The first thing to do is to add a shadow camera helper so you can see what is going on:
light.shadowCameraHelper = new THREE.CameraHelper( light.shadow.camera );
scene.add( light.shadowCameraHelper );
It is clear that the shadow camera frustum is clipping the shadow.
Starting in three.js r.76, the shadow camera frustum is automatically set so it more closely matches the spotLight field-of-view.
If you would like to override that, you can specify a custom shadow frustum like so:
// custom shadow frustum
light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 30, 1, 200, 700 ) );
updated fiddle: http://jsfiddle.net/ef4r5s76/5/
three.js r.76/r.77
camera :
Camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 10000);
Camera.position.set( 150, 400, 400);
Scene.add(Camera);
Light
Light = new THREE.SpotLight(0xffccff,.5, 0, Math.PI/2, 1);
Light.position.set(0, 2000, 0);
Light.castShadow = true;
Light.shadowBias = -0.0002;
Light.shadowCameraNear = 850;
Light.shadowCameraFar = 8000;
Light.shadowCameraFov = 600;
Light.shadowDarkness = .7;
Light.shadowMapWidth = 2048;
Light.shadowMapHeight = 2048;
Scene.add(Light);
Renderer
Renderer = new THREE.WebGLRenderer({
antialias: true,
sortObjects: false,
preserveDrawingBuffer: true,
shadowMapEnabled: true
});
document.body.appendChild(Renderer.domElement);
Renderer.shadowMap.type = THREE.PCFSoftShadowMap;
Renderer.shadowMap.cullFace = THREE.CullFaceBack;
Renderer.gammaInput = true;
Renderer.gammaOutput = true;
Renderer.setSize(window.innerWidth, window.innerHeight);
i use this function to add 3d model
function getModel(path,texture) {
var Material = new THREE.MeshPhongMaterial({shading: THREE.SmoothShading,
specular: 0xff9900,
shininess: 0,
side: THREE.DoubleSide,
shading: THREE.SmoothShading
});
Loader = new THREE.JSONLoader();
Loader.load(path,function(geometry){
geometry.mergeVertices();
geometry.computeFaceNormals();
geometry.computeVertexNormals();
TextureLoader.load(texture,function(texture){
Mesh = new THREE.Mesh(geometry, Material);
Mesh.material.map =texture;
Mesh.material.map.wrapS = THREE.RepeatWrapping;
Mesh.material.map.wrapT = THREE.RepeatWrapping;
Mesh.material.map.repeat.set(38,38);
//Mesh.position.y -= 1;
Mesh.position.y = 160;
Mesh.position.x = 0;
Mesh.position.z = 0;
Mesh.scale.set(40,40,40);
Mesh.castShadow = true;
Mesh.receiveShadow = true;
Scene.add(Mesh);
});
});
}
and the plane to recive shadow is
var planeGeometry = new THREE.PlaneBufferGeometry(100,100);
var planematerial = new THREE.MeshLambertMaterial(
{
shininess: 80,
color: 0xffaaff,
specular: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry,planematerial);
plane.rotation.x = - Math.PI / 2;
plane.position.set(0,100,0);
plane.scale.set( 10, 10, 10 );
plane.receiveShadow = true;
plane.castShadow = true;
Scene.add(plane);
I just tried adjusting the position of the lights and adjusted the values of shadowCameraNear,Light.shadowCameraFar and Light.shadowCameraFov .but not no changes are seen
The camera is at (150, 400, 400), the object casting the shadow is at (0, 160, 0), the object receiving the shadow is at (0, 100, 0) and the shadowCameraNear frustum is set at 850. That is, your camera is about 200 and 400 units from the two shadowing objects, respectively, but your shadow viewing near frustum is 850 units away. Adjust your positioning. You can set
Light.shadowCameraVisible = true;
to show the camera frustum in debug mode to help out.