高德mesh添加纹理渐变颜色

最近使用高德的mesh画3D飞线颜色渐变的时候，研究了一下纹理的添加方式，下面是3D的mesh 添加渐变纹理，2D的同理。

根据官方文档，我们需要关注mesh3个点

1.vertice: 指的是构成面的点；
2.face: 指的是根据vertice的顺序组成的面，这个比较绕，后面会详解；
3.vertexColor: 对应是相应顺序的vertice的颜色。

假如我们要画下面这个3Dmesh的曲面

那么vertices就是8个A-H的坐标构成的长度为24的数组，注意顺序是A->H;

vertexColor就是8个A-H的坐标颜色构成的长度为32的数组，注意顺序是A->H; 因为每个颜色是rgba,渐变就是这里做文章,颜色的A值渐渐变小。

faces难点来了，这里我们要根据点的顺序来构建面，点的顺序也是非常重要。

我们这里第一个面是BAC, 第二个面是CBD。那么有人问我ABD, DAC行不行？

答案是不行，最终画出来的可能是两个三角形重叠的，我们要保证位于后面的点在后面，因为其实高德会根据这些点构建向量来贴纹理，因为我们是渐变的颜色，方向乱了，颜色的渐变就会乱。

最终我们需要的faces数组是这样的。

学过maya等三维软件的是不是很熟悉？

faces = [1, 0 ,2, 2, 1, 3, 3, 2, 4, 4, 3, 5…] 这样的18位数组。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Mesh</title>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D"></script>
</head>
<body>
<div id="container"></div>
<script>var map = new AMap.Map('container', {viewMode:'3D',  expandZoomRange:true,zooms:[3,20],zoom:16,pitch:60,center:[116.396132,39.900444]});var object3Dlayer = new AMap.Object3DLayer();map.add(object3Dlayer)var rectangle = new AMap.Object3D.Mesh()var geometry = rectangle.geometry;//创建之后获取geometryvar lnglat1 = new AMap.LngLat(116.395, 39.9)var lnglat2 = new AMap.LngLat(116.40, 39.9)var v0xy = map.lngLatToGeodeticCoord(lnglat1);var v1xy = map.lngLatToGeodeticCoord(lnglat2);var z = -3000;//3D地图Z方向朝下，所以负值geometry.vertices.push(v0xy.x, v0xy.y, 0);//V0geometry.vertices.push(v1xy.x, v1xy.y, 0);//V1geometry.vertices.push(v0xy.x, v0xy.y, z);//V2geometry.vertices.push(v1xy.x, v1xy.y, z);//V3geometry.vertices.push(v0xy.x, v0xy.y, -6000);//V4geometry.vertices.push(v1xy.x, v1xy.y, -6000);//V5geometry.faces.push(1, 0, 2, 2, 1, 3, 3, 2, 4, 4, 3, 5)// 颜色填充geometry.vertexColors.push(0.2, 0.4, 1, 1, 0.2, 0.4, 1, 0.8,0.2, 0.4, 1, 0.6, 0.2, 0.4, 1, 0.4,0.2, 0.4, 1, 0.2, 0.2, 0.4, 1, 0);rectangle.transparent = truerectangle.backOrFront = 'both';object3Dlayer.add(rectangle)
</script>
</body>
</html>

大家可以拿到高德实例里跑一下，高德示例中心

高德mesh添加纹理渐变颜色相关推荐

Android 高德地图添加线段纹理
共享单车轨迹界面如:小黄车和摩拜单车界面布局采用的是高德地图,并且每个轨迹线段都是有对应的地图纹理首先,我们在高德地图开发环境下进行地图线段纹理开发需要明确几个前提: 线段添加纹理根据官方文档是在P ...
WPS文字给字体添加纹理效果快速改变输入文字的颜色
文档中的文字有些单调,苍白,如果想要为其做出其它的效果,最快捷的方法就是改变其颜色,比如可以插入一些艺术字的效果等等.学完本节之后,你就可以给字体添加任意纹理效果了,另外整理了与之相关的问答,希望对大 ...
vue-给div添加渐变颜色
vue-给div添加渐变颜色第一步:先写一个div并给它设置一个类名(class),我的这个div的类名为class="www" 第二步:定义div的宽与高,并设置颜色渐变 ba ...
html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透明度. 网站中 ...
【原】Github系列之三：开源iOS下渐变颜色的进度条WGradientProgress
概述今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有"B格".它拥有渐变的颜色, ...
css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边解决:在before ...
ai怎么渐变颜色_Ai渐变插画怎么丰富细节
此次教程只需小伙伴对AI软件有基本的操作了解就可以完成,易上手容易理解. 止疼药瓶子 1.新建画布800X600,绘制止疼药瓶子轮廓用矩形工具(W)绘制止疼药瓶子轮廓,圆角处用直接选择工具(A)选择 ...
ai怎么渐变颜色_AI教程！渐变色噪点质感城堡场景插画绘制过程分享
教程步骤步骤 01 分析绘制思路,将插画分成背景+主体部分(云.山.树林.城堡.地面.湖面). 步骤 02 在AI里新建一个800*600px的画板接着用矩形工具画一个与画板大小一样的矩形并填充渐 ...
AI教程如何在 Illustrator 中创建渐变颜色？
欢迎观看Illustrator教程,小编带大家学习 Illustrator 的基本工具和使用技巧,了解如何在 Illustrator 中使用不同类型的渐变,以及对图稿应用线性和放射性渐变. 在 Ill ...

高德mesh添加纹理渐变颜色

高德mesh添加纹理渐变颜色相关推荐

最新文章

热门文章