DataGear 制作基于 three.js 的 3D 数据可视化看板

DataGear专业版 1.0.0 已发布,欢迎试用! http://datagear.tech/pro/

DataGear 支持采用原生的HTML、JavaScript、CSS制作数据可视化看板,也支持导入由npmvite等前端工具构建的前端程序包。得益于这一特性,可以很容易制作基于three.js的3D数据可视化看板。

首先,参考three.js的官方教程 https://threejs.org/docs/index.html#manual/en/introduction/Installation 编写3D前端源码包。

源码包中包含两个文件:index.htmlmain.js,如下所示:

index.html

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="module" src="/main.js"></script>
<script type="module">
import { ThreeRenderer } from "/main.js";
window.ThreeRenderer = ThreeRenderer;
</script>
<div style="padding:1rem;">
  <button onclick="threeRender()">渲染</button>
  <button onclick="threeUpdate()">更新</button>
  <p></p>
  <div id="threeChart" style="width:300px;height:300px;"></div>
</div>
<script>
var renderer;
function threeRender(){
  renderer = new ThreeRenderer(document.getElementById("threeChart"));
  renderer.render();
}
function threeUpdate(){
  renderer.update(0xff0000);
}
</script>
</body>
</html>

index.html是下述main.js中定义3D组件的调试页面,点击【渲染】、【更新】按钮可调试3D组件效果。

main.js

javascript 复制代码
import * as THREE from 'three';

export function ThreeRenderer(dom)
{
  this.dom = dom;
	
  this.render = function()
  {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, this.dom.clientWidth / this.dom.clientHeight, 0.1, 1000 );
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( this.dom.clientWidth, this.dom.clientHeight );
    this.dom.appendChild( renderer.domElement );
    const geometry = new THREE.BoxGeometry( 1, 1, 1 );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    const cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    camera.position.z = 5;
    
    function animate() {
      requestAnimationFrame( animate );
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render( scene, camera );
    }
	  
    animate();
    
    this.cube = cube;
  };
	
  this.update = function(hexColor)
  {
    const cube = this.cube;
    const material = cube.material;
    const color = material.color;
    color.setHex(hexColor);
  };
}

main.js定义了一个ThreeRenderer3D组件类,大部分代码由three.js官方教程拷贝,它的render函数绘制一个简单的3D立方体, update函数可以更新这个3D立方体的颜色。

调试:

npm install --save three
npm install --save-dev vite
npx vite

执行npx vite build将它们构建为前端程序包:

index.html
assets/index-*.js

先将上述前端程序包压缩为ZIP包后导入为DataGear看板,然后将index.html中的

<script type="module" crossorigin src="/assets/index-*.js"></script>

修改为采用相对路径引入方式:

<script type="module" crossorigin src="assets/index-*.js"></script>

此时,点击【保存并展示】看板后,打开展示页面,点击【渲染】、【更新】按钮,将可以看到3D效果,如下所示:

下面,我们将上述3D组件制作为DataGear自定义图表,可以根据数据集返回的数值,更新其颜色。

首先,新建SQL数据集:

名称:最新指标值

SQL:

SELECT
	D_VALUE AS VALUE
FROM
	t_date_value
ORDER BY
	d_date DESC
LIMIT 0, 1

上述SQL从t_date_value表中查询最新日期的指标值

然后,新建一个关联上述数据集的自定义类型的图表;

名称:最新指标值

图表类型:自定义

数据集:最新指标值

更新间隔:2000毫秒

上述图表每隔2秒更新一次数据

最后,修改刚才导入看板的index.html,添加自定义图表渲染器,当t_date_value表中最新指标值大于等于80时,将3D模型渲染为红色,否则,渲染为绿色。

修改后的index.html如下所示:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="assets/index-*.js"></script>
<script>
//自定义图表渲染器
var chartRenderer =
{
  render: function(chart)
  {
    var internal = new ThreeRenderer(chart.element());
    internal.render();
    chart.internal(internal);
  },
  update: function(chart, results)
  {
    var chartDataSet = chart.chartDataSetMain();
    var result = chart.resultOf(results, chartDataSet);
    var value = chart.resultCell(result, "VALUE", 0);
    var color = (value >= 80 ? 0xff0000 : 0x00ff00);
    var internal = chart.internal();
    internal.update(color);
  }
};
</script>
</head>
<body>
<div style="padding:1rem;text-align:center;">
 <h1>DataGear制作3D图表</h1>
 <h5>http://www.datagear.tech</h5>
  <div style="display:inline-block;width:300px;height:300px;margin:1rem;"
    dg-chart-renderer="chartRenderer" dg-chart-widget="【图表ID】"></div>
  
  <div style="display:inline-block;width:300px;height:300px;margin:1rem;"
    dg-chart-renderer="chartRenderer" dg-chart-widget="【图表ID】"></div>
</div>
</body>
</html>

上述assets/index-*.js应替换为实际的JS文件名,【图表ID】应替换为实际的最新指标值图表的ID

点击【保存并展示】,即可看到3D图表效果,如下图所示:

官网地址:http://www.datagear.tech

源码地址:

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear

相关推荐
十三画者几秒前
【工具】survex一个解释机器学习生存模型的R包
人工智能·机器学习·数据挖掘·数据分析·r语言·数据可视化
十三画者39 分钟前
【工具】ReConPlot一个可视化和解释基因组重排的R包
数据挖掘·r语言·数据可视化
界面开发小八哥16 小时前
数据可视化图表库LightningChart JS 全新发布v7.0——提高视觉质量
开发语言·javascript·信息可视化·图表·lightningchart
点云SLAM16 小时前
Python 数据可视化
开发语言·python·信息可视化·数据可视化
孪创启航营19 小时前
解锁动态3D标签的可视化玩法
前端·gis·数据可视化
Winwin20 小时前
知识图谱前端开源项目调研
前端·数据可视化
不剪发的Tony老师1 天前
DataEase:一款国产开源数据可视化分析工具
数据分析·dataease·bi
databook1 天前
『Plotly实战指南』--架构与设计理念
python·数据分析·数据可视化
waicsdn_haha1 天前
Jupyter Notebook 全平台安装与配置教程(附Python/Anaconda双方案)
ide·python·jupyter·kubernetes·数据可视化·notebook
Mapmost2 天前
【从零打造视觉盛宴·进阶篇】城市场景建模避坑指南,常见问题轻松破!
笔记·强化学习·数据可视化