threejs-光源和阴影

---

前言

threejs光源种类、属性。开启阴影需要的设置

---

基础光源

THREE.AmbientLight()

• 基本光源， 该光源的颜色会叠加至场景现有物体的颜色上

• 无法产生阴影 ❌

THREE.PointLight()

• 点光源， 从空间内一点向所有方向发射光线
• 可以产生阴影 ⭐（新版）

常用属性

  color //（光源颜色），
  distance //（照射距离，默认为0，超出该距离后照射强度减为0），
  intensity //（强度），
  position //（位置），
  deacy //（随着光源的距离衰减的速度），
  visible //（是否可见）

THREE.SpotLight()

• 类似于聚光灯、手电效果
• 可以产生阴影 ⭐

常用属性

angle //（光源发射的光束宽度，弧度制），
castShadow //（阴影),
color //（光源颜色），
deacy //（衰减），
distance //（照射距离），
intensity //（强度），
position //（位置），
target //（模板，指向一个THREE.Object3D对象⭐），
visible //（是否可见），
penumbra //（半影区）

THREE.DirectionalLight()

• 平行光、无限光，发射出的光线可以看作是平行的，类似于太阳光,这照射范围从 position 到 target的位置
• 可以产生阴影 ⭐

常用属性

 castShadow //（阴影）,
 color //（光源颜色），
 intensity //（强度），
 position //（位置），
 target //（模板，指向一个THREE.Object3D对象⭐），
 visible //（是否可见），
 penumbra //（半影区）

特殊光源

THREE.HemisphereLight()

• 半球光，通过模拟反光面和光线微弱的天空来创建室外光线

• 无法产生阴影 ❌

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )
skyColor - (可选参数) 天空中发出光线的颜色。 缺省值 0xffffff。
groundColor - (可选参数) 地面发出光线的颜色。 缺省值 0xffffff。
intensity - (可选参数) 光照强度。 缺省值 1。

THREE.AreaLight()

• 可以指定散射光源的平面，而不是一个点
• 无法产生阴影 ❌

 RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )
   color - (可选参数) 十六进制数字表示的光照颜色。缺省值为 0xffffff (白色)
   intensity - (可选参数) 光源强度／亮度 。缺省值为 1。
   width - (可选参数) 光源宽度。缺省值为 10。
   height - (可选参数) 光源高度。缺省值为 10。

   /*
     使用方法    
   */
   // 创建矩形区
   var areaLight1 = new THREE.RectAreaLight(0xff0000, 500, 4, 10);
   areaLight1.position.set(-10, 10, -35);
   scene.add(areaLight1);
   // 添加发光体
   var planeGeometry1 = new THREE.BoxGeometry(4, 10, 0);
   var planeGeometry1Mat = new THREE.MeshBasicMaterial({
   color: 0xff0000
   });
   var plane1 = new THREE.Mesh(planeGeometry1, planeGeometry1Mat);
   plane1.position.copy(areaLight1.position); // position复制
   scene.add(plane1);

THREE.LensFlare()

严格来讲不是一种光源，可以为镜头添加光晕效果

LensflareElement( texture : Texture, size : Float, distance : Float, color : Color )
texture - 用于光晕的的 THREE.Texture。
size - （可选）以像素为单位的大小
distance - （可选）（0-1）距光源（0 = 在光源处）
color - （可选）镜头光晕 的颜色

// 举例
  var textureFlare0 = THREE.ImageUtils.loadTexture("../lensflare0.png");
  var textureFlare3 = THREE.ImageUtils.loadTexture("../lensflare1.png");

  var flareColor = new THREE.Color(0xffaacc);

  var lensFlare = new THREE.Lensflare();

  lensFlare.addElement(new THREE.LensflareElement(textureFlare0, 350, 0.0, flareColor));
  lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 60, 0.6, flareColor));
  lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 70, 0.7, flareColor));
  lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 120, 0.9, flareColor));
  lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 70, 1.0, flareColor));

开启阴影设置

1渲染器允许渲染阴影

render.shadowMap.enabled = true;

2 物体开放阴影

投射阴影的物体，如立方体，球等。

接收阴影的物体如地板

 cube.castShadow = true; // 投射阴影
 sphere.castShadow = true; // 投射阴影
 plane.receiveShadow = true; // 接收阴影

3 光源开启阴影效果

SpotLight、DirectionalLight、PointLight可以产生阴影

 spotLight.castShadow = true;

总结

基础光源

• THREE.AmbientLight()
• THREE.PointLight()
• THREE.SpotLight()
• THREE.DirectionalLight()

特殊光源

• THREE.HemisphereLight()
• THREE.AreaLight()
• THREE.LensFlare()

开启阴影设置

• 1渲染器允许渲染阴影
• 2 物体开放阴影
• 3 光源开启阴影效果