简介

光源是对于自然界光照的模拟，往往为了更好的渲染场景，需要设置不同的光源，设置不同的光照强度

分类

一般光源可以分成以下类别

环境光(AmbientLight)
平行光(DirectionalLight)
点光源(PointLight)
聚光灯光源(SpotLight)

环境光

环境光是没有特定方向的光源，主要是均匀改变物体明暗的效果，如果没有设置环境光，那么物体会是一个全黑的对象

没有环境光

在这里插入图片描述

有环境光

//环境光:环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
var ambient = new THREE.AmbientLight(0x888888);
scene.add(ambient);//环境光对象添加到scene场景中

当环境光打上之后，物体立马改变了颜色

在这里插入图片描述

点光源

点光源就像我们生活中的灯泡，当设置点光源的时候，必须设置光源的位置属性position
他会呈现出阴暗面，我们可以设置光源的位置来感受点光源的特点

var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);

在这里插入图片描述
3. 我们修改点光源的位置，看一下他的渲染效果

point.position.set(-400, -200, -300);

在这里插入图片描述
我们拖动一下物体就会发现，亮面在另一面

平行光

平行光的光线是平行的，也就是说物体的每一个区域接收到的入射角是相同的
在设置的时候，使用position和target两个属性来一起确定平行光的方向
- target的属性值可以是threejs场景中任何一个三维模型

// 平行光设置
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
directionalLight.position.set(80, 100, 50);
directionalLight.target = mesh;
scene.add(directionalLight);

在这里插入图片描述
平行光如果不设置position和target属性，那么光线默认从上往下照射，也就可以认为是从(0,1,0)和(0,0,0)两个点确定的直线

聚光灯

聚光灯是一个会沿着特定方向逐渐发散的光源，在一个立体空间会构成一个圆锥体
通过属性angle可以设置聚光灯发散的角度，照射位置和平行光相同是由position和target两个属性实现的

// 聚光灯设置
var spotLight = new THREE.SpotLight(0xffffff);
// 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
spotLight.position.set(200, 200, 200);
spotLight.target = mesh;
// 设置发散的角度
spotLight.angle = Math.PI / 100

scene.add(spotLight);

在这里插入图片描述

光源辅助对象

光源辅助对象，就像AxesHelper一样可以可视化显示坐标，他可以大致显示光照的方向

辅助对象	构造函数名
聚光源辅助对象	SpotLightHelper
点光源辅助对象	PointLightHelper
平行光光源辅助对象	DirectionalLightHelper

// 光源对象设置
const sphereSize = 2;
const pointLightHelper = new THREE.PointLightHelper( point, sphereSize,"#000" );
scene.add( pointLightHelper );

在这里插入图片描述

阴影

有方向的光源的作用下，物体都会形成隐形，想要产生阴影，需要有三个要素

首先要有光源
要有投影的模型
要有接收投影的模型

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <!-- 引入threejs扩展控件OrbitControls.js -->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    var geometry = new THREE.BoxGeometry(40, 100, 40); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    // 设置产生投影的网格模型
    mesh.castShadow = true;
    // mesh.position.set(0,0,0)

    //创建一个平面几何体作为投影面
    var planeGeometry = new THREE.PlaneGeometry(300, 200);
    var planeMaterial = new THREE.MeshLambertMaterial({
      color: 0x999999
    }); //材质对象Material

    // 平面网格模型作为投影面
    var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //网格模型对象Mesh
    scene.add(planeMesh); //网格模型添加到场景中
    planeMesh.rotateX(-Math.PI / 2); //旋转网格模型
    planeMesh.position.y = -50; //设置网格模型y坐标
    // 设置接收阴影的投影面
    planeMesh.receiveShadow = true;
    /**
     * 光源设置
     */
    //环境光   环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient); //环境光对象添加到scene场景中

    // 方向光
    var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    // 设置光源位置
    directionalLight.position.set(60, 100, 40);
    scene.add(directionalLight);
    // 设置用于计算阴影的光源对象
    directionalLight.castShadow = true;
    // 设置计算阴影的区域，最好刚好紧密包围在对象周围
    // 计算阴影的区域过大：模糊  过小：看不到或显示不完整
    directionalLight.shadow.camera.near = 0.5;
    directionalLight.shadow.camera.far = 300;
    directionalLight.shadow.camera.left = -50;
    directionalLight.shadow.camera.right = 50;
    directionalLight.shadow.camera.top = 200;
    directionalLight.shadow.camera.bottom = -100;
    // 设置mapSize属性可以使阴影更清晰，不那么模糊
    // directionalLight.shadow.mapSize.set(1024,1024)
    console.log(directionalLight.shadow.camera);
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    // 设置渲染器，允许场景中使用阴影贴图
    renderer.shadowMap.enabled = true;
    // 渲染函数
    function render() {
      renderer.render(scene, camera); //执行渲染操作
    }
    render();
    //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
    controls.addEventListener('change', render);
  </script>
</body>

</html>

我们可以将上面的代码进行复制，渲染出来的效果如下
在这里插入图片描述

在这里，我们设置了投影面,并让投影面接收阴影

// 平面网格模型作为投影面
var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //网格模型对象Mesh
scene.add(planeMesh); //网格模型添加到场景中
planeMesh.rotateX(-Math.PI / 2); //旋转网格模型
planeMesh.position.y = -50; //设置网格模型y坐标
// 设置接收阴影的投影面
planeMesh.receiveShadow = true;

然后设置了阴影的计算区域

// 设置用于计算阴影的光源对象
directionalLight.castShadow = true;
// 设置计算阴影的区域，最好刚好紧密包围在对象周围
// 计算阴影的区域过大：模糊  过小：看不到或显示不完整
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 300;
directionalLight.shadow.camera.left = -50;
directionalLight.shadow.camera.right = 50;
directionalLight.shadow.camera.top = 200;
directionalLight.shadow.camera.bottom = -100;
// 设置mapSize属性可以使阴影更清晰，不那么模糊
// directionalLight.shadow.mapSize.set(1024,1024)