基于vue3.x与 three.js模拟地球内部结构

基于 vue3.x 与 three.js 模拟地球内部结构

前言

基于 threejs、vue3.x、热力图实现了地球结构可视化展示。

1. 引入库

threejs、vue3.x

热力图代码

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;
}

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;
  
  context.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;
  
  let 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;```

可视化展示

模拟地球结构

预览地址