Shadow Light Intensity

by javiersanjuan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Irradiance</title>
</head>
<body>

    <canvas class="webgl"></canvas>
    
</body>
</html>

CSS

*
{
    margin: 0;
    padding: 0;
}

html,
body
{
    overflow: hidden;
}

.webgl
{
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}

JavaScript

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene() 

/**
 * Lights
 */
// Ambient Light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3)
scene.add(ambientLight)

// Directional Light 1
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight1.position.set(0, -30, 30)
scene.add(directionalLight1)
directionalLight1.castShadow = true 

directionalLight1.shadow.camera.near = 1
directionalLight1.shadow.camera.far = 80
directionalLight1.shadow.camera.top = 50
directionalLight1.shadow.camera.right = 50
directionalLight1.shadow.camera.bottom = - 50
directionalLight1.shadow.camera.left = - 50

// Directional Light 2
const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight2.position.set(-30, -30, 30)
scene.add(directionalLight2)
directionalLight2.castShadow = true

directionalLight2.shadow.camera.near = 1
directionalLight2.shadow.camera.far = 90
directionalLight2.shadow.camera.top = 50
directionalLight2.shadow.camera.right = 50
directionalLight2.shadow.camera.bottom = - 50
directionalLight2.shadow.camera.left = - 50

/**
 * Materials
 */
const material = new THREE.MeshStandardMaterial()
material.side = THREE.FrontSide
material.color = new THREE.Color(0xffffff)

/**
 * Objects
 */
// Plane
const plane = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), material)
plane.receiveShadow = true 

// Cube
const cube = new THREE.Mesh(new THREE.BoxGeometry(20, 20, 20), material)
cube.position.z = 10
cube.castShadow = true 

scene.add(plane, cube)

/**
 * Raycaster
 */
const raycaster = new THREE.Raycaster()
const rayOrigin = new THREE.Vector3(- 40, 0, 40)
const rayDirection = new THREE.Vector3(0, 0, - 10)
rayDirection.normalize()
raycaster.set(rayOrigin, rayDirection)

/**
 * Sizes
 */
const sizes = { width: window.innerWidth, height: window.innerHeight }

// To auto-adjust the window size
window.addEventListener('resize', () =>
{
    // Update sizes
   ...