让你的场景熠熠生辉：探索Three.js中的光源设置类型

前端

2023-10-13 11:23:25

Three.js 光源指南：照亮你的虚拟世界

摘要

在 Three.js 的世界中，光源扮演着至关重要的角色，它们可以赋予场景逼真感和氛围。本文将深入探讨 Three.js 中的光源类型和设置，助你掌握如何使用它们来点亮你的三维世界。

光源类型

Three.js 提供了一系列光源类型，每种类型都有其独特的特性和用途：

环境光： 模拟来自天空或其他光源的漫反射光，均匀地照亮整个场景。
半球光： 从顶部向下照射，营造出类似天空或高处光源的效果。
矩形光： 从矩形区域发出，模仿日光灯、窗户等光源。
方向光： 模拟来自远方的光源，如太阳。
点光源： 从一个点发光，类似于灯泡或其他点状光源。
聚光灯： 从锥形区域发出，模拟手电筒或聚光灯。

光源设置

除了光源类型，Three.js 还允许你调整光源的各种属性：

强度： 控制光源的亮度。
颜色： 决定光源的颜色。
衰减： 光源随着距离减弱的程度。
阴影： 指定光源是否投射阴影。
投射纹理： 控制光源投射到物体上的纹理。

巧用光源

熟练使用 Three.js 中的光源可以创造出逼真的场景。以下是一些建议：

使用环境光和半球光模拟自然光。
用矩形光模仿室内光。
运用方向光制造阳光效果。
点光源可以模拟灯具或营火。
聚光灯适合突显特定区域。

代码示例

以下代码展示了如何使用 Three.js 创建一个简单的场景，并添加一个点光源：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);

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

  renderer.render(scene, camera);
}

animate();