<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    TWaver - 專注UI技術

    http://twaver.servasoft.com/
    posts - 171, comments - 191, trackbacks - 0, articles - 2
      BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

    兩步創建3D數據中心

    Posted on 2016-11-21 11:25 TWaver 閱讀(248) 評論(0)  編輯  收藏

    TWaver 3D發布也有很長一段時間了,相關的應用和項目也做了不少,特別是3D機房,可是有些用戶反饋說3D機房開發起來有些費勁,耗時,3D并不像2D,雖然有時更加的直觀,但是需要考慮的問題還挺多的,模型、材質、效率,交互,以及視角等等。

    比如:一個機柜有可能有許許多多個3D對象組成,因此要對其進行操作,例如:打開機柜門,添加或刪除設備,查看某個設備時讓其他的設備都虛化掉等類似功能,對于很多人來說實現起來十分復雜。今天我們給大家介紹一些新的功能,我們對相關功能進行了進一步的封裝,并且提供了一些內置模型,而這塊的功能我們還在進一步的改進中,在這里先給大家展示展示,如果各位有什么好的想法和建議,歡迎提出來。


    先來張整體的圖,全部都是通過一個json導入的:



    json的格式如下:

    var json = {
      
    "categories" : [
        {
          
    "id" : "building",
        },
        {
         
    "id" : "room",
        },
        {
         
    "id" : "rack",
        }
       ],
      
    "dataTypes":[
           {
            
    "id" : "floor_type_01",
            
    "model":"area",
            
    "modelParameters": {"height":5,"data":[-1559,-555,1559,-555,1559,555,-1559,555,-1559,-555],type:"area"},
            
    "childrenSize":{"x":42,"z" : 4,"xPadding":[100,0],"zPadding": [100,0]}
           },
           {
            
    "id" : "floor_type_02",
            
    "model":"area",
            
    "modelParameters": {"height":5,"data":[-1550,-555,1559,-555,1559,555,-1550,555,-1550,-555],type:"area"},
                
    "childrenSize":{"x":42,"z" : 4,"xPadding":[100,0],"zPadding": [100,0]}
            },
      
    "datas":[
          {
            
    "id" : "b01",
            
    "dataTypeId" : "bt01",
            
    "position" : [-3000,0,0],
          },
          {
            
    "id":"floor",
            
    "parentId":"b01",
            
    "dataTypeId" : "floor_type_01",
            
    "position" : [1600,0,900],
          }
       ]
    }

    當然也可以在代碼中直接往DataManager中添加,在添加之前先來簡單的說明一下數據結構。


    數據

    目前我們這里有3種數據類型,分別是it.Category(類別,如:機柜,機房,設備…)、it.DataType(類型,如:A型號機柜,B型號機柜、A設備…,其引用的Category)、以及it.Data(資產數據,如:機柜001,機柜002是DataType的實例):


    var dataManager = new it.DataManager();
    var category 
    = new it.Category({
                id : 
    "rack",
                description : 
    "機柜類別"
    });
    dataManager.addCategory(category);
     
    var dataType 
    = new it.DataType("rack_type_01");
    dataType.setStopAlarmPropagationable(
    true);
    dataType.setModel(
    'rack');
    dataType.setCategoryId(category.getId()); 
    // 給該dataType設置類別
    dataType.setModelParameters({"width":56,"height":47,"depth":110,type:"rack"});
    dataType.setSize(
    new it.Size({x : 1,z : 1}));
    dataType.setChildrenSize(
    new it.Size({y:47,yPadding : [5.545,5.545],zPadding:[0,-1.5],xPadding : [5,5]}));
    dataManager.addDataType(dataType);
     
    var data 
    = new it.Data(id);
    data.setLocation({x : z,y:
    "neg_neg",z : x});
    data.setParentId(
    null);
    data.setDataTypeId(dataType.getId());
    data.u({
    "userId""用戶ID","制造商":'A廠'});
    dataManager.addData(data);

    添加好后,DataManager會管理這些數據,還可以使用快速查詢的功能進行搜索,更重要的是它可以幫助創建3D對象哦,不管你的機柜多么復雜,它都可以幫你搞定。想想自己來處理3D模型和業務數據的綁定時,如果3D模型比較復雜的話,那該怎么綁定,以及查找時該怎么處理等也要費些功夫。


    顯示


    將添加的data顯示出來,new一個it.SceneManager即可:

    var sceneManager = new it.SceneManager(dataManager);
    sceneManager.loadScene();
    document.body.appendChild(sceneManager.getSceneView());


    默認功能

    其實通過這兩步就可以搞定一個簡單的3D機房了,并且默認實現很多功能(當然這些默認的功能你也可以完全去掉,“默認”可是60年代發明的最最重要的一項技術,應該拿大獎的,呵呵,不知到稱作“技術”是不是合適,可是現在沒有它很多東西都沒法運行),如下是雙擊某個機柜和某個設備后虛化其他所有的3D對象。






    擴展

    還有一些擴展功能,以下簡單的列出幾個:


    ToolTip:
    添加幾行代碼,告訴程序你要讓哪些data有tooltip,以及該顯示出哪些信息,添加規則代碼如下:


    var tooltipRule = new it.TooltipRule({
                 categoryId : 
    "rack",
                 propertiesDesc : 
    "機柜編號:id@@機柜名稱:description",
                 extInfo : {
    "test" : "test"}
    });
    var tooltipRule2 
    = new it.TooltipRule({
                 dataTypeId : 
    "room_type_01",
                 propertiesDesc : 
    "樓層編號:id@@樓層名稱:description",
                 extInfo : {
    "test" : "test2"}
     });
     sceneManager.viewManager3d.tooltipManager.addTooltipRule(tooltipRule);
     sceneManager.viewManager3d.tooltipManager.addTooltipRule(tooltipRule2);



    屬性框:

    需要顯示哪些內容也可以根據自己的需要來配置,代碼和上面的思想差不多。





    資產搜索:

    資產搜索和空間搜索都用到了上文提到的快速查詢,圖上的輸入框什么的都可以自己去實現。



    空間搜索:






    最后再來展示一下Billboard:



    有些功能我們還會繼續完善,今后再給大家展示,同時也歡迎大家提提意見!我們的郵箱:tw-service@servasoft.com

    只有注冊用戶登錄后才能發表評論。


    網站導航:
    博客園   IT新聞   Chat2DB   C++博客   博問  
     
    主站蜘蛛池模板: 久草免费福利视频| 毛片免费观看的视频| 亚洲韩国在线一卡二卡| 毛片免费在线视频| 一边摸一边桶一边脱免费视频 | 亚洲无线码在线一区观看| 99视频有精品视频免费观看| 亚洲精品动漫免费二区| 亚洲精品成人片在线播放| 日韩免费精品视频| 成人免费ā片在线观看| 亚洲H在线播放在线观看H| 久久久久亚洲av成人无码电影 | 亚洲精品无码永久中文字幕| av无码免费一区二区三区| 新最免费影视大全在线播放| 亚洲精品欧洲精品| ZZIJZZIJ亚洲日本少妇JIZJIZ| 麻豆高清免费国产一区| jzzjzz免费观看大片免费| 亚洲AV一二三区成人影片| 亚洲国产另类久久久精品| 国产又粗又长又硬免费视频| 91精品免费观看| 国产成人无码精品久久久免费| 亚洲已满18点击进入在线观看| 亚洲爆乳精品无码一区二区三区| 日本免费一区二区三区最新vr| 无码国产精品一区二区免费vr | a毛片视频免费观看影院| 亚洲欧美国产国产一区二区三区| 久久综合日韩亚洲精品色| 亚洲黄黄黄网站在线观看| 成人免费视频小说| 中文字幕成人免费视频| 中国一级全黄的免费观看| jzzijzzij在线观看亚洲熟妇| 亚洲激情校园春色| 亚洲国产成人精品不卡青青草原| 亚洲色偷偷狠狠综合网| 国产免费久久精品久久久|