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图表效果，如下图所示：

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

源码地址：

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

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

DataGear 制作基于 three.js 的 3D 数据可视化看板的更多相关文章

  1. 基于vue和echarts的数据可视化实现

    基于vue和echarts的数据可视化: https://github.com/MengFangui/awesome-vue.git

  2. 基于 HTML5 的 WebGL 3D 档案馆可视化管理系统

    前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...

  3. 如何用Python制作优美且功能强大的数据可视化图像

    第一个案例 首先开始来绘制你的第一个图表 from pyecharts import Bar '''遇到不懂的问题?Python学习交流群:1004391443满足你的需求,资料都已经上传群文件,可以 ...

  4. Python数据可视化编程实战——导入数据

    1.从csv文件导入数据 原理:with语句打开文件并绑定到对象f.不必担心在操作完资源后去关闭数据文件,with的上下文管理器会帮助处理.然后,csv.reader()方法返回reader对象,通过 ...

  5. 使用 jupyter-notebook + python + matplotlib 进行数据可视化

    上次用 python 脚本中定期查询数据库,监视订单变化,将时间与处理完成订单的数量进行输入写入日志,虽然省掉了人为定时查看数据库并记录的操作,但是数据不进行分析只是数据,要让数据活起来! 为了方便看 ...

  6. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  7. 基于node.js制作爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  8. 一统江湖的大前端(1)——PPT制作库impress.js

    <一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...

  9. 基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统

    前言 大家好,老郑我又回来了.这一期为大家带来一个非常好玩的 demo,我们制作一套自己的 3D 管道控制系统,运用了( http://www.hightopo.com )HT 的 Graph3dVi ...

  10. 基于ArcGIS JS API的在线专题地图实现

    0 引言     专题地图是突出而深入的表示一种或几种要素或现象,即按照地图主题的要求,集中表示与主题有关内容的地图.专题地图的专题要素多种多样,分类方法也多种多样,根据专题地图表现数据的特点可分为定 ...

随机推荐

  1. OpenSSH 9.2P1升级以及版本显示的处理过程

    说明 本次维护的时间是 2023-2-9 最新已发布的补丁是 OpenSSH9.2P1版本 其他本本应该是类似处理. 下载介质 在 OpenSSH官网打开相关界面. http://www.openss ...

  2. [知乎]2019-nCov的致死率问题

    https://www.zhihu.com/question/369630554/answer/998649507 知乎 dr.李的文章 跟自己一开始的理解很相似.. 个人也认为死亡率会高于2% 武汉 ...

  3. echarts使用transform缩放后导致图标模糊

    echarts使用transform缩放后导致图标模糊 --的解决办法 当使用了transform: scale(x,y)缩放后致使echarts图表模糊.怎么解决这个问题呢? 第一种解决办法:将ca ...

  4. 如何将axios封装成一个插件

    01==>重新写axios的插件 在src下创建一个插件文件为plugins 在创建一个http.js文件 根据官方插件 重新写axios的插件 http.js文件如下 import axios ...

  5. 【代码片段】fasthttp 中的输出使用 gzip 压缩

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 直接上代码: import ( "github. ...

  6. 【JS 逆向百例】Fiddler 插件 Hook 实战，某创帮登录逆向

    关注微信公众号:K哥爬虫,QQ交流群:808574309,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途 ...

  7. 如何通过gRPC传输文件

    在gRPC中,可以通过将文件分割成多个小块,然后使用流式RPC将这些小块发送到服务器来传输文件.以下是一个简单的示例,展示了如何在gRPC中实现文件传输. 首先,我们需要定义一个服务来处理文件传输.在 ...

  8. c++基础之表达式

    这次接着更新<c++ primer> 这本书的读书笔记,上一篇博文更新到了书中的第三章,本次将记录书中的第四章--表达式 左值与右值 在理解表达式之前需要先理解c++中左值和右值的概念. ...

  9. Spring一套全通3—AOP编程

    百知教育 - Spring系列课程 - AOP编程 第一章.静态代理设计模式 1. 为什么需要代理设计模式 1.1 问题 在JavaEE分层开发开发中,那个层次对于我们来讲最重要 DAO ---> ...

  10. ubuntu离线安装tcpdump

    环境 Distributor ID: Ubuntu Description: Ubuntu 16.04.5 LTS Release: 16.04 Codename: xenial 准备安装包 tcpd ...