第六章 Three.js 光照

本文主要是介绍第六章 Three.js 光照，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在三维图形中，光照是一个非常重要的概念，它可以让你的场景看起来更加真实和生动。在这一章中，我们将深入了解Three.js中光照的基本概念，并学习如何在场景中添加各种类型的光源以及如何实现阴影效果。

6.1 光照的基本概念

光照是三维渲染中的关键因素，它可以影响物体的颜色和亮度。Three.js 提供了多种光源类型，每种光源都有其独特的属性和用途。常见的光源类型包括：

环境光 (Ambient Light)
点光源 (Point Light)
平行光 (Directional Light)
聚光灯 (Spot Light)

6.2 环境光

环境光是一种全局光源，它均匀地照亮场景中的所有物体，不会产生阴影。环境光的强度和颜色可以通过 THREE.AmbientLight 来设置。

示例代码：

// 创建一个场景
const scene = new THREE.Scene();// 创建环境光并添加到场景中
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 白色光，强度为0.5
scene.add(ambientLight);// 创建一个渲染器并添加到HTML文档中
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);// 渲染循环
function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
}
animate();

6.3 点光源

点光源从一个点向各个方向发出光线，类似于生活中的灯泡。点光源的强度会随着距离的增加而减弱。可以使用 THREE.PointLight 来创建点光源。

示例代码：

// 创建点光源并添加到场景中
const pointLight = new THREE.PointLight(0xffffff, 1, 100); // 白色光，强度为1，距离为100
pointLight.position.set(5, 5, 5); // 设置点光源的位置
scene.add(pointLight);// 添加一个辅助对象来显示点光源的位置
const pointLightHelper = new THREE.PointLightHelper(pointLight);
scene.add(pointLightHelper);

6.4 平行光

平行光类似于太阳光，它的光线是平行的，且不会随着距离的增加而减弱。可以使用 THREE.DirectionalLight 来创建平行光。

示例代码：

// 创建平行光并添加到场景中
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 白色光，强度为1
directionalLight.position.set(5, 5, 5); // 设置平行光的方向
scene.add(directionalLight);// 添加一个辅助对象来显示平行光的位置和方向
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight);
scene.add(directionalLightHelper);

6.5 聚光灯

聚光灯是一种从一个点向特定方向发出光线的光源，光线会在一定范围内聚焦。可以使用 THREE.SpotLight 来创建聚光灯。

示例代码：

// 创建聚光灯并添加到场景中
const spotLight = new THREE.SpotLight(0xffffff, 1); // 白色光，强度为1
spotLight.position.set(5, 5, 5); // 设置聚光灯的位置
spotLight.angle = Math.PI / 6; // 设置聚光灯的角度
scene.add(spotLight);// 添加一个辅助对象来显示聚光灯的位置和方向
const spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);

6.6 阴影的实现

阴影能够增加场景的真实感。Three.js 中的光源需要启用阴影，并且物体和渲染器也需要相应地配置。

示例代码：

// 启用渲染器的阴影效果
renderer.shadowMap.enabled = true;// 创建一个平面，接收阴影
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -1;
plane.receiveShadow = true; // 允许平面接收阴影
scene.add(plane);// 允许立方体投射阴影
cube.castShadow = true;// 配置点光源投射阴影
pointLight.castShadow = true;
pointLight.shadow.mapSize.width = 1024;
pointLight.shadow.mapSize.height = 1024;
pointLight.shadow.camera.near = 0.5;
pointLight.shadow.camera.far = 500;// 渲染循环
function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
}
animate();