three.js：掌握模型、光源和材质的奥秘

2023-11-30 05:42:44

引言

在计算机图形学的迷人世界中，three.js 闪耀着夺目光彩。它是一个强大的 3D JavaScript 库，赋予了开发者创造交互式 3D 体验的能力。在本文中，我们将深入探讨 three.js 的模型、光源和材质，揭示它们如何协同工作以赋予虚拟世界以生命和活力。

模型：塑造虚拟世界的骨架

模型是三维世界的基本组成部分，它们定义了场景中对象的形状和几何体。three.js 提供了广泛的模型类型，从简单的立方体到复杂的人物和环境。每个模型都由顶点、边和面组成，共同创建出对象的独特形状。

光源：照亮虚拟世界

光源对于创造逼真的 3D 场景至关重要。three.js 提供了各种光源类型，每种类型都有其独特的属性。

环境光 (AmbientLight) ：均匀地照亮场景中的所有对象，营造基础照明。
平行光 (DirectionalLight) ：模拟太阳光或其他平行光源，产生阴影并增强对象深度感。
点光源 (PointLight) ：从特定点向外发出光线，创建局部照明区域。
聚光灯光源 (SpotLight) ：模拟聚光灯，在锥形区域内发出光线，产生聚焦效果。
球谐光 (HemisphereLight) ：模拟天空光，从上半球或下半球向下或向上发出光线。

材质：賦予模型以質感

材质决定了模型在光线下呈现的外观。three.js 提供了多种材质，包括：

基础材质 (BasicMaterial) ：基本材质，具有单一颜色和纹理。
Phong 材质 (PhongMaterial) ：Phong 材质，考虑了光照和镜面反射，产生逼真的表面。
Lambert 材质 (LambertMaterial) ：Lambert 材质，考虑了漫反射，产生平滑的表面。
物理材质 (PhysicalMaterial) ：物理材质，根据现实世界的物理属性计算表面交互，产生高度逼真的效果。

整合模型、光源和材質

将模型、光源和材质组合起来，就能创造出令人惊叹的 3D 场景。模型提供了形状和结构，光源照亮了场景，材质为对象赋予了真实感。通过仔细调节这些元素，开发者可以营造出各种视觉效果，从昏暗的神秘到明亮的活力。

示例：打造一个动态光照场景

为了展示 three.js 的强大功能，让我们创建一个动态光照场景。我们将使用平行光和点光源来照亮一个旋转的立方体，材质赋予立方体金属光泽。

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

// 创建模型
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0xffffff, emissive: 0x888888 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

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

// 渲染场景
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
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();