Three.js入坑全攻略：光源的魅力你无法想象！

前端

2023-02-21 10:36:32

点亮你的Three.js世界：掌握光源，开启视觉盛宴

当你踏入Three.js的虚拟世界，光源将成为你的秘密武器，助你打造身临其境的3D体验。正如现实世界中的光源，Three.js中的光源能够照亮你的场景，突出细节，并营造逼真的氛围。让我们开启一场探索之旅，了解Three.js光源的奥妙！

光源类型：你的照明画笔

Three.js为你提供了各种光源类型，每一类都拥有独特的特性和用途：

环境光 (AmbientLight) ：这就像一个无形的穹顶，均匀地照亮整个场景，营造柔和的氛围。
平行光 (DirectionalLight) ：它模仿来自太阳或聚光灯的定向光线，产生强烈的阴影效果，突出物体轮廓。
点光源 (PointLight) ：它从一个中心点向各个方向发光，就像一盏电灯，营造局部照明效果。
聚光灯光 (SpotLight) ：它将光线集中在一个锥形区域内，就像手电筒的光线，强调场景中的特定部分。
球形光 (HemisphereLight) ：它在场景上方和下方形成一个半球形的照明区，模拟天空光和地面反射光的自然效果。

光源属性：控制你的照明

每个光源类型都包含一系列属性，让你可以掌控其行为：

亮度 (Intensity) ：调节光源的整体亮度，从暗淡到耀眼。
颜色 (Color) ：选择光源的颜色，可以是单色或混合色，赋予场景不同的氛围。
强度 (Power) ：控制光源的强度，影响它对场景中物体的照明效果。
衰减方式 (Decay) ：设定光线随距离衰减的方式，包括线性、平方和立方衰减。

光源运用：点亮你的创造力

熟练掌握光源的类型和属性后，你就可以发挥想象力，为你的Three.js场景注入光彩：

环境光：烘托整体氛围 ：使用环境光营造柔和的背景照明，为你的场景奠定基调。
平行光：突出细节 ：用平行光模仿太阳光，产生强烈的阴影，突出物体轮廓和纹理。
点光源：营造局部效果 ：用点光源模拟电灯或火炬，照亮场景中的特定区域，创造聚焦效果。
聚光灯光：引人注目 ：用聚光灯光将注意力集中到场景中的关键元素，营造戏剧性的效果。
球形光：自然照明 ：用球形光模拟天空光和地面反射光，为你的场景带来自然真实感。

代码示例

// 创建环境光
const ambientLight = new THREE.AmbientLight(0x404040);

// 创建平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);

// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.set(0, 5, 0);

// 创建聚光灯光
const spotLight = new THREE.SpotLight(0xffffff, 0.5);
spotLight.position.set(10, 10, 10);
spotLight.target.position.set(0, 0, 0);
spotLight.angle = Math.PI / 4;

// 创建球形光
const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.5);

// 将光源添加到场景
scene.add(ambientLight, directionalLight, pointLight, spotLight, hemiLight);