光影营造：Three.js 光源对象指南

Three.js 光源对象指南

光照是计算机图形学中必不可少的一部分，它可以为场景增添深度、阴影和气氛。Three.js 提供了多种光源类型，允许您创建各种照明效果。

Three.js 光源类型

Three.js 提供了五种主要的光源类型：

• AmbientLight（环境光）： 环境光照亮整个场景，通常用于模拟全局照明。
• PointLight（点光源）： 点光源从一个点发出光线，可以模拟蜡烛、灯泡或其他点状光源。
• SpotLight（聚光源）： 聚光源从一个点发出锥形光线，可以模拟手电筒或聚光灯。
• DirectionalLight（平行光）： 平行光从一个方向发出平行光线，可以模拟太阳或其他远距离光源。
• HemisphereLight（半球光）： 半球光从一个半球发出光线，可以模拟天空或其他半球形光源。

使用 Three.js 光源对象

要使用 Three.js 光源对象，您需要首先创建一个光源对象，然后将其添加到场景中。您可以使用以下代码创建光源对象：

var light = new THREE.PointLight(0xffffff, 1, 100);

第一个参数是光源的颜色，第二个参数是光源的强度，第三个参数是光源的衰减距离。

要将光源添加到场景中，您可以使用以下代码：

scene.add(light);

Three.js 光源属性

Three.js 光源对象具有许多属性，允许您控制光源的行为。这些属性包括：

• color： 光源的颜色。
• intensity： 光源的强度。
• distance： 光源的衰减距离。
• decay： 光源的衰减率。
• castShadow： 光源是否投射阴影。
• shadowCameraNear： 光源阴影的近平面距离。
• shadowCameraFar： 光源阴影的远平面距离。
• shadowCameraFov： 光源阴影的视角。
• shadowCameraVisible： 光源阴影是否可见。

Three.js 光源示例

以下是一些使用 Three.js 光源对象的示例：

• 环境光示例：

var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

• 点光源示例：

var pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

• 聚光源示例：

var spotLight = new THREE.SpotLight(0xffffff, 1, 100, Math.PI / 3, 1);
spotLight.position.set(10, 10, 10);
scene.add(spotLight);

• 平行光示例：

var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

• 半球光示例：

var hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 1);
scene.add(hemisphereLight);

总结

Three.js 光源对象是构建逼真且身临其境的 3D 场景的关键。通过使用不同的光源类型和属性，您可以创建各种照明效果。