使用 THREE.JS 深入研究 3D WEBGL(上)

翻译自：https://x-team.com/blog/3d-webgl-threejs/

自 21 世纪初以来，Web 一直是软件开发最常用的平台，因为它从文档共享平台转变为可扩展应用程序的家园。

我们已经让动画和游戏行业也从传统和 2D 图形/动画转向 3D。最近，围绕虚拟现实 (VR) 和增强现实 (AR) 出现了很多创新，其中大部分也进入了网络。

作为一个试图站在趋势和创新前沿的组织，谷歌刚刚发布了Poly，一个浏览和下载 3D 模型和场景的平台。

这篇文章的时机恰到好处，因为我们距离 12 月，即 3D 月 – #3December只有几周的时间。我希望下面的指南可以帮助您创造令人惊叹的 3D 艺术，成为今年的一部分。

以下是构成 3D 模型的元素：

• 场景
• 相机
• 网
• 灯光

稍后我会直接讨论这些，但首先，我必须谈谈渲染器。

如果您熟悉 React 之类的框架，您就会知道如果没有针对目标平台的渲染器（对于 Web 即DOM (ReactDOM)），什么都不会被渲染以显示。

由于 THREE.js 主要用于 Web，因此 WebGL 渲染器用于渲染我们的场景以进行显示。THREE.js API 的性质使得它的 API 可以在任何平台上使用，只要有可用的 3D 渲染器。

现在，没有任何东西要显示，让我们渲染到一个空白画布上。从 CDNJS 获取最新版本的THREE.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>

并开始黑客攻击。

const [winWidth, winHeight] = [window.innnerWidth, window.innerHeight];

const renderer = new THREE.WebGLRenderer();
renderer.setSize(winWidth, winHeight);
document.body.appendChild(renderer.domElement);

该setSize方法在我们将其作为<canvas>元素附加到 DOM 之前设置渲染显示的大小。

WebGLRenderer 实例可以采用一些参数。一种常用的方法是alpha使页面的其余部分显示在画布后面。

const renderer = new THREE.WebGLRenderer({alpha: true});

场景

一个场景，就像在戏剧艺术中一样，包含角色、一些灯光，并且有一个摄像头可以捕捉以进行渲染。

const scene = new THREE.Scene();

相机

THREE.js 提供了不同的相机。对于我们创建的 3D 空间，透视相机就像一个真实世界的相机，因为它的投影就像人眼自然投射到现实世界对象的方式一样。正交相机投影的图像具有固定的尺寸和外观，无论它与模型的距离如何。

这是一个演示，显示了两个相机之间的区别。

这里的演示将集中在透视相机上。

const camera = new THREE.PerspectiveCamera(45, ww/wh, 0.1, 150)

PerspectiveCamera 有四个参数。视野 (FOV)、纵横比、近剪辑窗格、远剪辑窗格。

提示：纵横比应该是元素的宽度除以高度。在完整的网页上，转换为窗口宽度超过窗口高度

要了解视野的工作原理，请考虑这些战场视图

如果您仔细观察，您会发现具有较高 FOV 的视图捕获了场景中的更多对象，而不必看起来比具有较小 FOV 的视图更近或更远。这是放大 FOV 时发生的情况的鸟瞰图

为了确认你没有迷路，这里是迄今为止在一张图片中所说的所有内容的摘要。

网

网格是 3D 模型。它通常由几何和材料组成。

const mesh = new THREE.Mesh(geometry, material);

稍后将详细介绍几何形状和材料。

灯光

如果您曾经有幸观看过现场戏剧或观看正在拍摄的电影，那么通常会看到周围的灯光。它们使模型可见，还有助于可视化方向（动画模型）或位置。

THREE.js 中有五种适当支持且稳定的光类型，即：

• 环境光
• 定向光
• 半球光
• 点光源
• 聚光灯

环境光

这种光没有方向感，因为它不会在场景中的对象上投射阴影。这里有些例子

定向光

定向光就像远处的户外阳光。平行的远距离光线使其不会在场景中的对象上投射任何阴影。

前面展示的这支笔用于区分相机类型，也使用定向光。

半球光

半球光从场景上方照亮对象，并随着它接触底部逐渐变暗。

一个场景可以添加不同的灯光，所以让我们在有环境光的树木场景中添加一个半球灯光。

这种光也不会投射阴影。如您所见，添加半球光只是将环境照明场景从下午 06:30 的外观变为上午 8:00 的外观。

点光源

点光源就像灯泡，可以放置在场景的不同部分，创造方向感并在物体上投射阴影。

该演示展示了使用点光源的中央光源（月亮）和也使用点光源的不同星星。

聚光灯

就像处于聚光灯下并让灯光照在您身上一样，您可以创建源自较小光源并随着它们照射到场景中的对象上而逐渐扩展的锥形灯光。

通过将聚光灯添加到上述示例中的树木场景，我们得到：

它允许在每棵树上投射阴影。这是另一个聚光灯示例，它反映了字面上的聚光灯

---

到目前为止的示例似乎不适用于现实世界的应用程序，您可能会质疑除了创造性编码之外还需要学习 THREE.js 或 WebGL。为了重新定位这种想法，以下是当今 Web 应用程序中的一些 3D 示例：

LittleWorkshop 创建了一个 WebVR 体验来展示一个陈列室。公司和个人可以将其用于销售家具甚至转租房屋。

Redplant studio 让您可以在包的不同部分尝试不同的颜色。这也可以应用于大多数电子商务网站，从那里开始，可能性是无穷无尽的。

概括

本文的目的是让您了解对 3D 的需求以及在其中构建 3D 应用程序所需的一些 THREE.js 术语。

本系列的下一篇文章将引导您了解构建自己的 3D 艺术的方法。