DataGear開發(fā)基于three.js的3D數(shù)據(jù)可視化看板的詳細代碼

更新時間：2024年02月27日 09:58:41 作者：DataGear

DataGear?支持采用原生的HTML、JavaScript、CSS制作數(shù)據(jù)可視化看板，也支持導入由npm、vite等前端工具構建的前端程序包，這篇文章主要介紹了DataGear制作基于three.js的3D數(shù)據(jù)可視化看板,需要的朋友可以參考下

DataGear專業(yè)版 1.0.0 已發(fā)布，歡迎試用！ http://datagear.tech/pro/

DataGear 支持采用原生的HTML、JavaScript、CSS制作數(shù)據(jù)可視化看板，也支持導入由npm、vite等前端工具構建的前端程序包。得益于這一特性，可以很容易制作基于three.js的3D數(shù)據(jù)可視化看板。

首先，參考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函數(shù)繪制一個簡單的3D立方體， update函數(shù)可以更新這個3D立方體的顏色。

調試：

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

執(zhí)行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自定義圖表，可以根據(jù)數(shù)據(jù)集返回的數(shù)值，更新其顏色。

首先，新建SQL數(shù)據(jù)集：

名稱：最新指標值

SQL：

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

上述SQL從t_date_value表中查詢最新日期的指標值

然后，新建一個關聯(lián)上述數(shù)據(jù)集的自定義類型的圖表;

名稱：最新指標值

圖表類型：自定義

數(shù)據(jù)集：最新指標值

更新間隔：2000毫秒

上述圖表每隔2秒更新一次數(shù)據(jù)

最后，修改剛才導入看板的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>