基于three的晴雨表（简易制作）

最近学了three和echarts，在可视化图表中看到了一个优秀的案例，用晴雨表反映出多种属性的关联性和差异；市面上大多数晴雨表都是平面，基于D3或者echarts制作，于是我尝试着用three做一个沉浸式的晴雨表

创建晴雨表需要用到组和mesh

     var barometer = new THREE.Group();scene.add(barometer);var barometer_data = new Array(20 * 30);

考虑到晴雨表需要在不同的环境下进行缩放和位置的移动，所以建立了一个组，然后这里创建了一个20x30的数组，是想创建一个20*30的方块阵，每个方块通过颜色和大小来表示两种属性

for (let i = 0; i < 20; i++) {for (let j = 0; j < 30; j++) {let index = i * 30 + j;barometer_data[index] = new THREE.Mesh(new THREE.CubeGeometry(1e2, 1e2, 10),new THREE.MeshStandardMaterial({color: 0x000000}));barometer_data[index].position.set(j * 100 - 1500,i * 100 - 1000,0);barometer.add(barometer_data[index]);}}

这里我们把方块按2000*3000的大小规则排列，可以得到这样一个效果，当然，这里由于我设置的背景色为白色，所以我把方块的初始颜色设置为黑色

数据模拟

然后我们可以进行一个模拟，模拟20个城市在30天内的AQI和PM2.5数值，然后通过晴雨表呈现，晴雨表的横纵轴表示日期和城市，颜色反映AQI，方块的大小反映PM2.5

首先我们写两个数据转换的函数

    function AQIColor(AQI, AQI_max = 100) {let colors = ['#0077ff','#00ff55','#ffee00','#ff7700','#ff2200'];return colors[Math.ceil((AQI / AQI_max) * 5) - 1];}function PM25Scale(PM25, PM25_max = 100) {return PM25 / PM25_max;}

然后我们再写一个通过随机数据刷新方块的材质和几何属性的函数

function barometerFresh() {for (let i = 0; i < 20; i++) {for (let j = 0; j < 30; j++) {let index = i * 30 + j;let AQI = Math.random() * 99 + 1;let PM25 = Math.random() * 99 + 1;barometer_data[index].material.color.set(AQIColor(AQI));barometer_data[index].scale.set(PM25Scale(PM25), PM25Scale(PM25), 1);}}}

调用函数后我们可生成如上图的所示的晴雨表，但由于考虑到实际的气象数据，并不会出现如此大的差异（呈现效果并不能反映一定的信息），于是我们把模拟数据范围限定一下，来尽可能还原一个真实的气象情况

模拟真实数据

function barometerFresh() {for (let i = 0; i < 20; i++) {for (let j = 0; j < 30; j++) {let index = i * 30 + j;//不平稳// let AQI = Math.random() * 99 + 1;// let PM25 = Math.random() * 99 + 1;//仿真let AQI = Math.random() * 40 + 5;let PM25 = AQI + 30;barometer_data[index].material.color.set(AQIColor(AQI));barometer_data[index].scale.set(PM25Scale(PM25), PM25Scale(PM25), 1);}}}barometerFresh();

现在我们基本上可以得到一个呈现效果较好的晴雨表：AQI的值基本随着PM25增大而增大，下次我们再拿一组真实数据来测试，并尝试加入信息提示和交互

基于three的晴雨表相关推荐

基于RTT-MicroPython制作自带BGM的新型肺炎晴雨表
简要说明基于 RTT-MicroPython 制作自带BGM的新型肺炎晴雨表,主要使用的板子是"麻雀1号开发板",通过"MicroPython"语言编程实现联 ...
基于微信小程序的大学生心理健康测试设计与实现 .docx
目录 1 绪论 3 1.1 项目开发背景 3 1.2 项目开发意义 3 1.3 项目主要的内容 4 2 相关技术介绍及系统环境开发条件 5 2.1相关技术介绍 5 2.2系统环境开发条件 6 3 系统 ...
基于Ardupilot/PX4固件，APM/PIXhawk硬件的VTOL垂直起降固定翼软硬件参数调试（第四篇）飞行特性
基于Ardupilot/PX4固件,APM/PIXhawk硬件的VTOL垂直起降固定翼软硬件参数调试(第四篇)飞行特性自动起飞固定翼飞机可以自动发射多种类型的飞机.下面的说明将教你如何设置你的任务 ...
嵌入式行业经济发展和欧盟工业发展的晴雨表，你关注了么？
嵌入式技术无处不在--无论在汽车.数据和通信系统.工业和消费电子产品,还是航空航天领域. 作为嵌入式行业经济发展和欧盟工业发展的晴雨表,embedded world(德国)国际嵌入式展,数十年始终致力 ...
基金分析工具箱(第一期）—— Morningstar主动/被动晴雨表
基金分析工具箱(第一期)-- Morningstar主动/被动晴雨表私募云通 fofpower https://mp.weixin.qq.com/s/DuvOf3mgpb1rB21WitqvTA 注 ...
全面解读沃达丰《物联网市场晴雨表》
全球著名的跨国移动运营商沃达丰于今年九月初发布了第四份<物联网市场晴雨表>(2016版),此报告为物联网领域行业领先的全球性调查,其中包含了关于中国物联网市场的调研与分析.近日,IT168 ...
软件开发项目管理检查清单：天气晴雨表
检查清单用于确认作业或工程是否存在遗漏,是反映项目管理是否存在问题的"天气晴雨表".下面是软件开发项目管理的一个检查清单,比本章中所言"软件开发项目管理过程中的祸根及其后 ...
电子词典（基于TCP协议多进程通信和数据库）
项目:电子词典项目要求: 登录注册功能,不能重复登录,重复注册.用户信息也存储在数据库中. 单词查询功能历史记录功能,存储单词,意思,以及查询时间,存储在数据库基于TCP,支持多客户端连接采用 ...
基于Golang的简单web服务程序开发——CloudGo
基于Golang的简单web服务程序开发--CloudGo[阅读时间:约10分钟] 一.概述二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 (1)基本要求 (2)扩展要求三.具体 ...

基于three的晴雨表

基于three的晴雨表（简易制作）

创建晴雨表需要用到组和mesh

数据模拟

首先我们写两个数据转换的函数

然后我们再写一个通过随机数据刷新方块的材质和几何属性的函数

模拟真实数据

基于three的晴雨表相关推荐

最新文章

热门文章