纵观Three.js中的光源与光照，解锁真实世界的炫酷效果

前端

2023-09-06 20:02:32

Three.js 光源与光照：赋予你的 3D 场景生命

想象一下一个 3D 场景，缺乏光线和阴影，它看起来会多么单调乏味。光源和光照是计算机图形学中至关重要的概念，在 Three.js 中尤为如此。通过这些元素，你可以赋予场景以生命，创造出逼真且引人入胜的视觉体验。

认识 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 renderer = new THREE.WebGLRenderer();

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

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

camera.position.z = 5;

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}

animate();

常见问题解答

如何创建平行光？
- const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
如何更改光源强度？
- 使用 light.intensity 属性，例如：light.intensity = 2;
如何应用布林-冯氏光照模型？
- renderer.shadowMap.type = THREE.PCFShadowMap;
为什么我的光源不产生阴影？
- 确保已为光源启用阴影，例如：light.castShadow = true;
如何获得更逼真的光照效果？
- 尝试使用环境光和多种光源类型，以营造更自然的光照环境。