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

90次阅读

共计 3665 个字符，预计需要花费 10 分钟才能阅读完成。

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>