VUE3-Cesium（着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现）

2024-01-20 09:40
文章标签 javascript 实现 使用 编写 vue vue3 绘图 效果 frontend 动画 着色器 扩散 cesium 雷达 图案 圆环

本文主要是介绍VUE3-Cesium（着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

1. 运用着色器编写图案

​2.着色器实现动画绘图

3.着色器实现圆环扩散效果

4.着色器实现雷达图效果

1. 运用着色器编写图案

1）挤出一个盒子

  const extrudePolygon = new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,])),// extrudedHeight: 30000,});const instance = new Cesium.GeometryInstance({geometry: extrudePolygon,id: "挤出四边形",});

2）设置材质

const material = new Cesium.Material({fabric: {// type: "Color",// uniforms: {//   color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),// },source: `czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);material.diffuse = vec3(0.84,0.66,0.81);return material;}`,},});console.log(material.shaderSource);

控制台输出：

 

3）着色器设置材质外观

 const appearance = new Cesium.MaterialAppearance({fragmentShaderSource: `varying vec3 v_positionEC;varying vec3 v_normalEC;varying vec2 v_st;void main(){vec3 positionToEyeEC = -v_positionEC;vec3 normalEC = normalize(v_normalEC);#ifdef FACE_FORWARDnormalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);#endifczm_materialInput materialInput;materialInput.normalEC = normalEC;materialInput.positionToEyeEC = positionToEyeEC;materialInput.st = v_st;czm_material material = czm_getMaterial(materialInput);//  实现圆// float strength = 1.0 - distance(v_st,vec2(0.5,0.5))*2.0;  // material.diffuse = vec3(strength);// material.alpha = step(0.0,strength);// 渐变环float strength =  1.0-(abs(distance(v_st,vec2(0.5,0.5))-0.25)*4.0);material.diffuse = vec3(strength);material.alpha = step(0.0,strength);#ifdef FLATgl_FragColor = vec4(material.diffuse + material.emission, material.alpha);#elsegl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);#endif}`,});

4）实例化着色图元

// 创建图元添加var primitive = viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: [instance],appearance: appearance,}));console.log(appearance.vertexShaderSource);console.log(appearance.fragmentShaderSource);

控制台输出：

 5）实现效果：


2.着色器实现动画绘图

1）挤出矩形

const extrudePolygon = new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,])),// extrudedHeight: 30000,});const instance = new Cesium.GeometryInstance({geometry: extrudePolygon,id: "挤出四边形",});

