Three.js 中光源全面指南：揭秘虚拟世界的灯光魅力

在 Three.js 的世界里，光源扮演着至关重要的角色，为虚拟场景增添真实感和深度。掌握光源的使用技巧，可以极大地提升渲染效果，让您的 3D 作品栩栩如生。本文将带领您深入探索 Three.js 中四种最常用光源类型，为您揭晓虚拟世界的灯光魅力。

环境光：渲染场景整体亮度

环境光是一种均匀分布的光源，照亮整个场景，为物体提供基础照明。它不投射阴影，而是为场景创造一个普遍的亮度层，营造出空间感和氛围。通常用于模拟自然光或室内空间的漫射光。

平行光：模拟太阳或月亮的平行光线

平行光是一种平行于特定方向发出的光源，类似于太阳或月亮发出的光线。它投射出清晰的阴影，营造出强烈的光线效果，非常适合模拟户外场景或舞台上的聚光灯效果。

点光源：从单点向各个方向发出的光线

点光源是一种从单点向各个方向发出的光源，类似于灯泡发出的光线。它投射出锥形的阴影，强度随着与光源距离的增加而减弱。通常用于模拟路灯、室内灯具或其他点状光源。

聚光灯：聚焦的平行光锥体

聚光灯是一种平行光锥体，强度随着与光源距离的增加而减弱。它投射出清晰的圆形或矩形阴影，营造出集中的光线效果。通常用于模拟舞台灯光、手电筒或其他定向光源。

进阶技巧：阴影、照明和实时可视化

除了选择合适的光源类型外，还需要考虑阴影、照明和实时可视化。阴影可以增强深度感，照明可以塑造场景的氛围，而实时可视化可以帮助您实时预览灯光效果。通过巧妙地结合这些元素，您可以创建令人惊叹的 3D 场景。

示例代码：点光源照亮旋转球体

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

// 创建球体
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshPhongMaterial({color: 0x00ff00});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

// 渲染场景
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const animate = function () {
  requestAnimationFrame(animate);

  sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();

结语

光源是 Three.js 中至关重要的元素，它可以为虚拟场景注入生命力和真实感。通过理解不同光源类型的特性和应用场景，您能够巧妙地塑造场景氛围，创建逼真的灯光效果，让您的 3D 作品脱颖而出。无论是构建逼真的户外环境，还是渲染身临其境的室内空间，掌握光源的使用技巧将使您的 Three.js 作品更上一层楼。