這是公司大神寫的一個放官網上給使用者學習的例子，我一開始真的不知道這是在幹嘛，就隻是将三個形狀圖元組合在一起，然後可以同時旋轉、放大縮小這個三個圖形，點選“Animate”就能讓中間的那一個圖元單獨繞着某一個點旋轉，表單最上方的“Axis”真的完全不知道拿來幹嘛用的，覺得好累贅，而且是官網的demo，也沒有解釋。。。是以我今天得任務就是完全剖析這個例子！
首先讓我們來看下這個案例：
我們來看看如何操作這個3d互動模型，可以直接滑動“Rotation”的滑動條，你會看到3d和左下角的2d上的圖元都會旋轉，接着點選“Axis”中的任意一個值，然後點選“Animate”，你會看到中間這個圖元會旋轉，同時滑動“Range”的滑動條，這是控制你旋轉的幅度的，如果你調到“0”，那麼就不會旋轉，調到“30”就會旋轉30度，以此類推。接着調整“Reset”你會發現，不是完全重新整理這個界面，而是局部重新整理兩邊的圓柱，根據這兩個圓柱與中間節點之間的關聯而重置的。
左下角的是整個3d場景内的俯視圖，這樣我們可以非常直覺地看清圖元的移動方向和位置。
好了，基礎就是先布局，布3d場景，HT在提供方法方面算是非常細緻的了，平時我們生成網格可能就要花費一段時間，又是基礎代碼，新手開發人員都能很快上手呢~短短幾行代碼就能建立一個3d場景，簡直太快。。。
然後再界面的右上角放上form表單，放到右上角就直接設定style中的“top”“bottom”“left”“right”即可，2d圖同理：
ht.Default.callLater(func, scope, args, delay)擷取全局下一個編号，其中 func指的是回調函數，scope指的是函數域，args指的是函數參數清單，delay則是延遲時間（毫秒）。這個函數可以在頁面打開時回調g2d.fitContent函數，然後作用域僅在g2d中，這個函數參數清單是fitContent(anim, padding, notZoomIn)函數的參數，這三個參數分别代表“是否使用動畫”，“縮放後圖元區域與拓撲邊緣的距離”，以及“是否将最小縮放值限定為1”。
接着将3d中的圖元添加進去，這裡我不截取全部代碼，隻取一個比較特别的有趣的圖元，中間外層的透明圖元：
這邊比較有趣的有幾點：
1. 這邊用了node.getCorners()這個方法，這個是擷取四個點，對于2d來說就是左上、右上、右下、左下四個點；對于3d來說就是直接擷取底面的四個“左上、右上、右下、左下”點，這個我反應了好一會兒才反應過來。。。并以這四個點為基礎作為shape的points。
2. 這邊還用了setBoundaries(boundaries)函數,借用ht.Default.toBoundaries函數來将不符合setBoundaries函數參數的格式轉換成它需要的參數格式。雖然我認為這一行在這個例子中沒有什麼作用，但是還是讓我好好學習了一把碰撞測試。
我們在碰撞測試的時候經常要設定g3d.setNear函數，我實在沒搞懂這個函數是拿來幹嘛的，結果這個例子讓我注意到，如果“我”的視線的近端截面位置也就是setNear(1)，那麼我能看到的就是比表面跟進1的距離，這個函數預設設定為10，就算我們不設定這個值我們也能在3d中看到圖元的内部去，剛剛我們介紹的getCorners()函數，其實它還有兩個參數xpadding和ypadding，分别代表“水準方向padding”“垂直方向padding”，也就是說，在我們擷取四個角的同時，我們還能設定這四個角和邊之間的padding。隻要将這個值設定得比setNear設定的大，我們就不會看到3d圖元的内部中去了。