Three.js - 半球光

这是一种用于创造自然光照的特殊光源。如果你观察在室外的光照情况，你会发现光线并不是来自单一的方向。地球反射了阳光的一部分，而大气层散射了其他部分。结果就是很多方向上都有非常柔和的光线。在 Three.js 中，我们可以利用 THREE.HemisphereLight 创造类似的效果。

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

第一个参数设置天空的颜色，第二个颜色设置从地面反射的颜色。最后一个参数是其强度。

它通常会和其他光源组合使用，后者可以为最佳户外光照效果投射阴影。

示例

查看以下示例。

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>

输出

threejs_lights_and_shadows.htm

打印页面

上一个

下一个