基础入门：使用Three.js进行WebGL开发-js教程-PHP中文网

浏览器中的 3D 图形自首次推出以来一直是一个热门话题。但如果您要使用纯 WebGL 创建应用程序，则需要很长时间。这正是最近出现一些真正有用的库的原因。 Three.js 是最受欢迎的之一，在本系列中，我将向您展示如何最好地使用它，以便为您的用户创建令人惊叹的 3D 体验。

在开始之前，我确实希望您在开始阅读本教程之前对 3D 空间有基本的了解，因为我不会解释坐标、向量等内容。

第 1 步：准备工作

首先，创建三个文件：index.html、main.js 和 style.css。现在，下载 Three.js（带有示例和源代码的整个 zip 文件，或者单独的 JavaScript 文件，您可以选择）。现在，打开 index.html 并插入以下代码：

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="./style.css">
	<script src="./three.js"></script>
</head>
<body>
	<script src="./main.js"></script>
</body>
</html>

登录后复制

这就是您在此文件中所需要的全部内容。只是脚本和样式表的声明。所有的魔力都将发生在 main.js 中，但在我们实现这一点之前，我们还需要一个技巧来让应用程序看起来更好。打开 style.css 并插入以下代码：

canvas {
	position: fixed;
	top: 0;
	left: 0;
}

登录后复制

这会将画布定位在左上角，因为默认情况下 body 将具有 8px 的边距。现在我们可以继续处理 JavaScript 代码。

第 2 步：场景和渲染器

Three.js 使用显示列表的概念。这意味着所有对象都存储在列表中，然后绘制到屏幕上。

Three.js 使用显示列表的概念。这意味着所有对象都存储在列表中，然后绘制到屏幕上。在这里，这是一个 THREE.Scene 对象。您需要将想要在屏幕上绘制的任何对象添加到场景中。您可以拥有任意多个场景，但一个渲染器一次只能绘制一个场景（当然您可以切换显示的场景）。

渲染器只是将场景中的所有内容绘制到 WebGL 画布上。 Three.js 还支持在 SVG 或 2D Canvas 上绘图，但我们将重点关注 WebGL。

首先，让我们将窗口的宽度和高度存储在变量中，稍后我们将使用它：

var width = window.innerWidth;
var height = window.innerHeight;

登录后复制

现在定义渲染器和场景：

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene;

登录后复制

第一行定义 WebGL 渲染器。您可以将第一个参数中的渲染器选项作为地图传递。这里，我们将 antialias 设置为 true，因为我们希望对象的边缘平滑，而不是锯齿状。

第二行将渲染器大小设置为窗口的大小，在第三行中，我们将渲染器的 canvas 元素添加到文档中（您也可以使用库来执行此操作，例如 jQuery： $( 'body').append(renderer.domElement))。

最后一个定义场景，不需要参数。

第 3 步：立方体

现在让我们添加要绘制的内容。让它成为一个立方体，因为它是最简单的 3D 对象。在 Three.js 中，屏幕上绘制的对象称为网格。每个网格都必须有自己的几何形状和材料。几何是一组需要连接才能创建对象的点。材质只是覆盖对象的油漆（或绘画，但这不是本教程的主题）。那么，让我们创建我们的立方体。幸运的是，Three.js 中有一些用于创建基元（简单形状）的辅助函数：

var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x1ec876 });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

cube.rotation.y = Math.PI * 45 / 180;

scene.add(cube);

登录后复制

如您所见，首先我们创建几何图形。参数定义立方体的大小：宽度、高度和深度。

接下来，我们定义立方体的材质。 Three.js中有一些材质类型，但是这次我们将使用THREE.MeshLambertMaterial，因为我们稍后想要一些光照（该材质使用兰伯特算法进行光照计算）。您可以将第一个参数中的选项作为映射传递，与渲染器相同 - 这几乎是 Three.js 中更复杂对象的规则。在这里，我们只使用颜色，它以十六进制数字形式传递。

在第三行，我们使用之前创建的几何体和材质创建一个网格。接下来，我们将立方体在 Y 轴上旋转 45 度，使其看起来更好。我们必须将度数更改为弧度，这是通过您可能记得的高中物理课上的方程式来处理的：Math.PI * 45 / 180。最后，立方体被添加到场景中。

现在您可以在浏览器中打开 index.html 来查看结果，但您将看不到任何内容，因为场景尚未渲染。

第 4 步：相机！

