WebGL光照教程：用Three.js点亮你的3D场景

前端

2023-11-17 18:36:34

使用Three.js点亮你的3D场景：WebGL光照指南

准备好让你的3D场景栩栩如生了吗？光照是实现逼真和引人入胜的视觉效果的关键，而WebGL和Three.js是让光照大放异彩的完美搭档。让我们深入了解如何使用Three.js给你的场景增添光彩！

光照的作用

光照在3D场景中扮演着双重角色：

照亮场景： 光源照亮物体，使它们在黑暗中显形。
产生阴影： 光源产生阴影，为场景增添深度和真实感。

光源类型

Three.js提供了多种光源类型，每种类型模拟不同的光源行为：

环境光（AmbientLight）： 均匀地照亮整个场景，没有阴影。
漫反射光（DirectionalLight）： 模拟来自无限远处的光源，产生阴影。
点光源（PointLight）： 模拟来自一个点的辐射光源，产生阴影。
聚光灯（SpotLight）： 模拟具有锥形照射范围的光源，产生阴影。

给场景添加光源

要给场景添加光源，只需使用Three.js的灯光库：

// 创建一个环境光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

// 将光源添加到场景中
scene.add(ambientLight);

设置光源颜色和位置

自定义光源颜色和位置以匹配场景需求：

// 设置环境光源的颜色
ambientLight.color.set(0xff0000);

// 设置漫反射光源的位置
directionalLight.position.set(-10, 10, 10);

自定义光照效果

可以通过调整光源参数进一步控制光照效果：

强度： 控制光源发出的光量。
阴影： 控制光源是否产生阴影以及阴影的柔和度。
范围： 对于点光源和聚光灯，控制光源的有效范围。
衰减： 控制光源光强度随距离的变化方式。

示例代码

以下是一个示例场景，展示了环境光、漫反射光和点光源的组合使用：

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

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

// 创建漫反射光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(20, 10, 10);
scene.add(directionalLight);

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

// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 渲染场景
renderer.render(scene, camera);