实现3D热力图

实现思绪

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

结果 

结果如下：

具体代码 

具体实现结果代码：

1. import * as THREE from 'three';
2. import * as TWEEN from 'three/examples/jsm/libs/tween.module.js';
3. import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
4. import * as d3geo from 'd3-geo'
5. import trafficJSON from '../assets/json/traffic.json'
8. export default (domId) => {
9.     /* ------------------------------初始化三件套--------------------------------- */
10.     const dom = document.getElementById(domId);
11.     const { innerHeight, innerWidth } = window
13.     const scene = new THREE.Scene();
15.     const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 2000);
16.     camera.position.set(-25, 288, 342);
17.     camera.lookAt(scene.position);
19.     const renderer = new THREE.WebGLRenderer({
20.         antialias: true,// 抗锯齿
21.         alpha: false,// 透明度
22.         powerPreference: 'high-performance',// 性能
23.         logarithmicDepthBuffer: true,// 深度缓冲
24.     })
25.     // renderer.setClearColor(0x000000, 0);// 设置背景色
26.     // renderer.clear();// 清除渲染器
27.     renderer.shadowMap.enabled = true;// 开启阴影
28.     renderer.shadowMap.type = THREE.PCFSoftShadowMap;// 阴影类型
29.     renderer.outputEncoding = THREE.sRGBEncoding;// 输出编码
30.     renderer.toneMapping = THREE.ACESFilmicToneMapping;// 色调映射
31.     renderer.toneMappingExposure = 1;// 色调映射曝光
32.     renderer.physicallyCorrectLights = true;// 物理正确灯光
33.     renderer.setPixelRatio(devicePixelRatio);// 设置像素比
34.     renderer.setSize(innerWidth, innerHeight);// 设置渲染器大小
35.     dom.appendChild(renderer.domElement);
37.     // 重置大小
38.     window.addEventListener('resize', () => {
39.         const { innerHeight, innerWidth } = window
40.         camera.aspect = innerWidth / innerHeight;
41.         camera.updateProjectionMatrix();
42.         renderer.setSize(innerWidth, innerHeight);
43.     })
45.     /* ------------------------------初始化工具--------------------------------- */
46.     const controls = new OrbitControls(camera, renderer.domElement) // 相机轨道控制器
47.     controls.enableDamping = true // 是否开启阻尼
48.     controls.dampingFactor = 0.05// 阻尼系数
49.     controls.panSpeed = -1// 平移速度
51.     const axesHelper = new THREE.AxesHelper(10);
52.     scene.add(axesHelper);
54.     /* ------------------------------正题--------------------------------- */
55.     let geoFun;// 地理投影函数
56.     let info = {
57.         max: Number.MIN_SAFE_INTEGER,
58.         min: Number.MAX_SAFE_INTEGER,
59.         maxlng: Number.MIN_SAFE_INTEGER,
60.         minlng: Number.MAX_SAFE_INTEGER,
61.         maxlat: Number.MIN_SAFE_INTEGER,
62.         minlat: Number.MAX_SAFE_INTEGER,
63.         data: []
64.     };
66.     // 初始化地理投影
67.     const initGeo = (size) => {
68.         geoFun = d3geo.geoMercator().scale(size || 100)
69.     }
71.     // 经纬度转像素坐标
72.     const latlng2px = (pos) => {
73.         if (pos[0] >= -180 && pos[0] <= 180 && pos[1] >= -90 && pos[1] <= 90) {
74.             return geoFun(pos);
75.         }
76.         return pos;
77.     };
79.     // 创建颜色
80.     const createColors = (option) => {
81.         const canvas = document.createElement('canvas');
82.         const ctx = canvas.getContext('2d');
83.         canvas.width = 256;
84.         canvas.height = 1;
85.         const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
86.         for (let k in option.colors) {
87.             grad.addColorStop(k, option.colors[k]);
88.         }
89.         ctx.fillStyle = grad;
90.         ctx.fillRect(0, 0, canvas.width, canvas.height);
91.         return ctx.getImageData(0, 0, canvas.width, 1).data;
92.     }
94.     // 绘制圆
95.     const drawCircle = (ctx, option, item) => {
96.         let { lng, lat, value } = item;
97.         let x = lng - option.minlng + option.radius;
98.         let y = lat - option.minlat + option.radius;
99.         const grad = ctx.createRadialGradient(x, y, 0, x, y, option.radius);
100.         grad.addColorStop(0.0, 'rgba(0,0,0,1)');
101.         grad.addColorStop(1.0, 'rgba(0,0,0,0)');
102.         ctx.fillStyle = grad;
103.         ctx.beginPath();
104.         ctx.arc(x, y, option.radius, 0, 2 * Math.PI);
105.         ctx.closePath();
106.         ctx.globalAlpha = (value - option.min) / option.size;
107.         ctx.fill();
108.     }
110.     // 创建热力图
111.     const createHeatmap = (option) => {
112.         const canvas = document.createElement('canvas');
113.         canvas.width = option.width;
114.         canvas.height = option.height;
115.         const ctx = canvas.getContext('2d');
116.         option.size = option.max - option.min;
117.         option.data.forEach((item) => {
118.             drawCircle(ctx, option, item);
119.         });
120.         const colorData = createColors(option);
121.         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
122.         for (let i = 3; i < imageData.data.length; i = i + 4) {
123.             let opacity = imageData.data[i];
124.             let offset = opacity * 4;
125.             //red
126.             imageData.data[i - 3] = colorData[offset];
127.             //green
128.             imageData.data[i - 2] = colorData[offset + 1];
129.             //blue
130.             imageData.data[i - 1] = colorData[offset + 2];
131.         }
132.         ctx.putImageData(imageData, 0, 0);
133.         return { canvas, option };
134.     }
136.     // 初始化
137.     const init = () => {
138.         initGeo(1000)
139.         // 处理数据
140.         trafficJSON.features.forEach((item) => {
141.             let pos = latlng2px(item.geometry.coordinates);// 经纬度转像素坐标
142.             let newitem = {
143.                 lng: pos[0],
144.                 lat: pos[1],
145.                 value: item.properties.avg
146.             }
147.             info.max = Math.max(newitem.value, info.max);
148.             info.maxlng = Math.max(newitem.lng, info.maxlng);
149.             info.maxlat = Math.max(newitem.lat, info.maxlat);
150.             info.min = Math.min(newitem.value, info.min);
151.             info.minlng = Math.min(newitem.lng, info.minlng);
152.             info.minlat = Math.min(newitem.lat, info.minlat);
153.             info.data.push(newitem);
154.         })
155.         info.size = info.max - info.min;
156.         info.sizelng = info.maxlng - info.minlng;
157.         info.sizelat = info.maxlat - info.minlat;
158.         const radius = 50;
159.         const { canvas, option } = createHeatmap({
160.             width: info.sizelng + radius * 2,
161.             height: info.sizelng + radius * 2,
162.             colors: {
163.                 0.1: '#2A85B8',
164.                 0.2: '#16B0A9',
165.                 0.3: '#29CF6F',
166.                 0.4: '#5CE182',
167.                 0.5: '#7DF675',
168.                 0.6: '#FFF100',
169.                 0.7: '#FAA53F',
170.                 1: '#D04343'
171.             },
172.             radius,
173.             ...info
174.         })
175.         const map = new THREE.CanvasTexture(canvas);
176.         map.wrapS = THREE.RepeatWrapping;
177.         map.wrapT = THREE.RepeatWrapping;
178.         // 创建平面
179.         const geometry = new THREE.PlaneGeometry(
180.             option.width * 0.5,
181.             option.height * 0.5,
182.             500,
183.             500
184.         );
185.         const material = new THREE.ShaderMaterial({
186.             transparent: true,
187.             side: THREE.DoubleSide,
188.             uniforms: {
189.                 map: { value: map },
190.                 uHeight: { value: 100 },
191.                 uOpacity: { value: 2.0 }
192.             },
193.             vertexShader: `
194.             uniform sampler2D map;
195.             uniform float uHeight;
196.             varying vec2 v_texcoord;
197.             void main(void)
198.             {
199.                 v_texcoord = uv;
200.                 float h=texture2D(map, v_texcoord).a*uHeight;
201.                 gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x,position.y,h, 1.0 );
202.             }`,
203.             fragmentShader: `
204.             precision mediump float;
205.             uniform sampler2D map;
206.             uniform float uOpacity;
207.             varying vec2 v_texcoord;
208.             void main (void)
209.             {
210.                 vec4 color= texture2D(map, v_texcoord);
211.                 float a=color.a*uOpacity;
212.                 gl_FragColor.rgb =color.rgb;
213.                 gl_FragColor.a=a>1.0?1.0:a;
214.             }`
215.         });
216.         const plane = new THREE.Mesh(geometry, material);
217.         plane.rotateX(-Math.PI * 0.5);
218.         scene.add(plane);
219.         const tween = new TWEEN
220.             .Tween({ v: 0 })
221.             .to({ v: 100 }, 2000)
222.             .onUpdate(obj => {
223.                 material.uniforms.uHeight.value = obj.v;
224.             })
225.             .easing(TWEEN.Easing.Quadratic.InOut)
226.             .start();
227.         TWEEN.add(tween);
228.     }
229.     init();
232.     /* ------------------------------动画函数--------------------------------- */
233.     const animation = () => {
234.         TWEEN.update();
235.         controls.update();// 如果不调用，就会很卡
236.         renderer.render(scene, camera);
237.         requestAnimationFrame(animation);
238.     }
239.     animation();
240. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。