计算机中的两个房子：three.js 初体验

前端

2023-09-25 21:01:10

在这篇文章中，我将带大家踏上 three.js 的奇妙旅程。three.js 是一种功能强大的 JavaScript 库，可让您轻松地在网络浏览器中创建和呈现 3D 图形。

前言

当我踏入 three.js 的世界时，我就像一个初入异国的旅行者。这个 3D 图形库看似复杂难懂，但只要我们一步一步来，就能领略其迷人的魅力。

three.js 的基本概念

首先，让我们了解一些 three.js 的基本概念。three.js 主要用于创建 3D 场景，而这些场景是由各种对象组成的。这些对象可以是几何体、材质、光线和摄像机。

场景搭建

创建一个场景就像建造一栋房子，我们需要一个容器来容纳所有内容。在 three.js 中，我们使用 Scene 对象作为容器。

const scene = new THREE.Scene();

引入对象

接下来，我们需要为场景添加对象。three.js 提供了各种几何体，如立方体、球体和圆柱体。要创建立方体，我们可以使用以下代码：

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

引入光照

光照对于呈现逼真的 3D 场景至关重要。three.js 提供了多种光源类型，如环境光、平行光和点光源。要添加环境光，我们可以使用以下代码：

const ambientLight = new THREE.AmbientLight(0x404040);

引入摄像机

摄像机负责决定我们如何查看场景。three.js 提供了多种摄像机类型，如透视摄像机和正交摄像机。要创建透视摄像机，我们可以使用以下代码：

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

渲染场景

最后，我们需要渲染场景才能将其显示在屏幕上。为此，我们需要一个渲染器。three.js 提供了 WebGLRenderer，它利用 WebGL 在浏览器中渲染 3D 场景。

const renderer = new THREE.WebGLRenderer();

实时交互

three.js 允许我们与 3D 场景进行交互。我们可以通过鼠标或键盘事件来移动摄像机或旋转对象。以下代码展示了如何使用鼠标事件来旋转立方体：

document.addEventListener('mousemove', (event) => {
  cube.rotation.y = event.clientX / window.innerWidth;
  cube.rotation.x = event.clientY / window.innerHeight;
});