threejs（一）初步認識與使用

應專案需求，學習threejs將近半個月，現在總結一下我從網上蒐集的比較有份量的資料和在專案中踩到的大小坑，以下內容如果有誤，感謝各位大神不吝賜教。

一、threejs學習的資料

threejs入門指南

threejs官網

threejs郭隆邦技術部落格

暮志未晚的技術部落格

threejs原始碼解釋

threejs開發指南及其章節中的案例

二、專案中大小坑總結

1.實現效果：

2.疑難點

//
匯入obj外部模型
function
setobj() 
};//載入出錯的時候被呼叫
var onerror = function
() ;
newthree.mtlloader()
.setpath( 'source/')
.load( mtlurl[i]+'.mtl', function
( materials ) , onprogress, onerror );
} );}}

拖拽的呼叫函式是three.dragcontrols,但是由於我們匯入的是外部模型，就是說它的type是group，而dragcontrols認準的型別是拖拽型別是mesh，如果直接寫dragcontrols的模板，你會發現根本無法實現拖拽。

//
對模型實現拖拽
function
drag(objects) );
//開始拖拽
dragcontrols.addeventlistener( 'dragstart', function
()  );
//拖拽結束
dragcontrols.addeventlistener( 'dragend', function
()  );
}

這個時候你要檢視一下threejs實現拖拽的原理，你要使用three.raycaster,從相機上射出一條射線，捕獲滑鼠的二維座標，將滑鼠的二維座標轉換成世界座標，通過滑鼠點選的位置(二維座標)和當前相機的矩陣計算出射線位置，接著獲取與射線相交的物件陣列，其中的元素按照距離排序，越近的越靠前，允許檢驗後代，最後才去呼叫dragcontrols。

注意：如果你想在移動端的網頁也實現拖拽，在這裡要注意判斷當前網頁是在移動端還是pc端，即此時獲取的是滑鼠的點選位置還是觸屏的點選位置：

//
判斷是在移動端還是在pc端
var os = function
();    }();
............
var mouse = new
three.vector2();
if (os.isandroid ||os.isphone)  
else
if(os.istablet)  
else
if(os.ispc)

需求要求使用者來控制座標顯示是rotate還是translate，此時我們使用three中的gui來顯示。即：

init() 
var gui = new
dat.gui();
gui.add(gui_tag,'translate');
......}//
時刻渲染
function
animate()  
else
}

相機的旋轉使用orbitcontrol來控制，但是值得注意的是當你加上相機的旋轉的時候，拖拽模型的時候會發現相機也會一起移動，這個時候拖拽模型就會顯得不那麼順心了，此時我們要加上：

transform.addeventlistener( 'dragging-changed', function
( event )  );

完整的**是：

function
init()  );
orbit.addeventlistener( 'change', render );    
}...
function
animate()

3.遺留問題

對於座標的型別顯示方面在pc端網頁顯示可以正常轉換，但轉到移動端之後就會失靈。

4.注意容易犯的低階錯誤

解決方法：可以使用webstorm來開啟，此時是http：localhost請求。

此時在後面加上｛passive：false｝即可。

例如：

scope.domelement.addeventlistener( 'touchstart', ontouchstart,  );

threejs（一）初步認識與使用

類模板的初步認識與使用

Linux初步認識（一）

初步認識事務一

threejs（一） 初步認識與使用

類模板的初步認識與使用

Linux初步認識（一）

初步認識事務 一

相關推薦

threejs（一）初步認識與使用

初步認識事務一