資料拓展：
選中狀態(tài)
Graph3dView
中被選中的圖元會顯示為較暗的狀態(tài)，變暗系數(shù)是由圖元style
的brightness
和select.brightness
屬性決定，select.brightness
屬性默認(rèn)值為0.7
，最終返回值大于1
變亮，小于1
變暗，等于1
或為空則不變化。
Graph3dView#getBrightness
函數(shù)控制最終圖元亮度，因此也可以通過重載覆蓋該函數(shù)自定義選中圖元亮度，以下為默認(rèn)邏輯：
getBrightness: function(data){ var brightness = data.s('brightness'), selectBrightness = this.isSelected(data) ? data.s('select.brightness') : null; if(brightness == null){ return selectBrightness; } if(selectBrightness == null){ return brightness; } return brightness * selectBrightness; },

Graph3dView#getWireframe
函數(shù)用于定義圖元立體線框效果，默認(rèn)實現(xiàn)代碼如下， 由實現(xiàn)代碼可知通過控制wf.*
（wf
為wireframe
的簡稱）相關(guān)參數(shù)即可實現(xiàn)顯示選中線框的效果。
getWireframe: function(data){ var visible = data.s('wf.visible'); if(visible === true || (visible === 'selected' && this.isSelected(data))){ return { color: data.s('wf.color'), width: data.s('wf.width'), short: data.s('wf.short'), mat: data.s('wf.mat') }; }},

wf.visible
：默認(rèn)為false
代表不顯示，可設(shè)置為selected
值代表選中時才顯示，或true
值代表一直顯示線框
wf.color
：線框顏色
wf.short
：默認(rèn)值為false
代表顯示封閉的立體線框，設(shè)置為true
則顯示不封閉的短線框
wf.width
：線框?qū)挾龋J(rèn)值為1
，有些系統(tǒng)下只能顯示1
的效果，不同系統(tǒng)能顯示的最大值也都有限制
wf.mat
：默認(rèn)值為空，可通過ht.Default.createMatrix
構(gòu)建轉(zhuǎn)換矩陣

過濾器

選擇過濾器
默認(rèn)情況所有圖元都是可選中，用戶可通過設(shè)置選擇過濾器取消部分圖元的可選中功能， 可否選中的最終控制在SelectionModel
模型的filterFunc
過濾器上，也可通過重載GraphView
的isSelectable
函數(shù)， 或調(diào)用GraphView.setSelectableFunc(func)
的封裝函數(shù)控制，示例代碼如下：
graph3dView.setSelectableFunc(function(data){ return data.a('selectable');});

可見過濾器
默認(rèn)情況圖元都是可見，用戶可通過設(shè)置可見過濾器隱藏部分圖元，示例代碼如下：
graph3dView.setVisibleFunc(function(data){ return data.s('all.transparent') === true;});

該示例代碼邏輯為：只顯示all.transparent
為true
的圖元。 Graph3dView#isVisible
函數(shù)最終決定圖元是否可見，因此也可通過直接重載覆蓋該函數(shù)自定義：
graph3dView.isVisible = function(data){ return data.s('all.transparent') === true;};

移動過濾器
默認(rèn)情況圖元都是可移動，用戶可通過設(shè)置移動過濾器固定部分圖元，示例代碼如下：
graph3dView.setMovableFunc(function(data){ return movableItem.selected;});

該示例代碼邏輯為：當(dāng)movableItem
的selected
為true
時圖元才允許移動。 Graph3dView#isMovable
函數(shù)最終決定圖元可否移動，因此也可通過直接重載覆蓋該函數(shù)自定義：
graph3dView.isMovable = function(data){ return movableItem.selected;};

旋轉(zhuǎn)過濾器
當(dāng)Graph3dView#setEditable(true)
設(shè)置為可編輯的情況下，默認(rèn)選中圖元允許旋轉(zhuǎn)，可通過如下代碼禁止部分圖元旋轉(zhuǎn)：
graph3dView.setRotationEditableFunc(function(data){ return data instanceof ht.Shape;});

以上代碼的邏輯為：只允許ht.Shape
類型的圖元可以旋轉(zhuǎn)。 Graph3dView#isRotationEditable
函數(shù)最終決定圖元可否旋轉(zhuǎn)，因此也可通過直接重載覆蓋該函數(shù)自定義：
graph3dView.isRotationEditable: function(data){ return data instanceof ht.Shape;},

改變大小過濾器
當(dāng)Graph3dView#setEditable(true)
設(shè)置為可編輯的情況下，默認(rèn)選中圖元允許改變大小，可通過如下代碼禁止部分圖元旋轉(zhuǎn)：
graph3dView.setSizeEditableFunc(function(data){ return data instanceof ht.Shape;});

以上代碼的邏輯為：只允許ht.Shape
類型的圖元可以改變大小。 Graph3dView#isSizeEditable
函數(shù)最終決定圖元可否改變大小，因此也可通過直接重載覆蓋該函數(shù)自定義：
graph3dView.isSizeEditable: function(data){ return data instanceof ht.Shape;},

除在視圖組件上設(shè)置過濾器外，GraphView
和Graph3dView
的內(nèi)置過濾機(jī)制也參考了以下style
屬性，用戶可直接改變以下style
達(dá)到對單個圖元的控制效果：
2d.visible
：默認(rèn)值為true
，控制圖元在GraphView
上是否可見
2d.selectable
：默認(rèn)值為true
，控制圖元在GraphView
上是否可選中
2d.movable
：默認(rèn)值為true
，控制圖元在GraphView
上是否可移動
2d.editable
：默認(rèn)值為true
，控制圖元在GraphView
上是否可編輯
2d.move.mode
：默認(rèn)值為空，控制圖元移動范圍，可設(shè)置為如下參數(shù)：xy
：可在xy
平面移動
x
：僅沿x
軸移動
y
：僅沿y
軸移動
任何其他非空值代表不可移動

