双击事件倒是简单，只要监听 HT 封装好的事件，判断事件类型，并作出相应的动作即可：
| g3d.mi(function(e) {//addInteractorListener 事件监听函数 if (e.kind !== 'doubleClickData') //判断事件类型为双击节点 return; var data = e.data, p3; if (data.a('cabinet')) //机身 p3 = data.p3(); else { host = data.getHost(); //获取点击节点的吸附对象 if (host && host.a('cabinet')) {//如果吸附对象为 cabinet p3 = host.p3(); } } if (!p3) return; setCenter(p3); //设置 center 目标的要移向位置为 cabinet 的位置 setEye([p3[0], 211, p3[2] + 247]); //设置 eye 眼睛要移向的位置 }); |
顶部导航栏
一开始看到这个例子的时候我在想，这人好厉害，我用 HT 这么久，用 HT 的 ht.widget.Toolbar 还没能做出这么漂亮的效果，看着看着发现这原来是用 form 表单做的，厉害厉害，我真是太愚钝了。
| var form = E.top = new ht.widget.FormPane(); //顶部 表单组件 form.setRowHeight(E.topHeight);//设置行高 form.setVGap(-E.topHeight);//设置表单组件水平间距 设置为行高的负值则可以使多行处于同一行 form.setVPadding(0);//设置表单顶部和顶部与组件内容的间距 form.addRow([null, {//向表单中添加一行组件，第一个参数为元素数组，元素可为字符串、json格式描述的组件参数信息、html元素或者为null image: { icon: './symbols/inputBG.json', stretch: 'centerUniform' } }], [40, 260]);//第二个参数为每个元素宽度信息数组，宽度值大于1代表固定绝对值，小于等于1代表相对值，也可为80+0.3的组合 form.addRow([null, null, { id: 'searchInput', textField: {} }, { element: '机房可视化管理系统', color: 'white', font: '18px arial, sans-serif' }, null, { button: { // label: '视图切换', icon: './symbols/viewChange.json', background: null, selectBackground: 'rgb(128,128,128)', borderColor: 'rgba(0, 0, 0, 0)', onClicked: function() { E.focusTo(); } } }, null, { button: { // label: '告警', icon: './symbols/alarm.json', togglable: true, selected: false, background: null, selectBackground: 'rgb(128,128,128)', borderColor: 'rgba(0, 0, 0, 0)', onClicked: function(e) { E.setAlarmVisible(this.isSelected()); } } }, null], [40, 42, 218, 300, 0.1, 50, 10, 50, 10]); |
以上都只是能实现，但是并没有真正地添加进 html 标签中，也就意味着，现在界面上什么都没有！别忘了在页面加载的时候将 3D 场景添加进 body 中，同时也别忘了将 form 表单添加进 body 中，并且设置窗口大小变化事件时，form 表单也需要实时更新：
