threejs 温度云图

ༀ༺风༒烛༻ༀ

已于 2024-04-29 12:01:01 修改

阅读量938

点赞数 4

文章标签： vue 前端

于 2024-04-22 11:26:15 首次发布

本文链接：https://blog.csdn.net/qq_52588299/article/details/138068433

版权

温度云图

前言

温度云图是一种利用可视化技术展示温度分布情况的图表。通过温度云图，我们可以直观地了解不同区域或物体的温度分布情况，从而进行有效的数据分析和决策。本技术文档旨在介绍使用d3.js生成温度图，并结合three.js技术将温度图作为贴图应用于3D场景中的物体表面的技术实现过程。

技术介绍

1.d3.js

d3.js是一个强大的JavaScript库，用于生成数据驱动的文档。它允许绑定任意数据到DOM，然后将数据驱动转换应用于文档。通过使用d3.js，我们可以方便地创建各种图表，包括温度云图。

2.three.js

three.js是一个基于WebGL的JavaScript 3D库，用于在浏览器中创建和显示动画的3D计算机图形。它提供了丰富的3D渲染和交互功能，使得开发者能够在Web应用中实现高质量的3D场景。

技术实现

1.使用d3.js生成温度图

（1）准备数据：收集需要展示的温度数据，并将其格式化为适合d3.js处理的形式。

（2）创建SVG画布：使用d3.js的select和append方法创建一个SVG画布，用于绘制温度图。

（3）绘制温度图：根据温度数据，使用d3.js的scale和color方法设置颜色映射，并使用rect或circle等元素绘制温度图。

代码示例：

https://observablehq.com/@d3/volcano-contours/2?intent=fork

let data = {

"width": w,

"height": h,
 
  "values":list//如： [1,2,3,4] list长度为w*h
}

const n = data.width;
const m = data.height;
const width = 400;
const height = Math.round(m / n * width);
const path = d3.geoPath().projection(d3.geoIdentity().scale(width / n));

const contours = d3.contours().size([n, m]);

const color = d3.scaleSequential(d3.interpolateTurbo).domain([0, 23]).nice();

const svg = d3.select("#contourPlot")
  .attr("width", width)
  .attr("height", height)
  .attr("style", "max-width: 100%; height: auto;")
  .attr("viewBox", [0, 0, width, height]);

svg.append("g")
  // .attr("stroke", "black")
  .selectAll()
  .data(color.ticks(20))
  .join("path")
  .attr("d", d => path(contours.contour(data.values, d)))
  .attr("fill", color)

2.将svg对象转换为Blob对象

const svgElement = document.getElementById('contourPlot');
svgElement.style.display = 'none';
const svgString = new XMLSerializer().serializeToString(svgElement);
// 创建一个Blob对象
var blob = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
// 创建一个指向Blob的URL
var url = URL.createObjectURL(blob);

3.使用three.js将纹理应用于3D物体表面

（1）加载温度图：使用three.js的TextureLoader加载之前生成的温度图。

（2）创建材质：创建一个three.js的材质对象，并将加载的温度图作为贴图应用到该材质上。

（3）应用材质到3D物体：创建一个three.js的3D物体（如平面、球体等），并将之前创建的材质应用到该物体上。

（4）渲染场景：将3D物体添加到three.js的场景中，并调用渲染器进行渲染。

代码示例：

const material1 = new THREE.MeshBasicMaterial({
  map: textureLoader.load(imageUrls[0]),
})
material1.map.repeat.set(-1, 1); // 左右翻转
material1.map.offset.set(1, 0); // 调整偏移以保持原图中心位置

//......
const material6 = new THREE.MeshLambertMaterial({
  map: textureLoader.load(imageUrls[5]),
})

geometry = new THREE.BoxGeometry(180, 10, 50);
material6.map.repeat.set(-1, 1); // 左右翻转
material6.map.offset.set(1, 0); // 调整偏移以保持原图中心位置

const mesh = new THREE.Mesh(geometry, [material1, material2, material3, material4, material5, material6]);

// 把网格模型添加到场景中
viewer.scene.add(mesh);