前言

在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]
]

效果预览

然而在使用UV创建时，其数据顺序则以UV顺序为准。这点在官方文档中有如下描述：

对于参数方程来说，每一项需要存储五个数据，分别是 x, y, z 和参数 u, v。而数据的索引按照u, v 的顺序。

以本节第一图为例，我们从要下往上创建一个侧面。分析图片可知，底面和顶面的四个点坐标如下：

// 这里是逆时针点的顺序，你也可以使用顺时针顺序，不会影响最终效果
// 底面坐标
[0,-1,-1],[1,0,-1],[0,1,-1],[-1,0,-1],// 顶面坐标
[0,-1,1],[1,0,1],[0,1,1],[-1,0,1]

在不考虑贴图位置和展现方式时，底面的垂直方向值为0，顶面的垂直方向值为1。底面和顶面的水平方向值均为从0-1的变化值。同时需要注意的是，用UV创建模型时，必须使曲面闭合。故上面坐标在整理后如下所示：

// 底面和顶面都需要面闭合，所以将第一个坐标点复制一个到该组末尾
// [x,y,z,u,v]
[0,-1,-1,0,0],[1,0,-1,0.25,0],[0,1,-1,0.5,0],[-1,0,-1,0.75,0],[0,-1,-1,1,0],
[0,-1,1,0,1],[1,0,1,0.25,1],[0,1,1,0.5,1],[-1,0,1,0.75,1],[0,-1,1,1,1],

效果预览

至此，我们已经可以用UV来创建一个自定义面了。但需要注意的是，上面的模型数据在调转上下顺序后，增加贴图则会出现贴图显示错误的问题。这就是我们接下来要说的问题了。

利用UV确定贴图位置

echarts中的贴图原点坐标个人感觉很奇怪。
如上节所说，如果我们将数据按照从上到下的顺序重新排列，加上贴图，则会出现贴图顺序颠倒的情况。如下图所示：

经过分析，个人总结为：
如果模型是从上往下创建的，则贴图的原点坐标在图片的左上角；
如果模型是从下往上创建的，则贴图的原点坐标在图片的左下角；

这里从数学上我个人感觉难以理解，但为了防止在增加贴图时出现问题，个人非常建议按照贴图的顺序去创建模型，如果设计时，贴图的原点在左下角，那么创建模型时就从下往上创建，反之亦然。

如果在贴图时，我们需要对贴图进行偏移，比如立方体侧面开始点的贴图不想定位到原点，这样你可以在图片中测量你需要的偏移量，坐标系仍然以本章第一图为准，原点坐标以实际为准即可。

下面放出贴图后的完整代码

var option = {backgroundColor: '#fff',color: '#fff',xAxis3D: {type: 'value'},yAxis3D: {type: 'value'},zAxis3D: {type: 'value'},grid3D: {viewControl: {}},series: [{type: 'surface',shading: 'color',parametric: true,colorMaterial: {detailTexture: 'map.jpg'},data: [[0,-1,-1,0,0],[1,0,-1,0.25,0],[0,1,-1,0.5,0],[-1,0,-1,0.75,0],[0,-1,-1,1,0],[0,-1,1,0,1],[1,0,1,0.25,1],[0,1,1,0.5,1],[-1,0,1,0.75,1],[0,-1,1,1,1],]}]
}

echarts-gl中3d曲面UV参数详解相关推荐

pandas中dropna（）参数详解
pandas中dropna()参数详解 DataFrame.dropna( axis=0, how='any', thresh=None, subset=None, inplace=False) 1. ...
Echarts之甘特图type: ‘custom‘参数详解
甘特图 const groupData = XEUtils.groupBy(data, "eqpName"); //分组后的数据 const yAxisData = Object. ...
darknet 框架中.cfg文件的参数详解，以yolov3为例
参考:darknet中cfg文件里参数的理解_zerojava0的博客-CSDN博客参考:[Darknet源码 ]cfg文件参数详解_橘子都吃不起!的博客-CSDN博客 1.基础参数解释 batch ...
pytorch中DataLoader的num_workers参数详解与设置大小建议
Q:在给Dataloader设置worker数量(num_worker)时,到底设置多少合适?这个worker到底怎么工作的? train_loader = torch.utils.data.Data ...
Windows中ipconfig /all命令参数详解
ipconfig命令参数详解结果详解 1.主机名:本机PC的hostname,主机名指得是网络上设备的名称,主机名即计算机名,是用来标识计算机在"网上邻居"里是身份的,这样其他用 ...
在 DW 中插入 Flash 的参数详解
作者:macromedia 文章来源: 蓝色理想在Dreamweaver中插入FLASH后还可以有很多的控制参数,点属性面板右下的参数钮,就会有参数和值的加入.大家可以自由的控制, 以下内容摘 ...
更新pcb封装导入_PCB中3D应用相关功能详解
如果PCB Layout工程师能够在设计过程中,使用设计工具直观地看到自己设计板子的实际情况,将能够有效的帮助他们的工作.尤其现在PCB板的设计越来越复杂,密度越来越高,如果能够洞察多层板内部则可以帮 ...
pandas中to_csv()和read_csv()参数详解
pandas.read_csv参数整理读取CSV(逗号分割)文件到DataFrame 也支持文件的部分导入和选择迭代更多帮助参见:http://pandas.pydata.org/pandas-d ...
Django 中 models 用法及参数详解
一. 模型常用字段 01. models.AutoField 自增列 (int(11)) 参数中必须填入 primary_key=True 默认情况下 Django 会为 ORM 中定义的每一张表加上 ...

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

文章目录

前言

什么是UV

echarts中的UV解析

利用UV创建模型

利用UV确定贴图位置

echarts-gl中3d曲面UV参数详解相关推荐

最新文章

热门文章