使用 THREE.JS 构建用户体验（下）

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

在上一篇文章中，我们介绍了 Three.js 的基础知识和网络上的 3D 概念。如果你还没有读过，你应该。

在那篇文章中展示了一些网络上 3D 的真实示例。现在，我们将努力适应建立这样的体验。

我将从制作立方体的 3D 设计的 hello world 开始。我们首先设置一个渲染引擎和它应该在屏幕上占据的宽度。WebGLRenderer 用于此目的。然后给它一个画布大小以在浏览器中占用并添加到 DOM 中。

// WebGL Rendering Engine
const renderer = new THREE.WebGLRenderer();
renderer.setSize(ww, wh);
document.body.appendChild(renderer.domElement);

注意：变量ww代表window.innerWidth，wh代表window.innerHeight

在 3D 环境中，一切都存在于接下来创建的场景中。

// New Scene
const scene = new THREE.Scene();

这个模板是按照设置一个实际的戏剧剧院的顺序创建的，所以我们需要在场景之后的任何其他东西之前先使用摄像机。

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

// Position x,y,z axis of camera
camera.position.set(0, 0, 5);

作为主要角色的 3D 模型由几何体和材质组成，然后添加到场景中。

// create the mesh from geometry and material
/*
const mesh = new THREE.Mesh(geometry, material);
*/

// adding objects to the scene
/*
scene.add(mesh)
*/

由于尚未创建几何体和材质，本节中的代码已被注释掉。因此，网格不能存在并添加到场景中。稍后我将介绍几何形状和材料。

模板的最后一部分是渲染整个场景以显示的地方。

// render the scene
const render = () => {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
};

render();

通过设置渲染引擎并将其存储在renderer变量中，最后一部分可能只是

renderer.render(scene, camera);

但是我们选择用 来创建一种递归形式requestAnimationFrame，因为它可以很容易地以每 60FPS 重新定位相机，从而创建一个动画场景。

考虑这个例子

为了产生动画旋转，相机的 Y 轴定位每 60FPS 递增一次。

const render = () => {
  requestAnimationFrame(render);
  cube.rotation.y += 0.05;
  renderer.render(scene, camera);
};

该演示使用BoxGeometry和MeshBasicMaterial。

THREE.js 有几个可以用来构建模型的几何图形。可以连接或修改原始形状以制作更复杂的形状。有普通的几何和缓冲区几何，它们更有效但有限制。

材料

材料构成了几何图形的颜色和纹理。使用的材料会影响光线对模型的影响。MeshBasicMaterial 不受光线影响，也不需要光线，这就是该演示不包含光线的原因。

三个文档中还有其他几种材料，但我将演示MeshLambertMaterial、MeshNormalMaterial、MeshPhongMaterial，我认为您经常需要这些材料。

MeshStandardMaterial在创建逼真模型方面很受欢迎，但它带来了计算成本。MeshPhongMaterial 可以是它的高性能替代品。

网状Lambert材料

LambertMaterial 基于光源的反射。没有灯光，场景显得黑暗而空虚。该演示使用DirectionLight。

MeshNormalMaterial

NormalMaterial 使用 RGB 颜色填充几何图形。它不需要光来显示，也不受光存在的影响。

MeshPhong材料

想要与黑暗场景背景不同的东西吗？您可以使用以下方法设置不同的背景场景颜色：

scene.background = new THREE.Color(0x00ff00);

或者你可以设置一个漂亮的 CSS 背景并启用alpha渲染。

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

使用alpha: trueWebGLRenderer 上的参数，改为显示 CSS 背景颜色。上面的演示还介绍了 SphereGeometry 上的地球纹理。

这是通过 TextureLoader 实现的，它是我们如何开始应用 3D 以适应用户 Web 体验的典型示例。

顶点、边和面

复杂的艺术形式通常由原始形状组成。这在 Photoshop、Illustrator 等应用程序中是正确的，同样适用于 3D 空间。

顶点是两条或多条线或边相交形成角度的点。在 3D 上下文中（除非您使用 THREE.js ShapeGeometry），顶点由 3 条或更多条边组成。它被复数为顶点。

一条边连接 2 个顶点并由 2 个面共享。

这显然暴露了脸是什么。面是由 3D 对象中的边缘界定的平面。

为了构建复杂的几何图形，我们可以修改原始形状的这些部分以制作全新的东西。

实例化的几何对象将具有顶点和面的方法（这不适用于 BufferGeometries）。

当不修改几何的这些属性/方法时，使用 BufferGeometry 的性能更高。

这些方法包含可以修改的顶点和面的数组，如下所示：

const geometry = new THREE.BoxGeometry(20, 20, 20);
geometry.vertices.map((vertex) => {
  vertex.x += Math.random() * 10;
});

如上图所示，一个盒子的数组将包含 8 个顶点，当每个顶点更改为随机值时，您会得到：

每次运行程序时，顶点对象的 x、y、z 键都会获得一个新值。这是修改顶点的更复杂的示例

创建形状的另一种方法是混合不同的原始形状或将一组原始形状相互堆叠，如下面的圣诞树：

提示：上面的树可以通过鼠标或触摸交互来控制。这将在下面进一步解释

在代码中创建形状可能会变得非常复杂和乏味。这是我们利用 THREE.js 中可用的加载器的地方。在代理机构工作，您可能有 3D 设计专家在任何 3D 软件（如 Maya、Blender、Cinema 4D）中工作。有不同的加载程序可以处理来自此类软件的文件。OBJLoader（对象加载器）、GLTFLoader、ColladaLoader 是可用于从现有模型构建的加载器的一些示例。这是THREE.js中可用加载器的列表。

如果您使用 Blender，则有一个Blender to THREE.js扩展，可让您将模型导出为 JSON 并使用 JSONLoader 导入您的代码。

这是一个使用 OBJLoader 的示例香蕉

添加控件

Web 上的 3D 渲染通常需要交互。有时您可能希望让用户通过按键、鼠标移动或触摸来控制场景中的摄像机移动。这在产品展示中特别有用。就像这个自行车头盔一样

THREE.js 有各种控件，包括一个用于 VR 的控件。上面的树演示中使用了OrbitControls，它支持鼠标和触摸交互。TrackballControls和DragControls与 OrbitControls 有一些相似之处，因为它们适用于 Web 体验。

// OrbitControls
const orbit = new THREE.OrbitControls(camera);

// TrackballControls
const trackball = new THREE.TrackballControls(camera);

// DragControls
const drag = new THREE.DragControls(camera);

最后的想法

网络上的 3D 交互提供了一种为用户创造出色体验的方法。当与虚拟现实一起使用时，它们为用户模拟真实世界的体验。WebGL 还可以帮助为 Web 平台构建出色的游戏。我们已经将大部分软件从桌面转移到了网络；更多游戏可以在网络上发布并走向全球——这将使一些 Mac 用户对目前仅在 Windows 上可用的游戏感到满意。