【Three.js】四（1）、three.js中的光源——基础光源

three.js中的光源有：THREE.AmbientLight、THREE.PointLight、THREE.SpotLight、THREE.DirectionLight、THREE.HemisphereLight、THREE.AreaLight、THREE.LensFlare,下面我们一一介绍这些光源的区别。

一、THREE.AmbientLight

环境光。这是一个基本光源，该光源的颜色将会叠加到场景现有物体的颜色上。

  THREE.AmbientLight创建的光源，颜色会被应用至全局。该光源没有特定来源方向，并且不会产生阴影。通常不会单独使用它，而是配合其他光源同时使用，目的是弱化阴影或给场景添加一些额外的颜色。
  创建环境光非常简单，只需new THREE.AmbientLight(),然后将其添加到场景中即可，无需设置光照位置。下面是一个可通过dat.GUI控制环境光的示例：

import '../../stylus/index.styl'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import {
   initStats} from '../../util/util'

function init() {
   
    let stats = initStats();
    let scene = new THREE.Scene();
    let camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 100);
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    scene.add(camera);

    let planeGeomerty = new THREE.PlaneGeometry(60,40,1, 1);
    let planeMaterial = new THREE.MeshLambertMaterial({
   
        color: 0xffffff
    });
    let plane = new THREE.Mesh(planeGeomerty, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.receiveShadow = true;
    scene.add(plane);

    let spotLight = new THREE.SpotLight(0xffffff, 1,180, Math.PI / 4);
    spotLight.castShadow = true;
    spotLight.position.set(-30, 40, -10);
    spotLight.shadow.mapSize.set(2048, 2048);
    scene.add(spotLight);

    let ambientLight = new THREE.AmbientLight(0x606008, 1);
    scene.add(ambientLight);

    let gui = new dat.GUI();
    let controls = new function(){
   
        this.intensity = ambientLight.intensity;
        this.ambientColor = ambientLight.color.getStyle();
    };
    gui.add(controls, 'intensity', 0, 1).onChange(value => {
   
        ambientLight.color = new THREE.Color(controls.ambientColor);
        ambientLight.intensity = controls.intensity;
    });
    gui.addColor(controls, 'ambientColor').onChange(value => {
   
        ambientLight.color = new THREE.Color(controls.ambientColor);
        ambientLight.intensity = controls.intensity;
    });

    let cubeGeometry = new THREE.BoxGeometry(4,4,4);
    let cubeMaterial = new THREE.MeshLambertMaterial({
   
        color: 0x00ffff
    });
    let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.castShadow = true;
    cube.position.x = 2;
    cube.position.y = 2;
    cube.position.z = 2;
    scene.add(cube);

    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 40;
    camera.lookAt(scene.position);
    document.body.appendChild(renderer.domElement);
    render();
    function render(){
   
        stats.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
}

window.onload = init();

完整示例(src/three_demo_05)：https://github.com/MAXLZ1/threejs_demo

二、THREE.PointLight

点光源。一种单点发光、照射所有方向的光源。例如蜡烛。

要创建一个点光源非常简单：

let pointLight = new THREE.PointLight(0xffffff);
pointLight.castShadow = true;
pointLight.shadow.mapSize.set(2048, 2048);
pointLight.decay = 0.1
scene.add(pointLight);

我们使用指定颜色创建了一个点光源，并使其可产生阴影，通过mapSize设置了阴影的清晰度，decay设置沿着光照距离的衰退量。
下

2.1 THREE.PointLight属性

属性	说明
color	光源颜色
distance	光源照射距离。默认为0，光的强度不会随着距离增加而减少
intensity	光源照射的强度。默认为1
position	光源在场景中的位置
visible	是否开启光源

面示例展示了这几个属性的使用：

function init() {
   
    let stat