admin 管理员组文章数量: 887007
基于vue3.x与 three.js模拟地球内部结构
基于vue3.x与 three.js模拟地球内部结构
前言
基于threejs、vue3.x、热力图实现了地球结构可视化展示。
1.引入库
threejs、 vue3.x
热力图代码
/*** 热力图的生成 */
//随机给出温度值 储存在2维数组
let getTemperature = () => {let temperatureArray = new Array();for (let i = 0; i < 9; i++) {temperatureArray[i] = new Array();for (let j = 0; j < 9; j++) {temperatureArray[i][j] = parseInt(JSON.stringify(Math.random() * 35));}}return temperatureArray;
}
//获取温度点的XY坐标
let getPositionXY = (i: any, j: any) => {let positionX = [5, 20, 35, 50, 65, 80, 95, 80, 90];let positionY = [5, 20, 35, 50, 65, 80, 95, 80, 90];return {x: positionX[i],y: positionY[j]}
}
//绘制辐射圆
let drawCircular = (context: any, opts: any) => {let { x, y, radius, weight } = opts;radius = parseInt(JSON.stringify(radius * weight));//计算出实际的辐射圆// 创建圆设置填充色let rGradient = context.createRadialGradient(x, y, 0, x, y, radius);rGradient.addColorStop(0, "rgba(0, 1, 0, 1)");rGradient.addColorStop(1, "rgba(1, 0, 0, 0)");context.fillStyle = rGradient;// 设置globalAlphacontext.globalAlpha = weight;context.beginPath();context.arc(x, y, radius, 0, 2 * Math.PI);context.closePath();context.fill();// 填充
}
let createPalette = () => {//颜色条的颜色分布let colorStops: any = {0: "#FDF5E6",0.2: "#FFEBCD",0.4: "#FFFCF5",0.6: "#FFE4B5",0.8: "#FFFF00",1: "#FF4500"};//颜色条的大小let width = 256, height = 1;// 创建canvaslet paletteCanvas = document.createElement("canvas");paletteCanvas.width = width;paletteCanvas.height = height;let ctx: any = paletteCanvas.getContext("2d");// 创建线性渐变色let linearGradient = ctx.createLinearGradient(0, 0, width, 0);for (const key in colorStops) {linearGradient.addColorStop(key, colorStops[key]);}// 绘制渐变色条ctx.fillStyle = linearGradient;ctx.fillRect(0, 0, width, height);let imageData = ctx.getImageData(0, 0, width, height).data;// 读取像素值return {canvas: paletteCanvas,pickColor: function (position: any) {return imageData.slice(position * 4, position * 4 + 3)}}
}
// 生成热力图
let heatMap = (width: any, height: any) => {let canvas = document.createElement("canvas");canvas.width = width;canvas.height = height;let context: any = canvas.getContext("2d");let tenperature = getTemperature();for (let i = 0; i < 9; i++) {for (let j = 0; j < 9; j++) {let weight = tenperature[i][j] / 30; //计算出当前温度占标准温度的权值drawCircular(context, {x: getPositionXY(i, j).x,y: getPositionXY(i, j).y,radius: 20.,weight: weight})}}let palette = createPalette();document.body.appendChild(palette.canvas);let imageData = context.getImageData(0, 0, width, height);let data = imageData.data;for (let i = 3; i < data.length; i += 4) {//根据画面数据绘制颜色let alpha = data[i];let color = palette.pickColor(alpha);data[i - 3] = color[0];data[i - 2] = color[1];data[i - 1] = color[2];}for (let i = 0; i < imageData.data.length; i += 4) {// 背景设置成青色if (imageData.data[i + 3] == 0) {imageData.data[i] = 0;imageData.data[i + 1] = 255;imageData.data[i + 2] = 255;imageData.data[i + 3] = 255;}}context.putImageData(imageData, 0, 0);//设置画面数据return canvas;
}
export default heatMap;```可视化展示
模拟地球结构
预览地址
本文标签： 基于vue3x与 threejs模拟地球内部结构
版权声明：本文标题：基于vue3.x与 three.js模拟地球内部结构 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732352793h1533565.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论