3d.visible
：默認(rèn)值為true
，控制圖元在Graph3dView
上是否可見
3d.selectable
：默認(rèn)值為true
，控制圖元在Graph3dView
上是否可選中
3d.movable
：默認(rèn)值為true
，控制圖元在Graph3dView
上是否可移動
3d.editable
：默認(rèn)值為true
，控制圖元在Graph3dView
上是否可編輯
3d.move.mode
：默認(rèn)值為空，參見鍵盤操作，控制圖元移動范圍，可設(shè)置為如下參數(shù)：xyz
：可在三維空間移動
xy
：僅在xy
平面移動
xz
：僅在xz
平面移動
yz
：僅在yz
平面移動
x
：僅沿x
軸移動
y
：僅沿y
軸移動
z
：僅沿z
軸移動
任何其他非空值代表不可移動

所有的動作交互：

  toolbar = new ht.widget.Toolbar([                   
                    {//旋轉(zhuǎn)
                        label: 'Rotatable',
                        type: 'check',
                        selected: true,
                        action: function(){
                            g3d.setRotatable(this.selected);
                        }
                    },
                    {//縮放
                        label: 'Zoomable',
                        type: 'check',
                        selected: true,
                        action: function(){
                            g3d.setZoomable(this.selected);
                        }
                    },
                    {//平移
                        label: 'Pannable',
                        type: 'check',
                        selected: true,
                        action: function(){
                            g3d.setPannable(this.selected);
                        }
                    }, 
                    {
                        label: 'Walkable',
                        type: 'check',
                        selected: true,
                        action: function(){
                            g3d.setWalkable(this.selected);
                        }
                    },  
                    {
                        label: 'Resettable',
                        type: 'check',
                        selected: true,
                        action: function(){
                            g3d.setResettable(this.selected);
                        }
                    },
                    {
                        label: 'RectSelectable',
                        type: 'check',
                        selected: true,
                        action: function(){
                            g3d.setRectSelectable(this.selected);
                        }
                    },
                    'separator',                    
                    {
                        label: 'Node Movable',
                        type: 'check',
                        selected: true,
                        action: function(){                        
                            g3d.setMovableFunc(this.selected ? null : function(data){
                                return false;
                            });
                        }                
                    },
                    {
                        label: 'Node Rotatable',
                        type: 'check',
                        selected: true,
                        action: function(){                        
                            g3d.setRotationEditableFunc(this.selected ? null : function(data){
                                return false;
                            });
                        }                
                    },  
                    {
                        label: 'Node Scalable',
                        type: 'check',
                        selected: true,
                        action: function(){                        
                            g3d.setSizeEditableFunc(this.selected ? null : function(data){
                                return false;
                            });
                        }                
                    },
                    {
                        label: 'Editable',
                        type: 'check',
                        selected: true,
                        action: function(){                        
                            g3d.setEditable(this.selected);
                        }                
                    },
                    'separator',   
                    {
                        type: 'toggle',
                        selected: false,
                        label: 'First person mode',
                        action: function(){
                            g3d.setFirstPersonMode(this.selected);                              
                        }
                    }                             
                ]);                                                                                

監(jiān)聽動作事件并在頁面顯示出來


        rows = new ht.List();
                g3d.mi(function(e){   //mi 增加交互事件監(jiān)聽器是addInteractorListener的縮寫                 
                    var text = ' ' + e.kind;
                    if(e.part){
                        text += ' on ' + e.part + ' of ' + e.data.s('label');
                    }
                    text += '<br>';
                    rows.add(text);
                    if(rows.size() > 25){
                        rows.removeAt(0);
                    }
                    text = '';
                    rows.each(function(row){
                        text += row;
                    });
                    div.innerHTML = text;
                    
                });                

鼠標(biāo)經(jīng)過圖元節(jié)點(diǎn)時的明暗度的變化

 /*******************鼠標(biāo)經(jīng)過時明暗度的變化************************************/
                g3d.getBrightness = function(data){                   
                    if(data.s('isFocused')){
                        return 0.7;
                    }
                    return null;
                };
                lastFocusData = null;
                g3d.getView().addEventListener('mousemove', function(e){
                    var data = g3d.getDataAt(e);
                    if(data !== lastFocusData){
                        if(lastFocusData){
                            lastFocusData.s('isFocused', false);
                        }
                        if(data){
                            data.s('isFocused', true);
                        }
                        lastFocusData = data;
                    }
                }); 
                
  /*******************************************************/  

獲取style列表的方法----鼠標(biāo)經(jīng)過圖元節(jié)點(diǎn)時，把圖元節(jié)點(diǎn)所有的樣式以json字符串的形式顯示出來

  g3d.getToolTip = function(e){
                    var data = this.getDataAt(e);
                    if(data){
                        return '<pre>' + JSON.stringify(data.getStyleMap(), null, 4) + '</pre>';
                    }
                    return null;
                };    

雙擊圖元節(jié)點(diǎn)，圖元節(jié)點(diǎn)吸附的相關(guān)交互
g3d.onDataDoubleClicked = function(data, e, dataInfo) {
                    if(data.face) {
                        //   getHost()獲取和設(shè)置吸附的圖元對象                  
                        //getAttaches()返回目前吸附到該圖元的所有對象，返回ht.List鏈表對象，無吸附對象時返回空
                        data.getHost().getAttaches().each(function(attach) {
                            if(attach.pop) {
                                toggleData(attach);
                            }
                        });
                    }
                    Animation(data, dataInfo.name);
                    
                };