dm = new ht.DataModel();// 数据容器，可以将显示在界面上的所有数据通过 dataModel.add 存储在数据容器中g3d = new ht.graph3d.Graph3dView(dm);// 3D 组件g3d.addToDOM();// 将 3D 组件的底层 p 添加到 body 中

addToDOM = function(){       var self = this,        view = self.getView(),// 获取组件的底层 p        style = view.style;    document.body.appendChild(view);// 将组件的底层 p 添加进 body 中               style.left = '0';// HT 组件默认设置 position 样式属性为 absolute 绝对定位方式    style.right = '0';    style.top = '0';    style.bottom = '0';          window.addEventListener('resize', function () { self.iv(); }, false);            }

ht.Default.xhrLoad('scenes/隧道.json', function(text){// 加载 json 场景    var json = ht.Default.parse(text);// 转义 json 文件    dm.deserialize(json);// 将 json 内容反序列化到场景中    // 可以在这个里面任意操作 datamodel 数据容器中的数据了}

var task = {    action: function(data){        if(!data.getTag()) return;        var tag = data.getTag();// 获取图元的 tag 属性    if(tag === 'feng'){        data.r3(0, (data.r3()[1]+Math.PI/12), 0);// r3 为 3d 中的旋转，这里 y 轴在原来的基础上再旋转 Math.PI/12 角度    }else if(tag === 'feng2'){        data.r3(0, 0, data.r3()[2]+Math.PI/12);    }else if(tag === 'door'){            if(data.getTall() > 0){// 获取图元的 tall 属性，高度                data.setTall(data.getTall()-20);// 设置高度为当前高度减去20            }        }    }}dm.addScheduleTask(task);// 在数据容器 dataModel 中添加调度任务

form.addRow([// addRow 添加一行 我这个部分是添加一个标题    {        element: '交通灯控制',// 这一行第一部分的显示文本        align: 'center',// 文本对齐方式        color: 'rgb(0,210,187)',// 文本颜色        font: 'bold 16px arial, sans-serif'// 文本字体    }], [0.1]);// 记得要设置这行的宽度form.addRow([ // 这行中有两个部分，一个“设备描述”，一个 文本“0”，所以要设置两个宽度，宽度要放在一个数组中          '设备描述:',// 第一部分    {// 第二部分        element: '0',        color: 'rgb(0,210,187)'    }],[80, 0.1], 34);// addRow 函数第二个参数为宽度设置，将上面内容的宽度依次放进这个数组中。第三个参数为高度form.addRow([         '当前状态:',    {// 也可以将数组中的某个部分设置为空字符串，占据一些宽度，这样比例比较好调        element: ''    },    {        id: '105',// id唯一标示属性，可通过formPane.getItemById(id)获取添加到对应的item对象        button: {/ /按钮，设置了该属性后HT将根据属性值自动构建ht.widget.Button对象，并保存在element属性上            icon: 'symbols/隧道用图标/light.json',// 按钮上的显示图标            background: 'rgba(0,7,26,0.60)',// 按钮背景            borderColor: 'rgb(0, 7, 26)',// 按钮边框颜色            clickable: false// 是否可点击        }    }],[80, 0.1, 84], 30);form.addRow([// 如果和上面一行的距离差别与其它行间距不同，可以通过增加一行空行，设置高度即可                        '',    {        element: ''    }], [200, 0.1], 10);form.addRow([                        '修改状态:',    {        element: ''    },    {        button: {            icon: 'symbols/隧道用图标/light.json',// 设置按钮的图标            background: 'rgba(0,7,26,0.60)',            borderColor: 'rgb(0, 7, 26)',            groupId: 'btn',// 通过getGroupId和setGroupId获取和设置组编号，属于同组的togglable按钮具有互斥功能。后面的三个按钮也是设置了同一个 groupId            onClicked: function(e){// 点击后的回调函数                btnClick('light');             }        }    }],[80, 0.1, 84], 30);

background: url('assets/控制.png') no-repeat;

function btnClick(imageName){    if(flag === 1){// 做的判断是根据3d的事件来处理的，等下会提        dm.getDataByTag('light').s({// 通过getDataByTag获取节点，设置节点的style样式            'back.image': 'symbols/隧道用图标/'+imageName+'.json',// 设置图元的背面图片            'front.image': 'symbols/隧道用图标/'+imageName+'.json'// 设置图元你的前面图片        });    }else if(flag === 2){        dm.getDataByTag('light1').s({            'back.image': 'symbols/隧道用图标/'+imageName+'.json',            'front.image': 'symbols/隧道用图标/'+imageName+'.json'        });    }else{}    form.getViewById(105).setIcon('symbols/隧道用图标/'+imageName+'.json');// 设置id为105的item内容显示的图标为form表单上点击的交通灯的按钮的图标}

g3d.mi(function(e){// addInteractorListener 函数 监听场景中的事件    if(e.kind === 'clickData') {        if (e.data.getTag() === 'jam') { createDialog(e.data); }        else if (e.data.getTag() === 'light') {// 如果图元是背面的隧道的灯            var frontImage = e.data.s('front.image');            var imageName = frontImage.slice(frontImage.lastIndexOf('/')+1, frontImage.lastIndexOf('.'));            btnClick('light', imageName);        }        else if (e.data.getTag() === 'light1'){// 正面的隧道的灯            var frontImage = e.data.s('front.image');            var imageName = frontImage.slice(frontImage.lastIndexOf('/')+1, frontImage.lastIndexOf('.'));            btnClick('light1', imageName);        }    }});