首先讓我們來看下這個案例：

我們來看看如何操作這個3d交互模型，可以直接滑動“Rotation”的滑動條，你會看到3d和左下角的2d上的圖元都會旋轉，接著點擊“Axis”中的任意一個值，然后點擊“Animate”，你會看到中間這個圖元會旋轉，同時滑動“Range”的滑動條，這是控制你旋轉的幅度的，如果你調到“0”，那么就不會旋轉，調到“30”就會旋轉30度，以此類推。接著調整“Reset”你會發現，不是完全刷新這個界面，而是局部刷新兩邊的圓柱，根據這兩個圓柱與中間節點之間的關聯而重置的。

左下角的是整個3d場景內的俯視圖，這樣我們可以非常直觀地看清圖元的移動方向和位置。

可能你會好奇這個是怎么俯視圖是怎么放上去的？如果3d中的圖元變化，這個俯視圖中的圖元也會跟著變化么？如何把右上角的form表單和左下角的視圖又是怎么放的？如何只移動3d二把這兩個固定在這邊？或者你可能還有別的問題，在這里我會盡量清楚地解答，實在找不到答案可以去我們的官網HT for Web查找你的問題。

好了，基礎就是先布局，布3d場景，HT在提供方法方面算是非常細致的了，平時我們生成網格可能就要花費一段時間，又是基礎代碼，新手開發人員都能很快上手呢~短短幾行代碼就能創建一個3d場景，簡直太快。。

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);
g3d.setGridVisible(true);//設置網格可視g3d.setGridSize(m);//設置網格大小g3d.setGridGap(w);//設置網格間距g3d.setEye([-200, 150, 200]);//設置camera位置g3d.getView().className = 'main';
document.body.appendChild(g3d.getView());

由于HT默認將所有組件都設置了style“position:absolute”，所以當我們初始化這個組件之后，一定要在style中寫上位置，并且將這個組件添加進你想要添加進的標簽中，這個例子中，form表單、2d組件和3d組件都互不依附，所以我們直接將這三個都添加進body中即可，還有一點值得注意的，所有HT組件的最根層都是一個p，是通過組件的getView()函數獲得的。所以我們如果要添加進HTML標簽中，肯定也要是HTML標簽才行。

然后再界面的右上角放上form表單，放到右上角就直接設置style中的“top”“bottom”“left”“right”即可，2d圖同理：

formPane = new ht.widget.FormPane();
formPane.setLabelAlign('right');
formPane.getView().className = 'formpane';
document.body.appendChild(formPane.getView());
formPane.addRow(['Rotation:', {
 id: 'rotation',
 slider: {
 min: -180,
 max: 180,
 value: 0,
 step: 1,
 onValueChanged: function(e){
 node.setRotation(this.getValue() * Math.PI / 180);
 }
 }
}], [60, 0.1]);

因為這個例子的form表單中的行數和內容比較多，所以我這邊就只取了一個form表單自定義行的例子。這邊的“id”只是為了能快速查找到這個元素，slider是HT form表單自定義的一個方法，滑動條功能，設置了該屬性后HT將根據屬性值自動構建ht.widger.Slider對象，具體參數可以參考HT for Web表單手冊。

至于左下角的2d俯視圖，這是通過跟3d共享同一個datamodel數據模型，只要我們繪制好了圖形，然后添加進datamodel中去，不管是什么組件，只要調用了這個datamodel的都可以擁有datamodel中的所有數據：

g2d = new ht.graph.GraphView(dm);
g2d.getView().className = 'g2d';
g2d.setEditable(true);
document.body.appendChild(g2d.getView());
ht.Default.callLater(g2d.fitContent, g2d, [true, 50, true]);

ht.Default.callLater(func, scope, args, delay)獲取全局下一個編號，其中 func指的是回調函數，scope指的是函數域，args指的是函數參數列表，delay則是延遲時間（毫秒）。這個函數可以在頁面打開時回調g2d.fitContent函數，然后作用域僅在g2d中，這個函數參數列表是fitContent(anim, padding, notZoomIn)函數的參數，這三個參數分別代表“是否使用動畫”，“縮放后圖元區域與拓撲邊緣的距離”，以及“是否將最小縮放值限定為1”。

接著將3d中的圖元添加進去，這里我不截取全部代碼，只取一個比較特別的有趣的圖元，中間外層的透明圖元：

shape = new ht.Shape();
shape.s({
 'all.reverse.cull': true,
 'all.color': 'rgba(0, 255, 0, 0.5)',
 'all.transparent': true
});
shape.setThickness(2);
dm.add(shape);
var resetShape = function() {
 var cs = node.getCorners(10, 10);
 cs.push(cs[0]);
 shape.setPoints(cs);
 g3d.setBoundaries(ht.Default.toBoundaries(cs));
};
resetShape();

這邊比較有趣的有幾點：

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圖元的內部中去了。

我們還注意到似乎是“廢代碼”的一行： cs.push(cs[0])。這個完全不是廢代碼啊，幫了很大忙呢！在HT中，用ht.Shape創建的圖元，只要你不手動設置繪制關閉，那么就會停留在你最終繪制的位置，所以我把最后的一個點又和第一個點連起來，那么就是一個封閉的圖形了，否則你會看到后面缺了一部分，像這樣：

我在其他文章中也提到過HT封裝了一些很方便的方法和事件，比如datamodel#md，監聽數據的屬性的變化，這邊我們用了md方法來判斷只有中間這個node能夠繞著一個點旋轉，具體參考HT for Web數據模型手冊：

dm.md(function(e){
 if(e.data === node){
 if(e.property === 'rotation'){
 formPane.v('rotation', 180 / Math.PI * e.newValue);
 }
 resetShape();
 }
});

這邊我想要說一下“繞著一個點旋轉”的功能，這邊沒有用我們自定義的anchor錨點，但是功能類似，通過獲取我form表單上選擇的“left、right、front、back”來設置旋轉中心點，HT中form表單通過getValue(id)簡寫成v(id)根據id獲取對應item元素值：

formPane.addRow([
 {
 button: {
 label: 'Animate',
 onClicked: function(){
 var dx = 0,
 dy = 0,
 range = formPane.v('range') * Math.PI / 180;
 if(formPane.v('left')){
 dx = -node.getWidth()/2;
 }
 if(formPane.v('right')){
 dx = node.getWidth()/2;
 }
 if(formPane.v('back')){
 dy = -node.getHeight()/2;
 }
 if(formPane.v('front')){
 dy = node.getHeight()/2;
 }
 animate(node, range, dx, dy);
 }
 }
 },
 {
 button: {
 label: 'Reset',
 onClicked: function(){
 node.setRotation(0);
 }
 }
 }
], [0.1, 0.1]);

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com