ThreeJS shadow

script.js

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

let container = document.createElement( 'div' );
document.body.appendChild( container );
let camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 100000 );

camera.position.x = 1200;
camera.position.y = 1000;
camera.lookAt({
	x: 0,
	y: 0,
	z: 0
});

let scene = new THREE.Scene();

let groundMaterial = new THREE.MeshPhongMaterial( { color: 0x6C6C6C } );
let plane = new THREE.Mesh( new THREE.PlaneGeometry( 500, 500 ), groundMaterial );
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add( plane );

// LIGHTS
scene.add( new THREE.AmbientLight( 0x666666 ) );

let light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
light.position.set( 300, 400, 50 );
light.position.multiplyScalar( 1.3 );

light.castShadow = true;
light.shadowCameraVisible = true;

light.shadowMapWidth = 512;
light.shadowMapHeight = 512;

let d = 200;

light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d;
light.shadowCameraBottom = -d;

light.shadowCameraFar = 1000;
light.shadowDarkness = 0.2;

scene.add( light );

// SHADOW CAMERA HELPER
helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );

var boxgeometry = new THREE.CubeGeometry( 100, 100, 100 );
var boxmaterial = new THREE.MeshLambertMaterial({
	color: 0x0aeedf
});

let cube = new THREE.Mesh( boxgeometry, boxmaterial );
cube.castShadow = true;
cube.position.x = 0;
cube.position.y = 100;
cube.position.z = 0;

scene.add( cube );

// RENDERER
renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.setClearColor( 0x000000 );

control = new THREE.OrbitControls( camera );

container.appendChild( renderer.domElement );
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
	windowHalfX = window.innerWidth / 2;
	windowHalfY = window.innerHeight / 2;
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
};

function animate() {
	requestAnimationFrame( animate );
	//control.update();
	camera.lookAt( scene.position );
	renderer.render( scene, camera );
};

animate();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

style.css

body {
	background: #000;
}

threejs-shadow.markdown

ThreeJS shadow

A Pen by Giuseppe Canale on CodePen.

License.