ThreeJs 学习之旅(十)—Linghts(灯光)

AmbientLight(环境光)

环境光会均匀的照亮场景中的所有物体。
环境光不能用来投射阴影，因为它没有方向。

构造器（Constructor）

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )

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

前期代码准备

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();

// Material
const material = new THREE.MeshStandardMaterial();
material.roughness = 0.4;
const sphere = new THREE.Mesh(
  new THREE.SphereBufferGeometry(0.5, 32, 32),
  material
);
sphere.position.x = -1.5;

const box = new THREE.Mesh(
  new THREE.BoxBufferGeometry(1,1,1),
  material
)

const torus = new THREE.Mesh(
  new THREE.TorusBufferGeometry(0.3, 0.2, 32, 64),
  material
);
torus.position.x = 1.5;

const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(5, 5), material);
plane.rotation.x = -Math.PI * 0.5;
plane.position.y = -0.65;

scene.add(sphere, box, torus, plane);

例:

// //环境光
const ambientLight=new THREE.AmbientLight(0xffffff,0.3);
scene.add(ambientLight)

半球光（HemisphereLight）

光源直接放置于场景之上，光照颜色从天空光线颜色颜色渐变到地面光线颜色。 
半球光不能投射阴影。

构造器（Constructor）

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )

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

例:

//半球光
const hemisphereLight=new THREE.HemisphereLight('red',0.3)
hemisphereLight.position.x=0.5
hemisphereLight.position.y=0.3
scene.add(hemisphereLight)

HemisphereLightHelper

创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 半球形光源 HemisphereLight.

构造函数

HemisphereLightHelper( light : HemisphereLight, sphereSize : Number, color : Hex )

light -- 被模拟的光源.

size -- 用于模拟光源的网格尺寸.

color -- (可选的) 如果没有赋值辅助对象将使用光源的颜色.

const hemisphereLightHelper=new THREE.HemisphereLightHelper(hemisphereLight,0.2,helperColor)
scene.add(hemisphereLightHelper)

平行光（DirectionalLight）

平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

构造器

DirectionalLight( color : Integer, intensity : Float )

color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff (白色)。
intensity - (可选参数) 光照的强度。缺省值为1。

创建一个新的 DirectionalLight

 例:

//平行光
const directionLight = new THREE.DirectionalLight( 'yellow',0.3 );
scene.add(directionLight)

 

点光源（PointLight）

从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。

构造器（Constructor）

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)。
intensity - (可选参数) 光照强度。 缺省值 1。

distance - 这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)。缺省值 0.
decay - 沿着光照距离的衰退量。缺省值 1。 在 physically correct 模式中，decay = 2。

创建一个新的点光源（PointLight）。

const pointLight = new THREE.PointLight( 0x1eff00,0.3 );
scene.add(pointLight)

平面光光源（RectAreaLight）

平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。

注意事项:

• 不支持阴影。
• 只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。
• 你必须在你的场景中加入 RectAreaLightUniformsLib ，并调用init()。

构造器（Constructor）

RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )

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

// //平面光光源
const rectAreaLight=new THREE.RectAreaLight(0x4e00ff,2,1,1)
rectAreaLight.lookAt(new THREE.Vector3()) //这行代码用来指代平行光光源指向的中心位置，一般情况下会指向需要映射物体的中心位置。
rectAreaLight.position.y=-0.5
scene.add(rectAreaLight)

 

RectAreaLightHelper

创建一个表示 RectAreaLight 的辅助对象.

构造函数

RectAreaLightHelper( light : RectAreaLight, color : Hex )

light -- 被模拟的光源.

color -- (可选) 如果没有赋值辅助对象将使用光源的颜色.

import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper.js";

var helper = new RectAreaLightHelper( rectAreaLight ,helperColor);

scene.add( helper );

聚光灯（SpotLight）

聚光灯是从一个方向上的一个点发出，沿着一个圆锥体，它离光越远，它的尺寸就越大。

该光源可以投射阴影 - 跳转至 SpotLightShadow 查看更多细节。

构造器（Constructor）

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )

color - (可选参数) 十六进制光照颜色。 缺省值 0xffffff (白色)。
intensity - (可选参数) 光照强度。 缺省值 1。

distance - 从光源发出光的最大距离，其强度根据光源的距离线性衰减。
angle - 光线散射角度，最大为Math.PI/2。
penumbra - 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
decay - 沿着光照距离的衰减量。

创建一个新的聚光灯。

//聚光灯
const spotLight=new THREE.SpotLight(0x1eff00,1,4,Math.PI*0.3,0.9,9)
spotLight.position.x=2
scene.add(spotLight)

 

SpotLightHelper

用于模拟聚光灯 SpotLight 的锥形辅助对象.

构造函数

SpotLightHelper( light : SpotLight, color : Hex )

light -- 被模拟的聚光灯 SpotLight .

color -- (可选的) 如果没有赋值辅助对象将使用光源的颜色.

let helperColor=0x4e00ff;
const spotLightHelper=new THREE.SpotLightHelper(spotLight,helperColor)
scene.add(spotLightHelper)