用 Three.js 赋予立方体生机：揭秘面向对象编程的力量

2024-01-18 01:58:26

前言

Three.js 是一个强大的 JavaScript 库，可用于创建 3D 图形和应用程序。与传统的过程式编程方法不同，Three.js 采用面向对象的方式，为我们提供了一个更直观、更可扩展的方法来构建复杂的三维世界。本篇文章将引导你使用 Three.js 从头开始制作一个动态立方体，让你亲身体验面向对象编程的魅力。

面向对象编程简介

面向对象编程（OOP）是一种编程范式，它将数据和行为封装在称为对象的概念中。对象可以与其他对象交互，形成一个复杂而动态的系统。Three.js 的核心设计思想正是基于 OOP，它为我们提供了三个基本对象：场景（Scene）、相机（Camera）和渲染器（Renderer）。

场景：搭建我们的虚拟舞台

场景代表了你正在创建的三维空间。它充当所有对象和交互的容器，并定义了它们的位置和方向。要创建一个场景，可以使用以下代码：

const scene = new THREE.Scene();

相机：捕捉我们的视角

相机决定了我们如何查看场景。Three.js 提供了多种类型的相机，每种类型都有不同的视角和特性。对于我们的立方体，我们将使用透视相机，它可以模拟人眼的视角：

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

渲染器：将场景变为现实

渲染器负责将场景转换成你屏幕上看到的图像。Three.js 提供了多种渲染器，每种渲染器都有不同的功能和性能特性。对于我们的立方体，我们将使用 WebGL 渲染器：

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

创建我们的立方体

现在是构建立方体的时刻了。Three.js 提供了各种几何体，其中包括立方体。我们可以使用以下代码创建立方体：

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

动画立方体

为了让立方体动起来，我们需要使用 Three.js 的动画循环。动画循环是一个持续运行的函数，它不断更新场景并渲染画面。我们可以使用 requestAnimationFrame() 方法来创建动画循环：

function animate() {
  requestAnimationFrame(animate);

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

  renderer.render(scene, camera);
}

animate();