Three.js 入门教程：几何体、材质和纹理

2024-02-18 21:18:32

几何体：构成 3D 世界的基础

在 Three.js 中，几何体是构成 3D 世界的基础。它们定义了对象的外形和轮廓。Three.js 提供了多种几何体类型，从简单的立方体和球体到更复杂的网格和粒子系统。

创建几何体

创建几何体的过程相对简单。我们可以使用 Three.js 中预定义的类或使用 BufferGeometry 类创建一个自定义几何体。例如，要创建一个立方体，我们可以使用以下代码：

const geometry = new THREE.BoxGeometry(1, 1, 1);

材质：赋予物体生命

一旦有了几何体，下一步就是为它赋予生命，让它在三维空间中可见。这是通过材质实现的。材质定义了物体的表面外观，包括颜色、透明度和纹理。

创建材质

Three.js 提供了多种材质类型，包括基本材质、Phong 材质和 Lambert 材质。每种材质类型都具有不同的属性，可用于实现不同的效果。例如，要创建一个具有基本颜色的材质，我们可以使用以下代码：

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

纹理：增添真实感

纹理是将图像应用于几何体表面的过程。它们可以显著提高场景的真实感和细节。Three.js 支持多种纹理格式，包括 JPEG、PNG 和 DDS。

加载纹理

要将纹理应用于材质，首先需要加载它。我们可以使用 Three.js 中的 TextureLoader 类来执行此操作。例如，以下代码加载一个名为 myTexture.jpg 的纹理：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('myTexture.jpg');

应用纹理

一旦加载了纹理，就可以将其应用于材质。我们可以使用材质的 map 属性来执行此操作。例如，以下代码将前面创建的纹理应用于基本材质：

material.map = texture;

构建一个场景

现在我们已经了解了几何体、材质和纹理的基本概念，我们可以构建一个简单的场景来展示它们的用法。例如，我们可以创建一个旋转的立方体：

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

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, map: texture });

// 创建网格
const mesh = new THREE.Mesh(geometry, material);

// 添加网格到场景
scene.add(mesh);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器添加到 DOM
document.body.appendChild(renderer.domElement);

// 动画循环
function animate() {
  requestAnimationFrame(animate);

  // 旋转网格
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;

  // 渲染场景
  renderer.render(scene, camera);
}

animate();