three.js基础学习之环境光源AmbientLight

这是three.js学习的第17篇笔记，在本篇中，我们将学习three.js中的环境光AmbientLight。环境光会均匀的照亮所有的物体，而不会出现阴影。就像太阳被遮住了一样。环境光的使用非常简单，只需要实例化然后加入scene中即可。

环境光可能会是我们在three.js用到最多的光了，因为在大多数情况下，我们只需要能看到three.js中的物品即可。环境光的实例化也是非常简单，只需传入光照强度和颜色即可。当然，如果没有特殊要求，不传也无所谓。默认颜色和three.js基础学习之光源说的一样为白色，强度为1.

const lightColor = '#ffffff'; // 灯光颜色
const intensity = 1; // 灯光强度
const light = new THREE.AmbientLight(lightColor, intensity);
light.position.set(0,10,20);
scene.add(light)

可以将three.js基础学习之平行光源DirectionalLight中的代码复制出来，新建learnThree17.html然后将光源改为环境光AmbientLight看看效果。

以下是我修改后的源代码，更详细的源代码可以点击https://www.91yqz.com/learnThree/learnThree17.html链接查看。

<script>
    function getSearchObj (key) {
        const search = window.location.search.replace('?', '')
        const list = search.split('&')
        const obj = {}
        for (let i = 0; i < list.length; i++) {
            const eachList = list[i].split('=')
            obj[eachList[0]] = eachList[1]
        }
        return obj[key]
    }
    async function main () {  
        const search = location.search                
        const canvas = document.querySelector('#three')
        const renderer = new THREE.WebGLRenderer({canvas})
        const fov = 75;
        const aspect = 2;
        const near = 1;
        const far = 1000;

        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)

        const group = new THREE.Group()
        group.position.z = -10
        const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, linecap:'round'  })
        const loader = new THREE.TextureLoader()
        const load = (url) => {
            return new Promise((resolve, reject) => {
                loader.load(url, (texture) => {
                    resolve(texture)
                })
            })
        }
        
        {
            const width = 4
            const height = 4
            const depth = 4
            const boxGeometry = new THREE.BoxGeometry(width, height, depth)

            const material = new THREE.MeshStandardMaterial({
                color: 0xe74478
            })

            const box = new THREE.Mesh(boxGeometry, material)
            box.position.set(0, 0, -5)
            box.castShadow = true
            group.add(box)
        }

        {
            const width = 40
            const height = 30
            const planeGeometry = new  THREE.PlaneGeometry(width, height)
            const material = new THREE.MeshStandardMaterial({
                color: 0xffffff
            })
            const plane = new THREE.Mesh(planeGeometry, material)
            plane.position.set(0, 0,-10)
            group.add(plane)
        }
        
        const scene = new THREE.Scene()
        
        {
            const lightColor = '#ffffff'; // 灯光颜色
            const intensity = 1; // 灯光强度
            const light = new THREE.AmbientLight(lightColor, intensity);
            light.position.set(0,10,20);
            scene.add(light);
            

        }
        scene.add(group)

        function resizeRenderSizeToDisplaySize () {
            const pixelRatio = window.devicePixelRatio;
            const displayWidth = canvas.clientWidth * pixelRatio 
            const displayHeight = canvas.clientHeight * pixelRatio
            const renderWidth = canvas.width;
            const renderHeight = canvas.height;
            const needResize = displayWidth !== renderWidth || displayHeight !== renderHeight
            return needResize
        }
        function render (time) {
            if (resizeRenderSizeToDisplaySize()) {
                const pixelRatio = window.devicePixelRatio;
                const width = canvas.clientWidth * pixelRatio
                const height = canvas.clientHeight * pixelRatio
                renderer.setSize(width, height, false)
                camera.aspect = canvas.clientWidth  / canvas.clientHeight;
                camera.updateProjectionMatrix();
            }

            time *= 0.001
            group['children'].forEach((each, index) => {
            if (index !== 1) {
                each.rotation.x = -time
                each.rotation.y = -time
            }
            })
            
            renderer.render(scene, camera)
            requestAnimationFrame(render)
        }

        requestAnimationFrame(render)
    }  
    main()
</script>