要渲染某些内容，首先我们需要将相机添加到场景中，以便渲染器知道应该从哪个角度渲染内容。 Three.js 中有几种类型的相机，但您可能只会使用 THREE.PerspectiveCamera。这种类型的相机呈现出我们所看到的世界的场景。让我们创建一个：

var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);

登录后复制

“要渲染某些内容，首先我们需要将相机添加到场景中，以便渲染器知道应该从哪个角度渲染内容。”

创建相机比我们迄今为止所做的其他事情要复杂一些。第一个参数定义 FOV（视野），即从相机所在位置可以看到的角度。 45 度的 FOV 看起来很自然。接下来，我们定义相机的比率。这始终是渲染器的宽度除以高度，除非您想实现一些特殊效果。最后两个数字定义了对象与要绘制的相机的距离。

现在我们必须稍微向后和向上移动相机，因为在 Three.js 中创建的所有对象都将其位置设置在场景中间（x: 0, y: 0, z: 0）默认：

camera.position.y = 160;
camera.position.z = 400;

登录后复制

z 坐标在观看者的方向上为正，因此具有较高 z 位置的对象会显得离您更近（在这种情况下，由于我们移动了相机，所有对象都会显得更远）来自您）。

现在，让我们将相机添加到场景并渲染它：

scene.add(camera);

renderer.render(scene, camera);

登录后复制

添加相机就像添加立方体一样。下一行使用该相机渲染场景。现在您可以打开浏览器，您应该看到以下内容：

基础入门：使用Three.js进行WebGL开发

您应该只能看到立方体的顶部。这是因为我们将相机向上移动，但它仍然看起来在它的正前方。这个问题可以通过让相机知道它应该看什么位置来解决。在设置相机位置的行之后添加此行：

camera.lookAt(cube.position);

登录后复制

传入的唯一参数是相机将看到的位置。现在，场景看起来更好了，但立方体仍然是黑色，无论您在创建立方体时设置了什么颜色：

基础入门：使用Three.js进行WebGL开发

第 5 步：灯！

立方体是黑色的，因为场景中没有灯光，所以它就像一个完全黑的房间。您会看到白色背景，因为除了立方体之外没有任何东西可以绘制。为了避免这种情况，我们将使用一种称为天空盒的技术。基本上，我们将添加一个大立方体来显示场景的背景（如果是开放空间，通常是一些远处的地形）。那么，让我们创建这个盒子。此代码应位于 renderer.render 调用之前：

var skyboxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide });
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);

scene.add(skybox);

登录后复制

此代码与创建多维数据集的代码类似。但这一次的几何形状要大得多。我们还使用了 THREE.MeshBasicMaterial 因为我们不需要照亮天空盒。另外，请注意传递给材料的附加参数：side: THREE.BackSide。由于立方体将从内部显示，因此我们必须更改绘制的侧面（通常，Three.js 只绘制外墙）。

现在渲染的场景是全黑的。为了解决这个问题，我们必须向场景添加灯光。我们将使用 THREE.PointLight，它像灯泡一样发出光。在天空盒后添加这些行：

var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);

scene.add(pointLight);

登录后复制

如您所见，我们创建了白色的点光源，然后将其位置设置为向上和向后一点，以照亮立方体的正面和顶部。最后，灯光像任何其他对象一样添加到场景中。打开浏览器，您应该会看到一个彩色阴影立方体：

基础入门：使用Three.js进行WebGL开发

但是立方体仍然很无聊。让我们为其添加一些动作。

第 6 步：行动！

现在我们将为场景添加一些运动。让我们让立方体绕 Y 轴旋转。但首先，我们必须改变渲染场景的方式。一次 renderer.render 调用，渲染场景的当前状态一次。因此，即使我们以某种方式为立方体设置动画，我们也不会看到它移动。要改变这一点，我们必须将渲染循环添加到我们的应用程序中。这可以使用专门为此目的创建的 renderAnimationFrame 函数来实现。大多数主要浏览器都支持它，对于那些不支持它的浏览器，Three.js 附带了自己的 polyfill。那么，让我们改变一下：

renderer.render(scene, camera);

登录后复制

对此：

function render() {
	renderer.render(scene, camera);
	
	requestAnimationFrame(render);
}

render();

登录后复制

实际上，那里没有循环，因为它会冻结浏览器。 requestAnimationFrame 函数的行为有点像 setTimeout，但它会在浏览器准备就绪时调用该函数。因此，显示的场景没有任何变化，立方体仍然没有移动。让我们解决这个问题。 Three.js自带了THREE.Clock，可以用来实现对象的平滑动画。首先在render函数定义之前进行初始化：