DataGear 制作基于 three.js 的 3D 数据可视化看板
DataGear专业版 1.0.0 已发布，欢迎试用！ http://datagear.tech/pro/
DataGear 支持采用原生的HTML、JavaScript、CSS制作数据可视化看板，也支持导入由npm、vite等前端工具构建的前端程序包。得益于这一特性，可以很容易制作基于three.js的3D数据可视化看板。
首先，参考three.js的官方教程 https://threejs.org/docs/index.html#manual/en/introduction/Installation 编写3D前端源码包。
源码包中包含两个文件：index.html、main.js，如下所示：
index.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
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如下所示：
<!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图表效果，如下图所示：
源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear
DataGear 制作基于 three.js 的 3D 数据可视化看板的更多相关文章
- 基于vue和echarts的数据可视化实现
基于vue和echarts的数据可视化: https://github.com/MengFangui/awesome-vue.git
- 基于 HTML5 的 WebGL 3D 档案馆可视化管理系统
前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...
- 如何用Python制作优美且功能强大的数据可视化图像
第一个案例 首先开始来绘制你的第一个图表 from pyecharts import Bar '''遇到不懂的问题?Python学习交流群:1004391443满足你的需求,资料都已经上传群文件,可以 ...
- Python数据可视化编程实战——导入数据
1.从csv文件导入数据 原理:with语句打开文件并绑定到对象f.不必担心在操作完资源后去关闭数据文件,with的上下文管理器会帮助处理.然后,csv.reader()方法返回reader对象,通过 ...
- 使用 jupyter-notebook + python + matplotlib 进行数据可视化
上次用 python 脚本中定期查询数据库,监视订单变化,将时间与处理完成订单的数量进行输入写入日志,虽然省掉了人为定时查看数据库并记录的操作,但是数据不进行分析只是数据,要让数据活起来! 为了方便看 ...
- 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）
我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...
- 基于node.js制作爬虫教程
前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...
- 一统江湖的大前端(1)——PPT制作库impress.js
<一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...
- 基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统
前言 大家好,老郑我又回来了.这一期为大家带来一个非常好玩的 demo,我们制作一套自己的 3D 管道控制系统,运用了( http://www.hightopo.com )HT 的 Graph3dVi ...
- 基于ArcGIS JS API的在线专题地图实现
0 引言 专题地图是突出而深入的表示一种或几种要素或现象,即按照地图主题的要求,集中表示与主题有关内容的地图.专题地图的专题要素多种多样,分类方法也多种多样,根据专题地图表现数据的特点可分为定 ...
随机推荐
- python批量上传文件到七牛云
导航 引子 棘手的需求 化繁为简 实战案例 结语 参考 本文首发于智客工坊-<python批量上传文件到七牛云>,感谢您的阅读,预计阅读时长3min. 古之立大事者,不惟有超世之才,亦必有 ...
- VUe2.0 和 Vue3.0 的生命周期作对比
VUe2.0 和 Vue3.0 的生命周期作对比 beforeCreate -> 请使用 setup() created -> 请使用 setup() beforeMount -> ...
- vue插件实现表格拖拽 sortable 遇见的坑
下载插件 npm install sortable.js --save (下载的时候一定要这样去下载,不要去下载 npm install sortable--save ) 因为sortable.js和 ...
- 【发现一个问题】VictoriaMetrics中，突然某个时间段新增的data point无法查询出来
写了一个很简单的python程序,使用remote write协议发数据到vm-insert. 可是有个时段突然查询不出来数据了. 百思不得其解. 吃完中午饭,刷新页面又出来了. 还不清楚问题出现在哪 ...
- Liunx网络配置
1.安装精简版:CentOS-7-x86_64-Minimal-2009.iso 2.进入配置文件: vi /etc/sysconfig/network-scripts/ifcfg-ens33 3. ...
- 微信小程序-页面跳转Tabbar
官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar 首先我们 ...
- 2023中国高校计算机大数据挑战赛：论文学科分类baseline|清华主办
2023中国高校计算机大数据挑战赛:论文学科分类baseline|清华主办 官方地址:https://www.heywhale.com/home/competition 项目码源见文末 1.比赛介绍 ...
- git 上传错误This oplation equires one of the flowi vrsionsot the NET Framework:.NETFramework
相关文章链接: 码云(gitee)配置SSH密钥 码云gitee创建仓库并用git上传文件 git 上传错误This oplation equires one of the flowi vrsions ...
- 【三】gym简单画图、快来上手入门吧，超级简单！
相关文章: [一]gym环境安装以及安装遇到的错误解决 [二]gym初次入门一学就会-简明教程 [三]gym简单画图 [四]gym搭建自己的环境,全网最详细版本,3分钟你就学会了! [五]gym搭建自 ...
- C/C++ Npcap包实现数据嗅探
npcap 是Nmap自带的一个数据包处理工具,Nmap底层就是使用这个包进行收发包的,该库,是可以进行二次开发的,不过使用C语言开发费劲,在进行渗透任务时,还是使用Python构建数据包高效,这东西 ...