实现3D热力图

实现思路

  1. 首先是需要用canvas绘制一个2D的热力图,如果你还不会,请看json绘制热力图。
  2. 使用Threejs中的canvas贴图,将贴图贴在PlaneGeometry平面上。
  3. 使用着色器材质,更具json中的数据让平面模型 拔地而起。
  4. 使用Threejs内置的TWEEN,加上一个动画。

效果 

效果如下:

具体代码 

具体实现效果代码:

import * as THREE from 'three';
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import * as d3geo from 'd3-geo'
import trafficJSON from '../assets/json/traffic.json'export default (domId) => {/* ------------------------------初始化三件套--------------------------------- */const dom = document.getElementById(domId);const { innerHeight, innerWidth } = windowconst scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 2000);camera.position.set(-25, 288, 342);camera.lookAt(scene.position);const renderer = new THREE.WebGLRenderer({antialias: true,// 抗锯齿alpha: false,// 透明度powerPreference: 'high-performance',// 性能logarithmicDepthBuffer: true,// 深度缓冲})// renderer.setClearColor(0x000000, 0);// 设置背景色// renderer.clear();// 清除渲染器renderer.shadowMap.enabled = true;// 开启阴影renderer.shadowMap.type = THREE.PCFSoftShadowMap;// 阴影类型renderer.outputEncoding = THREE.sRGBEncoding;// 输出编码renderer.toneMapping = THREE.ACESFilmicToneMapping;// 色调映射renderer.toneMappingExposure = 1;// 色调映射曝光renderer.physicallyCorrectLights = true;// 物理正确灯光renderer.setPixelRatio(devicePixelRatio);// 设置像素比renderer.setSize(innerWidth, innerHeight);// 设置渲染器大小dom.appendChild(renderer.domElement);// 重置大小window.addEventListener('resize', () => {const { innerHeight, innerWidth } = windowcamera.aspect = innerWidth / innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth, innerHeight);})/* ------------------------------初始化工具--------------------------------- */const controls = new OrbitControls(camera, renderer.domElement) // 相机轨道控制器controls.enableDamping = true // 是否开启阻尼controls.dampingFactor = 0.05// 阻尼系数controls.panSpeed = -1// 平移速度const axesHelper = new THREE.AxesHelper(10);scene.add(axesHelper);/* ------------------------------正题--------------------------------- */let geoFun;// 地理投影函数let info = {max: Number.MIN_SAFE_INTEGER,min: Number.MAX_SAFE_INTEGER,maxlng: Number.MIN_SAFE_INTEGER,minlng: Number.MAX_SAFE_INTEGER,maxlat: Number.MIN_SAFE_INTEGER,minlat: Number.MAX_SAFE_INTEGER,data: []};// 初始化地理投影const initGeo = (size) => {geoFun = d3geo.geoMercator().scale(size || 100)}// 经纬度转像素坐标const latlng2px = (pos) => {if (pos[0] >= -180 && pos[0] <= 180 && pos[1] >= -90 && pos[1] <= 90) {return geoFun(pos);}return pos;};// 创建颜色const createColors = (option) => {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');canvas.width = 256;canvas.height = 1;const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);for (let k in option.colors) {grad.addColorStop(k, option.colors[k]);}ctx.fillStyle = grad;ctx.fillRect(0, 0, canvas.width, canvas.height);return ctx.getImageData(0, 0, canvas.width, 1).data;}// 绘制圆const drawCircle = (ctx, option, item) => {let { lng, lat, value } = item;let x = lng - option.minlng + option.radius;let y = lat - option.minlat + option.radius;const grad = ctx.createRadialGradient(x, y, 0, x, y, option.radius);grad.addColorStop(0.0, 'rgba(0,0,0,1)');grad.addColorStop(1.0, 'rgba(0,0,0,0)');ctx.fillStyle = grad;ctx.beginPath();ctx.arc(x, y, option.radius, 0, 2 * Math.PI);ctx.closePath();ctx.globalAlpha = (value - option.min) / option.size;ctx.fill();}// 创建热力图const createHeatmap = (option) => {const canvas = document.createElement('canvas');canvas.width = option.width;canvas.height = option.height;const ctx = canvas.getContext('2d');option.size = option.max - option.min;option.data.forEach((item) => {drawCircle(ctx, option, item);});const colorData = createColors(option);const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);for (let i = 3; i < imageData.data.length; i = i + 4) {let opacity = imageData.data[i];let offset = opacity * 4;//redimageData.data[i - 3] = colorData[offset];//greenimageData.data[i - 2] = colorData[offset + 1];//blueimageData.data[i - 1] = colorData[offset + 2];}ctx.putImageData(imageData, 0, 0);return { canvas, option };}// 初始化const init = () => {initGeo(1000)// 处理数据trafficJSON.features.forEach((item) => {let pos = latlng2px(item.geometry.coordinates);// 经纬度转像素坐标let newitem = {lng: pos[0],lat: pos[1],value: item.properties.avg}info.max = Math.max(newitem.value, info.max);info.maxlng = Math.max(newitem.lng, info.maxlng);info.maxlat = Math.max(newitem.lat, info.maxlat);info.min = Math.min(newitem.value, info.min);info.minlng = Math.min(newitem.lng, info.minlng);info.minlat = Math.min(newitem.lat, info.minlat);info.data.push(newitem);})info.size = info.max - info.min;info.sizelng = info.maxlng - info.minlng;info.sizelat = info.maxlat - info.minlat;const radius = 50;const { canvas, option } = createHeatmap({width: info.sizelng + radius * 2,height: info.sizelng + radius * 2,colors: {0.1: '#2A85B8',0.2: '#16B0A9',0.3: '#29CF6F',0.4: '#5CE182',0.5: '#7DF675',0.6: '#FFF100',0.7: '#FAA53F',1: '#D04343'},radius,...info})const map = new THREE.CanvasTexture(canvas);map.wrapS = THREE.RepeatWrapping;map.wrapT = THREE.RepeatWrapping;// 创建平面const geometry = new THREE.PlaneGeometry(option.width * 0.5,option.height * 0.5,500,500);const material = new THREE.ShaderMaterial({transparent: true,side: THREE.DoubleSide,uniforms: {map: { value: map },uHeight: { value: 100 },uOpacity: { value: 2.0 }},vertexShader: `uniform sampler2D map;uniform float uHeight;varying vec2 v_texcoord;void main(void){v_texcoord = uv;float h=texture2D(map, v_texcoord).a*uHeight;gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x,position.y,h, 1.0 );}`,fragmentShader: `precision mediump float;uniform sampler2D map;uniform float uOpacity;varying vec2 v_texcoord;void main (void){vec4 color= texture2D(map, v_texcoord);float a=color.a*uOpacity;gl_FragColor.rgb =color.rgb;gl_FragColor.a=a>1.0?1.0:a;}`});const plane = new THREE.Mesh(geometry, material);plane.rotateX(-Math.PI * 0.5);scene.add(plane);const tween = new TWEEN.Tween({ v: 0 }).to({ v: 100 }, 2000).onUpdate(obj => {material.uniforms.uHeight.value = obj.v;}).easing(TWEEN.Easing.Quadratic.InOut).start();TWEEN.add(tween);}init();/* ------------------------------动画函数--------------------------------- */const animation = () => {TWEEN.update();controls.update();// 如果不调用,就会很卡renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59125.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

风险数据集市整体架构及技术实现

引言 在当今大数据时代&#xff0c;风险数据集市作为金融机构的核心基础设施之一&#xff0c;扮演着至关重要的角色。它不仅为银行、保险等金融机构提供了全面、准确的风险数据支持&#xff0c;还帮助这些机构实现了风险管理的精细化和智能化。本文将深入探讨一种基于大数据La…

使用k8s RBAC和ValidatingAdmissionPolicy 配合来校验用户权限

我先讲一下业务场景&#xff1a; k8s集群内部有几个重要的命名空间&#xff08;比如&#xff1a; kube-system, kube-public 等&#xff09;&#xff0c;这些命名空间除了管理员有权限&#xff0c;其他用户不可以操作&#xff08;编辑&#xff0c;删除&#xff09;这几个命名空…

2. Sharding-JDBC广播表和绑定表操作

1. 广播表实战 ⼴播表概念 1. 指所有的分⽚数据源中都存在的表&#xff0c;表结构和表中的数据在每个数据库中均完全⼀致。 2. 适⽤于数据量不⼤且需要与海量数据的表进⾏关联查询的场景。 3. 例如&#xff1a;字典表、配置表。注意 1. 分库分表中间件&#xff0c;对应的数据…

【C++打怪之路Lv13】- “继承“篇

&#x1f308; 个人主页&#xff1a;白子寰 &#x1f525; 分类专栏&#xff1a;重生之我在学Linux&#xff0c;C打怪之路&#xff0c;python从入门到精通&#xff0c;数据结构&#xff0c;C语言&#xff0c;C语言题集&#x1f448; 希望得到您的订阅和支持~ &#x1f4a1; 坚持…

【科研积累】大模型的认知笔记

1 认识大模型 大模型是人工智能发展的一个里程碑&#xff0c;人工智能包括机器学习&#xff0c;机器学习包括监督学习、无监督学习和强化学习&#xff0c;深度学习神经网络也是机器学习的一个分支&#xff0c;生成式人工智能是深度学习的一个子集&#xff0c;ChatGPT和Stable …

【面试分享】xshell连接Linux服务器22端口执行命令top期间的技术细节和底层逻辑

通过SSH客户端&#xff08;如Xshell&#xff09;连接到服务器的22端口并执行top命令&#xff0c;涉及多个技术细节和底层逻辑。以下是对这一过程的详细解释&#xff1a; 一、技术细节 SSH协议&#xff1a; SSH&#xff08;Secure Shell&#xff09;是一种网络协议&#xff0c;…

mac 中python 安装mysqlclient 出现 ld: library ‘ssl‘ not found错误

1. 出现报错 2. 获取openssl位置 brew info openssl 3. 配置环境变量&#xff08;我的是在~/.bash.profile&#xff09; export LDFLAGS"-L/opt/homebrew/Cellar/openssl3/3.4.0/lib" export CPPFLAGS"-I/opt/homebrew/Cellar/openssl3/…

自动驾驶系列—自动驾驶中的短距离感知:超声波雷达的核心技术与场景应用

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

体育活动赛事报名马拉松微信小程序开发

功能描述 体育活动赛事报名马拉松微信小程序&#xff0c;该项目是一个体育活动报名小程序&#xff0c;主要功能有活动报名、扫码签到、签到积分、排行奖励、积分兑换等功能。 用户端&#x1f536;登录&#xff1a;◻️1.微信授权登录 ◻️2.手机号码授权 &#x1f536;首页&am…

uniapp框架配置项pages.json

uniapp框架配置项pages.json pages.json 文件用来对 uni-app 进行全局配置&#xff0c;决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 globalStyle 全局配置 用于设置应用的状态栏、导航条、标题、窗口背景色等。下面配置项默认应用于每个页面。 注意…

linux中kubectl命令使用

一.命令介绍 kubectl 是 Kubernetes 集群管理的命令行工具&#xff0c;用于与 Kubernetes API 交互。你可以通过它来管理和操作 Kubernetes 集群中的资源&#xff0c;如 Pod、Deployment、Service 等。下面是如何在不同操作系统上下载和使用 kubectl 的方法。 二.下载 kubect…

Debezium系列之:发件箱事件路由器

Debezium系列之:发件箱事件路由器 发件箱消息示例基本发件箱表基本配置自定义配置有选择性地应用转换的选项负载序列化格式使用 Apache Avro 作为有效负载格式发送带有附加字段的消息配置选项请参阅使用发件箱模式实现可靠的微服务数据交换,了解发件箱模式为何有用以及其工作…

Android关机流程知多少?

在 Android 中&#xff0c;关机流程涉及系统各个组件的协同工作&#xff0c;确保设备在断电之前能够安全地关闭所有活动并保存数据。以下是 Android 系统中关机流程的详细介绍&#xff1a; 1. 用户触发关机请求 关机流程由用户的操作触发&#xff0c;通常有以下几种方式&#…

python manage.py命令集

python manage.py 是 Django 框架中用于管理 Django 项目的命令行工具。它提供了一系列命令&#xff0c;用于创建应用、运行服务器、创建数据库迁移、管理静态文件等。 startproject python manage.py startproject myproject 创建一个新的 Django 项目。myproject 是项目的…

Docker使用docker-compose一键部署nacos、Mysql、redis

下面是一个简单的例子&#xff0c;展示如何通过Docker Compose文件部署Nacos、MySQL和Redis。请确保您的机器上已经安装了Docker和Docker Compose。 1&#xff0c;准备好mysql、redis、nacos镜像 sudo docker pull mysql:8 && sudo docker pull redis:7.2 &&…

图像处理椒盐噪声

椒盐噪声&#xff0c;也称为脉冲噪声&#xff0c;是图像中经常见到的一种噪声。它是一种随机出现的白点或者黑点&#xff0c;可能是亮的区域有黑色像素或是在暗的区域有白色像素&#xff08;或是两者皆有&#xff09;。这些白点和黑点会在图像中随机分布&#xff0c;导致图像中…

移远通信亮相骁龙AI PC生态科技日,以领先的5G及Wi-Fi产品革新PC用户体验

PC作为人们学习、办公、娱乐的重要工具&#xff0c;已经深度融入我们的工作和生活。随着物联网技术的快速发展&#xff0c;以及人们对PC性能要求的逐步提高&#xff0c;AI PC成为了行业发展的重要趋势。 11月7-8日&#xff0c;骁龙AI PC生态科技日在深圳举办。作为高通骁龙的重…

C语言,用最小二乘法实现一个回归模型

在 C 语言中实现最小二乘法回归模型&#xff0c;通常用于拟合一条直线&#xff08;线性回归&#xff09;。最小二乘法是一种优化算法&#xff0c;通过最小化实际数据点与模型预测值之间的误差的平方和来找到最佳拟合的线性模型。 最小二乘法的线性回归 对于一组数据点 ( x 1 …

SCUI Admin + Laravel 整合

基于 Vue3 和 Element Plus 和 Laravel 整合开发 项目地址&#xff1a;持续更新 LaravelVueProject: laravel vue3 scui

HTML5:网页开发的新纪元

文章目录 前言一、HTML5技术概述二、主要特点及优势1. 多媒体支持2. 图形绘制3. 离线存储4. 表单控件增强5. 响应式设计 三、应用场景1. 游戏开发2. 在线教育3. 电子商务 四、面临的挑战结语 前言 在互联网技术快速发展的今天&#xff0c;H5&#xff08;HTML5的简称&#xff0…