2） 实例化材质：

  const material = new Cesium.Material({fabric: {// type: "Color",uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),uTime: 0,},source: `czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);material.diffuse = vec3(uTime,uTime,0.81);return material;}`,},});console.log(material);console.log(material.shaderSource);

3）安装gasp实现补间动画：

GASP是一款可以用来制作动画的js插件。GASP是一个JavaScript动画库，它支持快速开发高性能的 Web 动画。GASP 使我们能够轻松轻松快速的将动画串在一起，来创造一个高内聚的流畅动画序列。

安装：

npm install gsapyarn add gasp

导入：

import gsap from "gsap";

使用：

第一个参数为要控制元素的选择器，第二个参数为控制元素的动画属性

  gsap.to(material.uniforms, {uTime: 1,duration: 1,//持续时长repeat: -1,//重复次数yoyo: true,//是否往返动画ease: "linear",//运动模式onUpdate: () => {console.log("值发生了修改");},});

4）实例化材质表面和图元

const appearance = new Cesium.MaterialAppearance({material: material,// translucent: true,// closed: true,});// 创建图元添加var primitive = viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: [instance],appearance: appearance,}));console.log(appearance.vertexShaderSource);console.log(appearance.fragmentShaderSource);

5）实现效果：

 3.着色器实现圆环扩散效果

与上实现原理基本相似，通过挤出四边形，在该四边形上绘制半径变化的圆，并通过设置透明度，实现圆环扩散效果。

1）挤出矩形

const extrudePolygon = new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,])),// extrudedHeight: 30000,});const instance = new Cesium.GeometryInstance({geometry: extrudePolygon,id: "挤出四边形",});

2）利用着色器绘制图形

const material = new Cesium.Material({fabric: {// type: "Color",uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),uTime: 0,},source: `czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);float strength =  1.0 - (abs(distance(materialInput.st,vec2(0.5,0.5))-0.25+uTime)*8.0);material.diffuse = vec3(strength,0.0,0.0);// step<0.5就为0，否则返回1// material.alpha = step(0.5,strength);// clamp,可以将内容限制在某个范围内if(strength<0.0){material.alpha = 0.0;//强度小于0，透明度为0}else{material.alpha = clamp(0.0,1.0,strength);//最小值，最大值，强度}return material;}`,},});
console.log(material.shaderSource);

3）利用gasp实现补间动画

gsap.to(material.uniforms, {uTime: 1,duration: 1,repeat: -1,ease: "linear",yoyo: true,//往返重复});

4）实例化着色器及图元实例

 const appearance = new Cesium.MaterialAppearance({material: material,// translucent: true,// closed: true,});appearance.material.uniforms.uTime = 0.0;// 创建图元添加var primitive = viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: [instance],appearance: appearance,}));console.log(appearance);console.log(appearance.vertexShaderSource);console.log(appearance.fragmentShaderSource);

5）实现效果：

6） 全部代码：

<template><div id="cesiumContainer" ref="cesiumContainer"></div>
</template><script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import * as dat from "dat.gui";import gsap from "gsap";
// console.log(flightData);
const gui = new dat.GUI();// 设置cesium的token
Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzNkNTE5Zi1mMjY4LTRiN2QtOTRlZC1lOTUyM2NhNDYzNWYiLCJpZCI6NTU0OTYsImlhdCI6MTYyNTAyNjMyOX0.a2PEM4hQGpeuMfeB9-rPp6_Gkm6O-02Dm4apNbv_Dlk";
// cesium默认资源路径
window.CESIUM_BASE_URL = "/";
// 设置默认的视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(// 西边经度89.5,// 南边维度0.4,// 东边经度110.4,// 北边维度81.2
);
// 实现圆的扩散
onMounted(() => {var viewer = new Cesium.Viewer("cesiumContainer", {// 天地图影像服务imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=30d07720fa76f07732d83c748bb84211",layer: "tdtBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",}),});viewer.scene.globe.enableLighting = true;// 设置沙箱允许使用JSvar iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];iframe.setAttribute("sandbox","allow-same-origin allow-scripts allow-popups allow-forms");iframe.setAttribute("src", "");// // 隐藏cesiumLogoviewer.cesiumWidget.creditContainer.style.display = "none";viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(112.417, 23.29, 100000),});const extrudePolygon = new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,])),// extrudedHeight: 30000,});const instance = new Cesium.GeometryInstance({geometry: extrudePolygon,id: "挤出四边形",});const material = new Cesium.Material({fabric: {// type: "Color",uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),uTime: 0,},source: `czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);float strength =  1.0 - (abs(distance(materialInput.st,vec2(0.5,0.5))-0.25+uTime)*8.0);material.diffuse = vec3(strength,0.0,0.0);// step<0.5就为0，否则返回1// material.alpha = step(0.5,strength);// clamp,可以将内容限制在某个范围内if(strength<0.0){material.alpha = 0.0;//强度小于0，透明度为0}else{material.alpha = clamp(0.0,1.0,strength);//最小值，最大值，强度}return material;}`,},});gsap.to(material.uniforms, {uTime: 1,duration: 1,repeat: -1,ease: "linear",yoyo: true,//往返重复});console.log(material.shaderSource);const appearance = new Cesium.MaterialAppearance({material: material,// translucent: true,// closed: true,});appearance.material.uniforms.uTime = 0.0;// 创建图元添加var primitive = viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: [instance],appearance: appearance,}));console.log(appearance);console.log(appearance.vertexShaderSource);console.log(appearance.fragmentShaderSource);// let fs = appearance.getFragmentShaderSource();// console.log(fs);
});
</script><style>
* {margin: 0;padding: 0;
}
#cesiumContainer {width: 100vw;height: 100vh;
}
</style>

4.着色器实现雷达图效果

实现原理：

通过设置一个矩形盒子，并在其上用着色器绘制圆形，通过对角度的不停旋及动态变换的透明度转实现雷达图效果。

实现代码：

<template><div id="cesiumContainer" ref="cesiumContainer"></div>
</template><script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import * as dat from "dat.gui";import gsap from "gsap";
// console.log(flightData);
const gui = new dat.GUI();// 设置cesium的token
Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzNkNTE5Zi1mMjY4LTRiN2QtOTRlZC1lOTUyM2NhNDYzNWYiLCJpZCI6NTU0OTYsImlhdCI6MTYyNTAyNjMyOX0.a2PEM4hQGpeuMfeB9-rPp6_Gkm6O-02Dm4apNbv_Dlk";
// cesium默认资源路径
window.CESIUM_BASE_URL = "/";
// 设置默认的视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(// 西边经度89.5,// 南边维度0.4,// 东边经度110.4,// 北边维度81.2
);
// 实现圆的扩散
onMounted(() => {var viewer = new Cesium.Viewer("cesiumContainer", {// 天地图影像服务imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=30d07720fa76f07732d83c748bb84211",layer: "tdtBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",}),});viewer.scene.globe.enableLighting = true;// 设置沙箱允许使用JSvar iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];iframe.setAttribute("sandbox","allow-same-origin allow-scripts allow-popups allow-forms");iframe.setAttribute("src", "");// // 隐藏cesiumLogoviewer.cesiumWidget.creditContainer.style.display = "none";viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(112.417, 23.29, 100000),});const extrudePolygon = new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,])),// extrudedHeight: 30000,});const instance = new Cesium.GeometryInstance({geometry: extrudePolygon,id: "挤出四边形",});const material = new Cesium.Material({fabric: {// type: "Color",uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),uTime: 0,},source: `czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);vec2 newSt = mat2(cos(uTime), -sin(uTime),sin(uTime), cos(uTime))*(materialInput.st-0.5);newSt += 0.5;//设置透明度float alpha = 1.0 - step(0.3,distance(newSt, vec2(0.5)));//计算角度float angle = atan(newSt.x - 0.5, newSt.y - 0.5);//计算强度float strength = (angle+3.14)/6.28;material.alpha = alpha*strength;material.diffuse = mix(vec3(0.0, 0.0, 0.0), vec3(1.0,0.0,0.0), strength);//由黑到红return material;}`,},});gsap.to(material.uniforms, {uTime: -6.28,duration: 1,repeat: -1,ease: "linear",// yoyo: true,});console.log(material.shaderSource);const appearance = new Cesium.MaterialAppearance({material: material,// translucent: true,// closed: true,});appearance.material.uniforms.uTime = 0.0;// 创建图元添加var primitive = viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: [instance],appearance: appearance,}));console.log(appearance);console.log(appearance.vertexShaderSource);console.log(appearance.fragmentShaderSource);// let fs = appearance.getFragmentShaderSource();// console.log(fs);
});
</script><style>
* {margin: 0;padding: 0;
}
#cesiumContainer {width: 100vw;height: 100vh;
}
</style>

实现效果：

 

这篇关于VUE3-Cesium（着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/625571。

相关文章

Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
SpringBoot3实现Gzip压缩优化的技术指南

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N
阅读更多...
Linux换行符的使用方法详解

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将
阅读更多...
SpringBoot实现数据库读写分离的3种方法小结

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一：基于AbstractRoutingDataSource实现动态
阅读更多...
Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整
阅读更多...
使用Jackson进行JSON生成与解析的新手指南

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON（序列化）2.2 JSON 转对象（反序列化）3.
阅读更多...
Java枚举类实现Key-Value映射的多种实现方式

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co
阅读更多...
使用Python实现快速搭建本地HTTP服务器

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》：本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2