three.js场景中的环境光与点光源，以及物体添加阴影

添加阴影.png

1、THREE.AmbientLight(环境光)

环境光创建后会应用到全局中去，该光源没有特别的来源方向，通常不能将THREE.AmbientLight作为场景中的唯一的光源，因为他会将场景中的所有物体渲染为相同的颜色，在场景中再去引入其他的光源的目的就是弱化阴影。
使用方式：

ambientLight = new THREE.AmbientLight(0xffffff,1); //环境光的颜色以及强弱
scene.add(ambientLight);

2、THREE.PointLight(点光源)

THREE.PointLight是一种单点发光、照射所有方向的光源，类似于你晚上打开手电筒去照射一个物体的那种场景，THREE.PointLight不会产生阴影，因为它会朝所有的方向发射光线。
属性：

• color：光源的颜色
• distance：光源照射的距离。默认值为 0，意味着光的强度不会随着距离的增加而减少。
• intensity：光源照射的强度。默认值为 1。
• position：光源在场景中的位置。
• visible：设为 ture（默认值），光源就会打开。设为 false，光源就会关闭。

使用方式：

pointLight = new THREE.PointLight(0xffffff,1);
pointLight.position.set(2, 20, -2);
scene.add(pointLight);

3、示例源代码：

   // 定义场景、相机、渲染器、网格、地面、环境光、点光源 变量
        var scene, camera, renderer, mesh, meshfloor, ambientLight, pointLight;
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);

        // 新建一个箱子
        mesh = new THREE.Mesh(
            new THREE.BoxGeometry(5, 5, 5), //创建5*5*5的箱子的大小
            // 注意：箱子不能使用MeshBasicMaterial，否则会出现光照无反应
            new THREE.MeshPhongMaterial({
                color: 0x757575,
                wireframe: false
            })
        )
        // 箱子去接受光源
        mesh.receiveShadow = true;
        // 箱子去投射光源
        mesh.castShadow = true;
        mesh.position.y += 5/2; //设置箱子的位置坐标

        // 创建一个地面
        meshfloor = new THREE.Mesh(
            new THREE.PlaneGeometry(130, 130, 10, 10),
            new THREE.MeshPhongMaterial({
                color: 0x1B5E20,
                wireframe: false
            })
        )
        meshfloor.rotation.x -= Math.PI / 2;
        // 地面同样设置去接受光源
        meshfloor.receiveShadow = true;

        // 将所有创建的物体加入到场景中去
        scene.add(mesh);
        scene.add(meshfloor);

        // 环境光
        ambientLight = new THREE.AmbientLight(0xffffff,1); //环境光的颜色以及强弱
        // 点光
        pointLight = new THREE.PointLight(0xffffff,1);
        pointLight.position.set(0, 8, 0);
        pointLight.castShadow = true;
        pointLight.shadow.camera.near = 0.1;
        pointLight.shadow.camera.far = 25;

        scene.add(ambientLight);
        scene.add(pointLight);

        camera.position.set(10, 10, 10);
        camera.up.set(0,1,0);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        // 给渲染器添加阴影效果
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.BasicShadowMap;
        document.body.appendChild(renderer.domElement);

        // 每一帧去循环调用render()函数
        animate();

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }