Three.js - Hemisphere Light

Quiz

It is a special light for creating natural lighting. If you look at the lighting outside, you'll see that the lights don't come from a single direction. Earth reflects part of the sunlight, and the atmosphere scatters the other parts. The result is a very soft light coming from lots of directions. In Three.js, we can create something similar using THREE.HemisphereLight.

const light = new THREE.HemisphereLight(color, groundColor, intensity)

The first argument sets the color of the sky, and the second color sets the color reflected from the floor. And the last argument is its intensity.

It is often used along with some other lights, which can cast shadows for the best outdoor lighting effect.

Example

Check out the following example.

hemisphere.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Three.js - HemisphereLight</title>
      <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
            Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         html,
         body {
            height: 100vh;
            width: 100vw;
         }
         #threejs-container {
            position: block;
            width: 100%;
            height: 100%;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
   </head>
   <body>
      <div id="container"></div>
      <script type="module">
         // Adding hemisphere light in Three.js
         // It gives the lighting of physical world
         // GUI
         const gui = new dat.GUI()
         // sizes
         let width = window.innerWidth
         let height = window.innerHeight
         // scene
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         // camera
         const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000)
         camera.position.set(0, 0, 10)
         const camFolder = gui.addFolder('Camera')
         camFolder.add(camera.position, 'z', 10, 80, 1)
         camFolder.open()
         // lights
         const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
         scene.add(ambientLight)
         const skyColor = 0xb1e1ff // light blue
         const groundColor = 0xb97a20 // brownish
         const light = new THREE.HemisphereLight(skyColor, groundColor)
         light.position.set(0, 5, 0)
         scene.add(light)
         const helper = new THREE.HemisphereLightHelper(light, 5)
         scene.add(helper)
         // light controls
         const lightColor = {
            color: light.color.getHex(),
            groundColor: light.groundColor.getHex()
         }
         const lightFolder = gui.addFolder('Light')
         lightFolder
            .addColor(lightColor, 'color')
            .name('Light Color')const hemisphereLightFolder = gui.addFolder('Hemisphere Light')
            hemisphereLightFolder
            .addColor(lightColor, 'groundColor')
            .name('ground Color')
            .onChange(() => {
            light.groundColor.set(lightColor.groundColor)
         })
         hemisphereLightFolder.add(light.position, 'x', -100, 100, 0.01)
         hemisphereLightFolder.add(light.position, 'y', -100, 100, 0.01)
         hemisphereLightFolder.add(light.position, 'z', -100, 100, 0.01)
         hemisphereLightFolder.open()
         // cube
         console.log('cube')
         const geometry = new THREE.BoxGeometry(2, 2, 2)
         const material = new THREE.MeshStandardMaterial({
            color: 0x87ceeb
         })
         const materialFolder = gui.addFolder('Material')
         materialFolder.add(material, 'wireframe')
         materialFolder.open()
         const cube = new THREE.Mesh(geometry, material)
            cube.position.set(0, 0.5, 0)
            cube.castShadow = true
            cube.receiveShadow = true
            scene.add(cube)
         // responsiveness
         window.addEventListener('resize', () => {
            width = window.innerWidth
            height = window.innerHeight
            camera.aspect = width / height
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.render(scene, camera)
         })
         // renderer
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(window.innerWidth, window.innerHeight)
         renderer.shadowMap.enabled = true
         renderer.shadowMap.type = THREE.PCFSoftShadowMap
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         // animation
         function animate() {
            requestAnimationFrame(animate)
            cube.rotation.x += 0.005
            cube.rotation.y += 0.01
            renderer.render(scene, camera)
         }
         // rendering the scene
         const container = document.querySelector('#container')
         container.append(renderer.domElement)
         renderer.render(scene, camera)
         animate()
      </script>
   </body>
</html>

Output

threejs_lights_and_shadows.htm

Print Page