echarts-gl中3d曲面UV参数详解

前言

在echart-gl中3D曲面的数据除曲面方程及普通数据[x,y,z]外，还有一个带有UV坐标系的数据，即[x, y, z, u, v]。这里将重点讲述u，v点在echart-gl中的应用及部分原理。因个人未读过计算机图形相关课程，一部分理论仅为个人理解，如有错误请指正。

什么是UV

与我们熟悉的三维坐标系不同，UV坐标类似于三维空间的投影，它用两个点去映射三维模型中的点。其中U代表水平方向，V代表垂直方向。UV坐标常用在材质贴图中。

上图为UV坐标系的说明，其中地图为简单的模型贴图，沿坐标轴方向为正。

echarts中的UV解析

在echarts中UV坐标不仅能够影响贴图顺序点，同时也会影响模型的创建。这里我们一步步讲解，先讲模型创建，再讲贴图。

利用UV创建模型

如果我们想要做下面这种类型的立方体侧面，通过简单的三维坐标系(xyz)很难实现，此时我们需要使用UV参数。

利用UV创建模型和利用笛卡尔坐标系创建模型有些许不同。

在正常三维坐标系中，创建自定义面，需要先创建X轴横向数据，然后逐行创建Y轴数据，这样在echarts中才会形成需要的自定义面。

下面的代码中创建的是一个覆盖于XY轴的平面，效果如图所示，需要特别注意数据点的顺序（先创建X轴横向数据，然后逐行创建Y轴数据）

code

data: [
	[0,0,0],[1,0,0],
	[0,1,0],[1,1,0]