ThreeJS学习：光

前言

现实世界中，之所以我们能用眼睛看到物体，是因为有太阳、白炽灯等各种灯光的照射，等该功能照射到物体上，物体将灯光反射到我们的眼睛里，我们的大脑里才能呈现物体的影响。如果没有光，我们看到的将是漆黑一片。同时光的亮度、光的颜色、光的来源、光的位置等等一系列因素，都会影响到我们对物体的观察。
虚拟的世界也一样，可以通过对光的设置，来修改物体呈现的效果。

如果不设置光，则物体呈现的是黑色一片。

效果

光有几种不同的分类，主要包括环境光、平行光、点光以及聚光灯几种。

一、环境光

环境光，整个环境的光；即在某一个空间内，所有的位置都在发光，且光的强度都一样。
在ThreeJS中，我们通过AmbientLight来设置环境光。

  // 第一个参数是光线的颜色，第二个参数是光线的强度
  const ambientLight = new THREE.AmbientLight(0xFF_FF_FF, 1000);
  scene.add(ambientLight);

效果

开发中，我们一般将环境光设为白色，并设置一定的强度。
请注意，MeshBasicMaterial的材质，不受光线的影响。

二、平行光

平行光，从某一个方向平行射进来的光；光照射到哪个方向，哪个方向的面就呈现亮色；反正照射不到的方向，呈现暗色。

现实世界中，太阳光可以近似的看成平行光，太阳光照射到哪里，哪里就是白天；反之则是黑夜。这才有了白天黑夜之分。

在ThreeJS中，通过DirectionalLight设置方向光；

// 创建方向光，第一个参数是光的颜色，第二个参数是光的强度
const directionalLight = new THREE.DirectionalLight(0xff_ff_ff, 10);
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(100, 40, 0);
// 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
directionalLight.target = mesh;
// 光源添加到场景中
scene.add(directionalLight);

// 可通过辅助观察对象，观察光源的位置
const dirLightHelper = new THREE.DirectionalLightHelper(
    directionalLight,
    5,
    0xFF_00_00,
  );
scene.add(dirLightHelper);

效果

三、点光

点光，从某一个点向四周发散光芒，物体离这个点越近光越强，反之越远光越弱。

就像现实生活中的圆形灯泡，灯泡的光芒向房间内四散，离灯泡越近灯光越亮，离灯泡越远灯泡越暗。

在ThreeJS中，使用PointLight来设置点光；

// 创建点光
const pointLight = new THREE.PointLight(0xff_ff_ff, 2000);
// 设置点光的位置
pointLight.position.set(120, 120, 120);
// 设置光源不随距离衰减，0.0表示不随距离衰减（点光照射到的位置，光的强度相同）
pointLight.decay = 1.2;
// 设置光线可达到的距离，超过这个距离，不会有光线
pointLight.distance = 200;
// 将点光添加到场景中
scene.add(pointLight);

// 可通过辅助观察对象，观察光源的位置
const pointLightHelper = new THREE.PointLightHelper(
    pointLight,
    10,
    0xff_00_00,
  );
scene.add(pointLightHelper);

效果

四、聚光灯

聚光灯，从某一个点，从一定的角度发出光芒，光线只局限于这个角度所在的区域内。离发光点越近越亮，离发光点越远越暗。

现实生活中，舞台所用的聚光灯、家里常备的手电筒。

聚光灯

在ThreeJS中，使用SpotLight来创建聚光灯

// 创建聚光灯
const spotLight = new THREE.SpotLight(0xFF_FF_FF, 2000);
// 设置聚光灯的位置
spotLight.position.set(100, 100, 0);
//  设置光源不随距离衰减，0.0表示不随距离衰减（点光照射到的位置，光的强度相同）
spotLight.decay = 1.2;
// 设置聚光灯发散的角度，超出这个角度的范围，没有光线
spotLight.angle = Math.PI / 3;
// 设置聚光灯可达到的距离，超过这个距离，不会有光线
spotLight.distance = 120;

// 可通过辅助观察对象，观察光源的位置
const spotLightHelper = new THREE.SpotLightHelper(spotLight, 10);
scene.add(spotLightHelper);

效果

五、源代码

demo

ThreeJS学习：光