Found that now on the industrial SCADA or telecom network management aspect with the chart is particularly much, although the vast majority of people in the chart making aspect with Echarts, he is really good, but sometimes we can not call other plug-ins, this time have to write these beautiful charts, but the chart easily do not beautiful… See there is a website in the sale of charts, feel very good, I used HT for Web 3D to make a small example, very simple, also very good look, ha ha ~

The Demo address: www.hightopo.com/demo/Wirefr…

Dynamic renderings are as follows:



This example is really easy to implement in HT. First create a basic DM data model in HT, then add the data model to the G3D 3D component, set the perspective in 3D and add the 3D component to the body element:

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);
g3d.setEye(0, 185, 300);
g3d.addToDOM();
g3d.getView().style.background = '#000';Copy the code

Then I made these five chart bars. My idea is as follows: there is a node in the inner layer, a transparent node in the outer layer, and a 3D text at the bottom to show the current percentage.

The inner Node is very easy. I created a new Node object using the HT. Node wrapper, and then set the Node style using node.s method:

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);Copy the code

Firstly, the shape3D attributes are specified as the icon effects of the 3D model, and the cylinderModel is a 3d model customized with HT. Refer to the HT for Web Modeling Manual:

cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);Copy the code

In HT, the node.a method is reserved for storing business data, and we can add as many properties to it as we want.

Next we will create the outer transparent node. This node is constructed in much the same way as the inner node, but with a little more “transparent” styling:

var cNode = new ht.Node(); Opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0 '#fff', '3d.movable': false }); cNode.p3([p3[0], 50, p3[2]]); cNode.s3(20, 100, 20); dm.add(cNode);Copy the code

Opacity: set ‘shape3d.transparent’ to true before setting ‘shape3d.opacity’.

Finally, 3d text, rendering 3d text requires a JSON typeface font, then load the JSON typeface into memory with HT.default. loadFontFace, please refer to the HT for Web 3D manual for details:

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
    });
});Copy the code

Finally, to dynamically change the bar chart in the chart chart, we need to set the animation and synchronize the value of the 3D font:

setInterval(function(){
    if(node.a('myHeight') < 100){
        node.a('myHeight', (node.getAttr('myHeight')+1));
	node.s3(20, node.a('myHeight'), 20);
	node.p3(p3[0], node.a('myHeight')/2, p3[2]);
    }else{
        node.a('myHeight', 0);
	node.s3([20, 0, 20]);
	node.p3([p3[0], 0, p3[2]]);
    }
    if (text) text.s('shape3d.text', node.a('myHeight')+'%');
}, 100);Copy the code

The key here is my custom property “myHeight”, which I use to store variables and can change their value at will to achieve dynamic binding.

If you don’t understand, you can leave a message, or go to our official website to check the manual HT for Web. There are more unexpected effects that can be realized quickly