threejs 纹理流动_深入理解Three.js（WebGL）贴图（纹理映射）和UV映射

本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map，也译作纹理映射，“贴图”的翻译要更直观，而“纹理映射”更准确。)。为了能够查看在线演示效果，你需要有一个兼容WebGL的现代浏览器(最好是Chrome/FireFox/Safari/Edge/IE11+)。

本文的在线演示结果和代码请点击这里：Three.js贴图实例。

什么是贴图(Texture Mapping)

贴图是通过将图像应用到对象的一个或多个面，来为3D对象添加细节的一种方法。

这使我们能够添加表面细节，而无需将这些细节建模到我们的3D对象中，从而大大精简3D模型的多边形边数，提高模型渲染性能。

开始吧

这里方便起见，我们使用踏得网在线开发工具来一步步边学边操作。

请点击新建作品，在第三方库中选择Three.js 80版本，这将自动加载对应版本的Three.js开发库(注：你也可以直接把拷贝到HTML代码面板中去)。

首先我们创建一个立方体，在JavaScript面板中编写代码如下：

点击菜单栏中的[运行]菜单(

)，或者按快捷键：CTRL+R，来运行该代码，你将看到一个旋转的蓝色立方体：

我们接下来要做的就是把这个立方体变成一个游戏里常见的木箱子，如下图所示：

为此我们需要一张箱子表面的图像，并用这张图像映射