ThreeJS灯光与阴影应用指南

three.js是一个基于WebGL的JavaScript 3D库，它极大地简化了Web浏览器中3D图形的渲染过程。在three.js中，场景（scene）中物体的光照效果是通过不同的光源实现的，每种光源都有其独特的用途和特性。此外，阴影的实现则增强了场景的真实感和深度感。以下是关于three.js中常见灯光及阴影使用的一些详细知识点。 一、环境光（AmbientLight） 环境光代表场景中所有方向的无处不在的间接光，它不具有方向性，不能产生阴影，因为其光线来源不明。环境光能够均匀地照亮场景中的所有物体，但其强度和颜色可以通过设置参数进行调整。 1. 创建环境光： ```javascript var ambientLight = new THREE.AmbientLight(hex, intensity); ``` 其中，`hex`是光的颜色，`intensity`是光的强度。 2. 将环境光添加到场景中： ```javascript scene.add(ambientLight); ``` 二、点光源（PointLight） 点光源模拟光源从一个点向四面八方发光的效果，类似于现实生活中的灯泡。点光源是方向性和位置性的，它可以产生阴影。 1. 创建点光源： ```javascript var pointLight = new THREE.PointLight(hex, intensity, distance); ``` 其中，`hex`是光的颜色，`intensity`是光的强度，`distance`表示光的照射范围。 2. 设置点光源的位置： ```javascript pointLight.position.set(x, y, z); ``` 3. 将点光源添加到场景中： ```javascript scene.add(pointLight); ``` 三、聚光灯（SpotLight） 聚光灯是一种有方向性的光源，它只照亮一个特定的方向区域，并且可以产生锥形的光照效果，类似于现实生活中的手电筒或舞台聚光灯。聚光灯同样可以产生阴影。 1. 创建聚光灯： ```javascript var spotLight = new THREE.SpotLight(hex, intensity, distance, angle, penumbra, decay); ``` 各参数的含义为： - `hex`：光的颜色。 - `intensity`：光的强度。 - `distance`：光线在达到`distance`距离后，光线强度衰减到0。 - `angle`：光源锥形区域的角度。 - `penumbra`：光源锥形区域外的柔和边缘宽度。 - `decay`：光线强度随距离衰减的比例。 2. 设置聚光灯的位置和目标点（指向哪里）： ```javascript spotLight.position.set(x, y, z); spotLight.target.position.set(x, y, z); scene.add(spotLight.target); ``` 3. 将聚光灯添加到场景中： ```javascript scene.add(spotLight); ``` 四、平行光（DirectionalLight） 平行光模拟来自无限远处的光源（例如太阳光），光线是平行的，光照效果不会随着距离变化而衰减。平行光可以产生阴影，适用于模拟远距离的光源。 1. 创建平行光： ```javascript var directionalLight = new THREE.DirectionalLight(hex, intensity); ``` 其中，`hex`是光的颜色，`intensity`是光的强度。 2. 设置平行光的方向： ```javascript directionalLight.position.set(x, y, z); directionalLight.target.position.set(x, y, z); scene.add(directionalLight.target); ``` 3. 将平行光添加到场景中： ```javascript scene.add(directionalLight); ``` 五、阴影的使用 在three.js中，阴影的生成通常需要设置光源的`castShadow`属性为`true`，并确保阴影被投射的物体也有相应的阴影设置。另外，场景中的接收阴影的物体也需要设置以接收阴影。开启阴影计算可能会显著影响性能，因此需要合理调整阴影的分辨率、模糊度等参数。 1. 开启阴影计算： ```javascript light.castShadow = true; object.castShadow = true; object.receiveShadow = true; ``` 2. 设置阴影的一些属性（可选）： ```javascript directionalLight.shadow.camera.near = 1; directionalLight.shadow.camera.far = 1000; directionalLight.shadow.camera.fov = 50; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; ``` 3. 在渲染器中启用阴影： ```javascript renderer.shadowMap.enabled = true; ``` 以上就是three.js中常见灯光类型及其使用方法以及阴影的基础知识。通过正确使用这些灯光和阴影效果，开发者可以在3D场景中创造出具有丰富层次和真实感的视觉体验。在实际项目中，灵活运用不同类型的光源及阴影设置，是创建高质量3D图形的关键。