基于HTML5 Canvas 点击添加 2D 3D 机柜模型

<button onclick="addData()">Add</button>
<button onclick="removeData()">Remove</button>
<button onclick="clearDataModel()">Clear</button>
<span id="property" class="output"></span>
<span id="model" class="output"></span>
<span id="selection" class="output"></span>

<div id="myDiv" style="border: 1px solid red; width: 800px; height: 600px;position: absolute; "></div>

dataModel = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dataModel);
g3d.setGridVisible(true);//设置网格可见
g3d.setEye(185, 50, 470);//设置3d的眼睛位置
g3d.setCenter(200, 47, 10);//设置3d的中心位置， 这两个属性都是为了让用户看3d上的场景更舒服，更直接
g2d = new ht.graph.GraphView(dataModel);
g2d.setEditable(true);//设置2d图元可编辑
g2d.fitContent(true);//将所有的图元显示到页面上
splitView = new ht.widget.SplitView(g2d, g3d, 'v', 0.3);//分割组件，装了2d和3d两个场景
splitView.addToDOM();//将分割组件添加进body中，并设置绝对定位的位置
myDiv = document.getElementById('myDiv');
myDiv.appendChild(splitView.getView());//将分割组件添加进myDiv中

function addData() {
    var data = new ht.Node();
    data.setPosition(index*60, 50);
    data.setName('node'+index);
    data.setSize(40, 40);
    data.setImage('cabinet');
    data.s({
        'image.stretch': 'centerUniform',
    'shape3d': 'cabinet'
    });
    index++;
    dataModel.add(data);
    return data;
}
function removeData() {
    if(!dataModel.sm().ld()) return;
    dataModel.remove(dataModel.sm().ld());
}
function clearDataModel(){
    dataModel.clear();
    index = 0;
}

ht.Default.loadObj('obj/机柜组件1.obj', 'obj/机柜组件1.mtl', {
     cube: true,//是否将模型缩放到单位1的尺寸范围内，默认为false
     center: true,//模型是否居中
     prefix: 'obj/',//路径前缀，如果前面参数写了路径前缀，这个不写也可以
     shape3d: 'cabinet',//指定 shape3d 名称
     finishFunc: function(modelMap, array, rawS3){//调用ht.Default.parseObj解析后的返回值，若加载或解析失败则返回值为空
         window.rawS3 = rawS3;//让当前模型的尺寸为原始尺寸
         if(modelMap){
             cabinet1 = addData();//添加两个节点到 dataModel 中
             cabinet2 = addData();
         }
    } 
});

var model = document.getElementById('model');
dataModel.addDataModelChangeListener(function(e) {
    if(e.kind === 'add')//如果事件类型为 add 增加节点
        model.innerHTML = e.data + ' added';//就将model 的内容替换为 添加的节点 added
    if(e.kind === 'remove')
        model.innerHTML = e.data + ' removed';
    if(e.kind === 'clear')
        model.innerHTML = 'dataModel cleared'
});

var model = document.getElementById('model');
dataModel.addDataPropertyChangeListener(function(e) {
    property.innerHTML = e.data + '\'s ' + e.property + ' has changed, the old value is ' + e.oldValue + ' and the new value is ' + e.newValue; 
});

var selection = document.getElementById('selection');
dataModel.sm().addSelectionChangeListener(function(e){
    if(dataModel.sm().size() === 0) selection.innerHTML = 'Nothing selected';//如果选中模型的“长度”为0，即没有选中内容
    else if(dataModel.sm().size() === 1) selection.innerHTML = e.datas + ' selected';
    else selection.innerHTML = dataModel.sm().size() + ' datas selected';
});