Materials react to light

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>Mininum scenario</title>
</head>
<body>

    <canvas class="webgl"></canvas>
    
    <div class="info_text1"></div>
    <div class="info_text2"></div>
    <div class="info_text3"></div>    
    <div class="info_text4"></div>    
</body>
</html>

CSS

*
{
    margin: 0;
    padding: 0;
}

html,
body
{
    overflow: hidden;
}

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

.info_text1
{
    position: absolute;
    top: 3%;
    left: 2%;
    width: 80px;
    padding: 10px;
    background: #000000cc;

    color: #ffff00;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 8px;
}

.info_text2
{
    position: absolute;
    top: 3%;
    right: 2%;
    width: 80px;
    padding: 10px;
    background: #000000cc;

    color: #ffff00;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 8px;
}

.info_text3
{
    position: absolute;
    bottom: 10%;
    left: 2%;
    width: 80px;
    padding: 10px;
    background: #000000cc;

    color: #ffff00;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 8px;
}

.info_text4
{
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 80px;
    padding: 10px;
    background: #000000cc;

    color: #ffff00;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 8px;
}

JavaScript

// Canvas
const canvas = document.querySelector('canvas.webgl')
let text1 = document.querySelector('.info_text1')
let text2 = document.querySelector('.info_text2')
let text3 = document.querySelector('.info_text3')
let text4 = document.querySelector('.info_text4')
const mouse = new THREE.Vector2()

// Scene
const scene = new THREE.Scene() 
//const gui = new dat.GUI({ closed: false })

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

console.log(sizes.width)
console.log(sizes.height)

// Directional Light 1
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1)
directionalLight1.position.set(0, 0, 50)
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

//const setLightManually = gui.addFolder('Set Light Manually')

// Materials
const material1 = new THREE.MeshPhongMaterial( {
    side: THREE.FrontSide,
    reflectivity: 0.0,
    emissiveIntensity: 0.0,
    shininess: 0.0, 
    specular: new THREE.Color(0x000000), 
    color: new THREE.Color(0xffffff),
})

const material2 = new THREE.MeshLambertMaterial( {
    side: THREE.FrontSide,
    reflectivity: 0.0,
    color: new THREE.Color(0xffffff),
})

const material3 = new THREE.MeshStandardMaterial( {
    side: THREE.FrontSide,
		roughness: 1,
    emissiveIntensity: 0, 
    metalness: 0, 
    color: new THREE.Color(0xffffff),
})

const material4 = new THREE.MeshPhysicalMaterial( {
    side: THREE.FrontSide,
    clearcoat: 0.0,
    reflectivity: 0.0,
    sheen: 0.0,
    specularIntensity: 0.0,
    color: new THREE.Color(0xffffff),
})

// Cube
const cube1 = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), material1)
cube1.position.set(-21, 21, 0)
cube1.castShadow = true 

const cube2 = new THREE.Mesh(new...