light check three.js
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
JavaScript
var camera, scene, renderer, mesh, material, canvas;
init();
animate();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true, antialias : true});
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
// Add renderer to page
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
// Create scene.
scene = new THREE.Scene();
// Create material
material = new THREE.MeshPhongMaterial({color:0xFF0000});
// Create cube and add to scene.
var geometry = new THREE.BoxGeometry(200, 200, 200);
mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
//mesh.receiveShadow = true;
scene.add(mesh);
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// Create directional light and add to scene.
//var directionalLight = new THREE.DirectionalLight(0xffffff);
//directionalLight.position.set(1, 1, 1).normalize();
//scene.add(directionalLight);
var spotLight = new THREE.SpotLight( 0xffffff, 1.0 );
spotLight.position.set( 0, 500, 0 );
spotLight.castShadow = true;
scene.add(spotLight);
// Ground plane
var groundGeo = new THREE.PlaneBufferGeometry(10000, 10000);
var groundMat = new THREE.MeshPhongMaterial({
color : 0xffffff,
});
var ground = new THREE.Mesh(groundGeo, groundMat);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -100;
ground.receiveShadow = true;
scene.add(ground);
// Add listener for window resize.
window.addEventListener('resize', onWindowResize, false);
//assumes wegbGL renderer
...