3D模型的华丽变身：用光照点亮虚拟世界

前端

2023-04-10 07:08:47

提升虚拟世界：使用 WebGL 的光照、材质和纹理

在之前的文章中，我们探索了使用 three.js 绘制 3D 立方体的基础知识。虽然它给我们带来了一个形状，但它仍然缺乏一些东西——真实的感官。在这里，光照、材质和纹理发挥了至关重要的作用，让我们踏上提升虚拟世界之旅吧！

光照：照亮你的场景

想象一个没有阳光的房间，它是多么暗淡无光。在 3D 图形中，光照扮演着类似的角色。它赋予场景生命力，通过投射虚拟光线，突出细节并营造逼真的氛围。

认识不同的光照模型

three.js 提供了丰富的照明库，包括：

平行光（DirectionalLight）： 模拟来自远处的太阳或其他强光源。
点光源（PointLight）： 模拟来自单一位置的小型光源，例如灯泡。
聚光灯（SpotLight）： 创建锥形光束，类似于手电筒或聚光灯。
环境光（AmbientLight）： 提供均匀的光线，为场景中的所有对象提供基本照明。

材质：定义外观

材质决定了模型的外观和质地。它控制颜色、光泽度、透明度和反射特性，将生命注入 3D 对象中。通过探索不同的材质，例如 Lambert、Phong 和 Standard，你可以定制对象的物理特性，使其更加逼真。

纹理：增添细节

纹理就像给模型贴上的标签，它为表面增添了颜色、图案和纹理。从木材纹理到布料质地，纹理赋予了对象独特的触感和外观。通过使用图像文件或程序纹理，你可以创建令人难以置信的逼真效果。

代码示例：照亮一个场景

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

// 添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 1, 0);
scene.add(directionalLight);

// 添加点光源
const pointLight = new THREE.PointLight(0x00ff00, 1);
pointLight.position.set(0, 1, 1);
scene.add(pointLight);

// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 渲染场景
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();

常见问题解答

什么是光照贴图？
- 光照贴图是一种烘焙技术，可以将光照信息存储在纹理中，从而在不影响性能的情况下创建逼真的照明效果。
如何创建纹理？
- 你可以使用图像编辑软件（如 Photoshop）创建纹理，或使用程序纹理库生成纹理。
我可以在 three.js 中使用哪些类型的材质？
- three.js 提供了多种材质，包括 Lambert、Phong、Standard、物理和 Toon 材质。
如何优化我的光照设置？
- 为了获得最佳性能，请使用光照贴图、谨慎使用阴影并根据场景需求调整光照强度。
如何创建动态光照效果？
- 你可以使用 three.js 的 Tween.js 库或自定义动画系统来创建动态光照效果，例如闪烁的灯光或移动光源。