脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → DataGear数据可视化看板

DataGear开发基于three.js的3D数据可视化看板的详细代码

 更新时间：2024年02月27日 09:58:41   作者：DataGear  
DataGear 支持采用原生的HTML、JavaScript、CSS制作数据可视化看板，也支持导入由npm、vite等前端工具构建的前端程序包，这篇文章主要介绍了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图表效果，如下图所示：

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

源码地址：

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

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

到此这篇关于DataGear开发基于three.js的3D数据可视化看板的详细代码的文章就介绍到这了,更多相关DataGear数据可视化看板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • layui-select动态选中值的例子

    layui-select动态选中值的例子

    今天小编就为大家分享一篇layui-select动态选中值的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript判断移动端访问设备并解析对应CSS的方法

    javascript判断移动端访问设备并解析对应CSS的方法

    这篇文章主要介绍了javascript判断移动端访问设备并解析对应CSS的方法,涉及移动端设备的判断及动态加载技巧,需要的朋友可以参考下
    2015-02-02
  • IE 下的只读 innerHTML

    IE 下的只读 innerHTML

    可以先使用 DOM 的 createElement 方法创建 tr 和 td，然后对 td 的 innerHTML 进行相应操作，最后用 appendChild 方法把创建的元素添加到 DOM 树中。这样在 IE 下就可以正常运行了。
    2009-08-08
  • 基于JavaScript的操作系统你听说过吗？

    基于JavaScript的操作系统你听说过吗？

    基于JavaScript的操作系统，你听说过吗？小编也是第一次听说，接触，和大家一起了解一下
    2016-01-01
  • JavaScript原生实现观察者模式的示例

    JavaScript原生实现观察者模式的示例

    下面小编就为大家分享一篇JavaScript原生实现观察者模式的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 鼠标事件延时切换插件

    鼠标事件延时切换插件

    为了防止误操作，很多时候需要对鼠标滑过触发的事件进行延时处理。网易首页的选项卡好几年之前就添加了这个特性，当时我记得是采用150毫秒作为触发基准
    2011-03-03
  • JavaScript中函数声明优先于变量声明的实例分析

    JavaScript中函数声明优先于变量声明的实例分析

    同一个标示符，先后用var和function声明它。最后它是什么呢
    2012-03-03
  • JS实现iframe自适应高度的方法(兼容IE与FireFox)

    JS实现iframe自适应高度的方法(兼容IE与FireFox)

    这篇文章主要介绍了JS实现iframe自适应高度的方法,涉及javascript与iframe交互动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2016-06-06
  • js/jq仿window文件夹框选操作插件

    js/jq仿window文件夹框选操作插件

    这篇文章主要介绍了js/jq仿window文件夹框选操作插件,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • nodejs win7下安装方法

    nodejs win7下安装方法

    什么是Node.js?还服务器端javascript?对于这个概念我在这篇文章不做解释，可以自己去搜索了解下，服务器端js不是新技术，只是最近的node.js的火爆让他爆发了，我会在以后的文章里解释什么是node.js
    2012-05-05

最新评论