吃瓜热搜 发表于 2024-3-1 22:06:03

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>



<button onclick="threeRender()">渲染</button>
<button onclick="threeUpdate()">更新</button>
<p></p>



</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中的
修改为采用相对路径引入方式:
此时,点击【保存并展示】看板后,打开展示页面,点击【渲染】、【更新】按钮,将可以看到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">


</head>
<body>

<h1>DataGear制作3D图表</h1>
<h5>http://www.datagear.tech</h5>




</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

来源:https://www.cnblogs.com/datagear/p/18044233
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: DataGear 制作基于 three.js 的 3D 数据可视化看板