我最近开始研究用Canvas做3D图表的事，感觉真挺有意思。不管是工厂还是电话网络，图表都无处不在。虽然多数人都喜欢直接用echarts这些现成的工具，但是有时候咱们也得自己捣鼓捣鼓。我觉得，虽然初次弄这个可能有点难度，但是利用Canvas和HTforWeb3D，我们就能做出特别漂亮且活灵活现的图表了。
初探Canvas与3D图表制作
想要画出炫酷的3D图表吗？得先熟悉Canvas这家伙！它是个用JavaScript画画的好帮手，让你随心所欲地绘画。先从简单的线条、方形、圆形学起，这些都是画出造型丰富的3D图形的基础！
接下来，我就开始琢磨咋用Canvas画出有3D感觉的画面！这个过程中要用到一堆高深的技术，比如用透视变换和灯光效果让画面更有层次感。试过又调了好多次之后，发现就算给个简单图形用上这些技能也都能让它变得更逼真！
dm = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dm); g3d.setEye(0, 185, 300); g3d.addToDOM(); g3d.getView().style.background = '#000';
HTforWeb3D的应用
在做3D图时，HTforWeb3D帮了大忙，它有很多3D模型和动画，还能自己定制数据和样子，比如我弄了个基础的3D数据模型(dm)然后导入3D组件(g3d)里就能看了。变换各种视角和亮度，让图表换个角度都好看。
更酷的是，HTforweb3D让我能实时更新图表上的数字！只要改改节点属性，就能让柱形图高度跟着变，再也不只是看那静止的数据了，而是动态本地化的变化。
var node = new ht.Node();
node.s({
'shape3d': cylinderModel,
'shape3d.color': color,
'3d.movable': false
});
node.a({
'myHeight': s3[1],
});
node.p3([p3[0], s3[1]/2, p3[2]]);
node.s3(s3);
dm.add(node);
3D图表的细节处理
做3D图时，我很在意那些小细节。像里面的点，我给它们设计了独特的3D形状（shape3d），还有用我家猫猫HT的定制圆柱形模型来提高视觉效果。然后，节点动态变化那些属性可让图表看来更活泼有趣~
cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);
给外边加个透明效果，chart更美了，颜色也深了点。还用上了3D字秀百分比，配合定制版的字型，别有一番韵味。虽然占运存有点多，但画得好的话，图就很清楚！
动画与实时更新
让图表更炫酷点，我搞了个动画效果进去，然后设定个永久循环，柱子高矮就会不停地变，整得跟实时更新似的。还有，那些3D文字的数据也要跟着图表一起更新，这样大家既能看见图表动起来，又能马上知道详细的数字内容！
总结与展望
var cNode = new ht.Node();
cNode.s({
'shape3d': cylinderModel,
'shape3d.transparent': true,
'shape3d.opacity': 0.2,
'label.color': '#fff',
'3d.movable': false
});
cNode.p3([p3[0], 50, p3[2]]);
cNode.s3(20, 100, 20);
dm.add(cNode);
用Canvas画了个3D动态图，感觉真的很炫！不过过程中遇到困难也不少，但最后出来的效果让我觉得付出都是值得的。推荐你们试试看Canvas和HTforWeb3D搞3D图，肯定能有新发现！
咱们来聊聊！说说看，你们造3D图表的时候最在意什么特点或者效果？大家可以踊跃地说一说自己的看法，当然别忘了给这篇文章点个赞~这样就能帮助更多人轻松学会用Canvas做3D图表啦～
ht.Default.loadFontFace('./wenquanyi.json', function(){
//......
var text = new ht.Node();
text.s3([5, 5, 5]);
text.p3(cNode.p3()[0]-5, -10, 0);
dm.add(text);
text.s({
'shape3d' : 'text',
'shape3d.text': node.a('myHeight')+'%',
'shape3d.text.curveSegments': 1,
'3d.movable': false
});
});
评论0