关于three.js:DataGear制作基于threejs的3D数据可视化看板
<article class=“article fmt article-content”><h3>DataGear专业版 1.0.0 已公布，欢送试用！ http://datagear.tech/pro/</h3><p>DataGear 反对采纳原生的HTML、JavaScript、CSS制作数据可视化看板，也反对导入由<code>npm</code>、<code>vite</code>等前端工具构建的前端程序包。得益于这一个性，能够很容易制作基于three.js的3D数据可视化看板。</p><p>首先，参考three.js的官网教程 https://threejs.org/docs/index.html#manual/en/introduction/Installation 编写3D前端源码包。</p><p>源码包中蕴含两个文件：<code>index.html</code>、<code>main.js</code>，如下所示：</p><p>index.html</p><pre><code class=“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></code></pre><blockquote><code>index.html</code>是下述<code>main.js</code>中定义3D组件的调试页面，点击【渲染】、【更新】按钮可调试3D组件成果。</blockquote><p>main.js</p><pre><code class=“javascript”>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); };}</code></pre><blockquote><code>main.js</code>定义了一个<code>ThreeRenderer</code>3D组件类，大部分代码由three.js官网教程拷贝，它的<code>render</code>函数绘制一个简略的3D立方体， <code>update</code>函数能够更新这个3D立方体的色彩。</blockquote><p>调试：</p><pre><code>npm install –save threenpm install –save-dev vitenpx vite</code></pre><p>执行<code>npx vite build</code>将它们构建为前端程序包：</p><pre><code>index.htmlassets/index-.js</code></pre><p>先将上述前端程序包压缩为<code>ZIP</code>包后导入为DataGear看板，而后将<code>index.html</code>中的</p><pre><code><script type=“module” crossorigin src="/assets/index-.js”></script></code></pre><p>批改为采纳相对路径引入形式：</p><pre><code><script type=“module” crossorigin src=“assets/index-.js”></script></code></pre><p>此时，点击【保留并展现】看板后，关上展现页面，点击【渲染】、【更新】按钮，将能够看到3D成果，如下所示：</p><p></p><p>上面，咱们将上述3D组件制作为DataGear自定义图表，能够依据数据集返回的数值，更新其色彩。</p><p>首先，新建SQL数据集：</p><p>名称：<code>最新指标值</code></p><p>SQL：</p><pre><code>SELECT D_VALUE AS VALUEFROM t_date_valueORDER BY d_date DESCLIMIT 0, 1</code></pre><blockquote>上述SQL从<code>t_date_value</code>表中查问最新日期的指标值</blockquote><p>而后，新建一个关联上述数据集的<code>自定义</code>类型的图表;</p><p>名称：<code>最新指标值</code></p><p>图表类型：<code>自定义</code></p><p>数据集：<code>最新指标值</code></p><p>更新距离：<code>2000毫秒</code></p><blockquote>上述图表每隔2秒更新一次数据</blockquote><p>最初，批改方才导入看板的<code>index.html</code>，增加自定义图表渲染器，当<code>t_date_value</code>表中最新指标值大于等于<code>80</code>时，将3D模型渲染为红色，否则，渲染为绿色。</p><p>批改后的<code>index.html</code>如下所示：</p><pre><code class=“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></code></pre><blockquote>上述<code>assets/index-*.js</code>应替换为理论的JS文件名，<code>【图表ID】</code>应替换为理论的<code>最新指标值</code>图表的ID</blockquote><p>点击【保留并展现】，即可看到3D图表成果，如下图所示：</p><p></p><p>官网地址：http://www.datagear.tech</p><p>源码地址：</p><p>Gitee：https://gitee.com/datagear/datagear</p><p>Github：https://github.com/datageartech/datagear</p></article> ...