我最近玩儿着搞了个挺有意思的东西，就是那个能让你玩转WebGL和json的神奇小盒，还可以跟Echarts图表实时交互！今天就给大家说说这货是怎么做出来的，顺便说下我自己琢磨这玩意儿时的小感悟。
初识HT与CSGBox
第一次玩HT，就被它们超多的包装和方便得不得了的操作给迷住了。这次我选了ht.CSGBox，就像一张白纸，等着我来涂鸦！看了HTforWeb的模型手册后，我学会了怎么操控这个盒子的各个部位，还能往上面加自己喜欢的各种小玩意儿。
贴图的探索
加个图片做装饰，就是那种初次的想法。我试过了ht.Default.setImage那个方法，确实能把做好的画布上的图像直接贴上去。虽然有点麻烦，但是看到我亲手设计的图案在盒子上那么真实，心里的那股满足感就把之前的辛苦都忘得一干二净
数据的魔法
var box = new ht.CSGBox(); dataModel.add(box);
为了让盒子更有趣，我决定画个动态的echarts图在上面。用ht.Default.xhrLoad这个方法，我从json文件里把数据导入，再用ht.Default.parse变成图表。这个过程真是太奇妙了，每次数据变，盒子就能立刻显示出来，像真的活过来了似的！
动画的魅力
为了让界面更炫酷，加了点儿动画特效。这些动效不只是随便挪动点儿东西，而且跟数据表是有关联的！数据变了，它也随之改变，看起来非常有趣。设计好了之后，我对WebGL的动效弄明白多了。
锯齿问题的挑战
搞制做时我也遇到个难题！就是盒子上的图案和文字边儿的那些锯齿印儿。这让我明白了处理半透明东西时，得格外注意那个叫“blend”的样式设置。我发现把“all.transparent”调一调就行了，现在我也学会怎么处理这些小细节了~
代码的简洁之美
ht.Default.xhrLoad('displays/demo/pump.json', function(text){
const json = ht.Default.parse(text);
pumpDM.deserialize(json);
var currentRotation = 0;
var lastTime = new Date().getTime();
setInterval(function(){
var time = new Date().getTime();
var deltaTime = time - lastTime;
currentRotation += deltaTime * Math.PI / 180 * 0.3;
lastTime = time;
pumpDM.getDataByTag('fan1').setRotation(currentRotation);
pumpDM.getDataByTag('fan2').setRotation(currentRotation);
box.iv();
// g3d.iv();这边也可以刷新g3d，但是局部刷新更省
pumpGV.validateImpl();
}, 10);
}, 10);
简单说说，这个项目虽然功能一大堆，但是代码就一百来行，轻松就能搞定！真心觉得好用的工具能够提升效率，而且用着心情也会特别愉快。
个人的成长与反思
pumpGV.getWidth = function() { return 600;}
pumpGV.getHeight = function(){ return 600;}
pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示
搞定这个项目，不只是我技能上的提高，更是思维上的转变，能把繁琐功能简单化。每次解决难题，每处微调完善，都使我越来越有信心，对这行也越来越充满热爱！
总结
ht.Default.setImage('echart', charts(option));
ht.Default.setImage('pump', pumpGV.getCanvas());
这个盒子做起来挺有意思，超有挑战性，但也超级好玩！这不只是技术炫技，也是我成长的足迹。那你们？要是给你们个机会，你们会在这个小盒子上搞些啥新玩意儿出来？快来分享下！还有，记得点赞转发，让大家都来体验一把WebGL和Echarts的魔力！
评论0