vue3+three.js实现疫情可视化功能_vue.js_

{ "add_daily(国内今日数据)": { "addcon(今日确诊新增数)": "", "addcure(今日治愈新增)": "", "adddeath(今日死亡新增)": "", "addjwsr(今日境外输入新增)": "", "addlocIncrNum(今日本土新增)" }, "cachetime(数据缓存时间)": "", "curetotal(国内治愈总数)": "", "deathtotal(国内死亡总数)": "", "gntotal(国内确诊总数)": "", "highAndMiddle(中高风险地列表)": [ { "allname(全名)": "", "list(城市列表)": "", "province(省名)": "", "province_high_areas(高风险区域)": "", "province_middle_areas(中风险区域)": "", "province_high_num(高风险区域数)": "", "province_middle_num(中风险区域数)": "", "province_total(风险地总数)": "" } ], "historylist(国内疫情历史数据)": [ { "cn_conNum(确诊总数)": "", "cn_cureNum(治愈总数)": "", "cn_deathNum(死亡数)": "", "cn_jwsrNum(境外输入)": "", "ymd(当前时间)": "" } ], "jwsrTop(境外数据前10列表)": [], "list(全国各省疫情数据列表)": [ { "asymptomNum(较昨日新增数)": "", "city(城市列表)": [], "cureNum(治愈数)": "", "deathNum(死亡数)": "", "econNum(现存确诊数)": "", "ename(英文省名)": "", "jwsrNum(境外输入数)": "", "name(省名)": "", "value(累计数)": "" } ], "locIncrProTop(本土新增前十列表)": [], "othertotal(其他总数)": { "certain(全球现存确诊)": "", "certain_inc(今日确诊新增数)": "", "die(全球死亡数)": "", "die_inc(死亡新增数)": "", "ecertain(全球治愈数)": "", "ecertain_inc(治愈新增数)": "" }, "times(数据截止时间)": "", "worldlist(世界各国疫情列表)": [ { "name(国名)": "", "value(累计数)": "", "econNum(确诊数)": "", "deathNum(死亡数)": "", "cureNum(治愈数)": "" } ] }

{ mod:"province", province(英文省名):"" }

//解码返回的unicode function decodingStr(str: any) { let repStr: any = str.replace(/\\/g, "%");//用%替换\ let str1 = repStr.split("jsoncallback(")[1] let str2 = str1.split(");")[0]//截取出需要的字符串 let unStr = unescape(str2);//解码出汉字 let jsonObj = JSON.parse(unStr);//转换成json对象 return jsonObj; };

import * as THREE from "three"; //初始化球体 function init(data: any) { dom = document.getElementById("sphereDiv"); //获取dom let width = dom.clientWidth; let height = dom.clientHeight; scene = new THREE.Scene(); //场景场景 camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000); //创建透视相机(视场、长宽比、近面、远面) camera.position.set(0, 0, 270); //设置相机位置 camera.lookAt(0, 0, 0); //创建渲染器 renderer = new THREE.WebGLRenderer({ antialias: true, //抗锯齿 alpha: true, //透明 }); renderer.setClearColor(0x000000, 0.1); //设置场景透明度 renderer.setSize(width, height); //设置渲染区域尺寸 dom.appendChild(renderer.domElement); //将渲染器添加到dom中形成canvas createUniverse(); //创建宇宙 createStars(); //创建星辰 createLight(); //创建光源 createSphere(data); //创建球体 createOrbitControls(); render(); }; //创建宇宙(球形宇宙) function createUniverse() { let universeGeometry = new THREE.SphereGeometry(500, 100, 100); let universeMaterial = new THREE.MeshLambertMaterial({ //高光材质 map: new THREE.TextureLoader().load(universeImg), side: THREE.DoubleSide, //双面显示 }); //宇宙网格 let universeMesh = new THREE.Mesh(universeGeometry, universeMaterial); universeMesh.name = "宇宙"; scene.add(universeMesh); };

//创建光源 function createLight() { let lightColor = new THREE.Color(0xffffff); let ambient = new THREE.AmbientLight(lightColor); //环境光 ambient.name = "环境光"; scene.add(ambient); let directionalLight1 = new THREE.DirectionalLight(lightColor); directionalLight1.position.set(0, 0, 1000); scene.add(directionalLight1); //平行光源添加到场景中 let directionalLight2 = new THREE.DirectionalLight(lightColor); directionalLight2.position.set(0, 0, -1000); scene.add(directionalLight2); //平行光源添加到场景中 let directionalLight3 = new THREE.DirectionalLight(lightColor); directionalLight3.position.set(1000, 0, 0); scene.add(directionalLight3); //平行光源添加到场景中 let directionalLight4 = new THREE.DirectionalLight(lightColor); directionalLight4.position.set(-1000, 0, 0); scene.add(directionalLight4); //平行光源添加到场景中 let directionalLight5 = new THREE.DirectionalLight(lightColor); directionalLight5.position.set(0, 1000, 0); scene.add(directionalLight5); //平行光源添加到场景中 let directionalLight6 = new THREE.DirectionalLight(lightColor); directionalLight6.position.set(0, -1000, 0); scene.add(directionalLight6); //平行光源添加到场景中 };

//创建球体 function createSphere(data: any) { let earthSize = 100; //地球尺寸 let earthGroup = new THREE.Group(); //地球的组 let earthGeometry = new THREE.SphereGeometry(earthSize, 100, 100); //地球几何体 let nightColor = new THREE.Color(0x999999); let dayColor = new THREE.Color(0x444444); //地球材质 let earthMaterial = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load( isDay ? earthImg : earthNightImg //区分昼夜纹理 ), color: isDay ? dayColor : nightColor, // metalness: 1, //生锈的金属外观(MeshStandardMaterial材质时使用) // roughness: 0.5, // 材料的粗糙程度(MeshStandardMaterial材质时使用) normalScale: new THREE.Vector2(0, 5), //凹凸深度 normalMap: new THREE.TextureLoader().load(normalImg), //法线贴图 }); let earthMesh = new THREE.Mesh(earthGeometry, earthMaterial); //地球网格 earthMesh.name = "地球"; earthGroup.add(earth
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：使用vxe-table合并单元格后增加选中效果_vue.js_
                                                                
下一篇：vue代理模式解决跨域详解_vue.js_