Three.js學習計劃(二)

學習three.js很重要的一個環節就是學習怎麼在屏幕上建立各種各樣的形狀,今天就對three.js提供的各種基本形狀進行一次小小的總結。
(PS:基於three.js v73)請實時關注官方文檔
1. 立方體:BoxGeometry
構造函數: BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
參數解釋:參數按順序依次是,x軸邊長,y軸邊長,z軸邊長,x軸切割數,y軸切割數,z軸切割數
上述參數可以理解爲長、寬、高,以及每條邊被分成幾條線段。

BoxGeometry實例
2. 圓形:CircleGeometry
構造函數:CircleGeometry(radius, segments, thetaStart, thetaLength)
參數解釋:圓半徑,圓角分割數,起始角度,終末角度
基於以上參數,可以得到完整的圓形平面或者規定大小的扇形平面
CircleGeometry 實例
3. 柱狀體:CylinderGeometry
構造函數:CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)
參數解釋:參數依次是:頂圓半徑,底圓半徑,圓柱高,圓角切割數,橫斷數,是否具有底面和頂面,起始角度,終末角度
通過以上參數控制,可以得到想要的柱狀體或者部分柱狀體
CylinderGeometry 實例
4. 正四面體(TetrahedronGeometry)、正八面體(OctahedronGeometry)、正十二面體(DodecahedronGeometry)、正二十面體(IcosahedronGeometry)
構造函數:

TetrahedronGeometry(radius, detail)
OctahedronGeometry(radius, detail)
DodecahedronGeometry(radius, detail)
IcosahedronGeometry(radius, detail)

參數解釋:以上幾個正多面體體的構造函數都是一樣的,參數分別是半徑和額外頂點數
正多面體其實就是球形!!
IcosahedronGeometry 實例(正二十面體)
5. 平面: PlaneGeometry
構造函數:PlaneGeometry(width, height, widthSegments, heightSegments)
參數解釋:平面默認是在x,y軸平面中的,參數分別爲x軸邊長,y軸邊長,橫切數,縱切數
如果需要在z軸相關平面生成平面圖,只需要旋轉原平面即可。

PlaneGeometry 實例
6. 球體: SphereGeometry
構造函數:SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
參數解釋:球體半徑,經度切片數,緯度切片數,開始經度,經度跨過數,開始緯度,維度跨過數。通過以上參數的設置可以得到不同的球體和半球體等幾何體。
球體半徑決定球體的大小,經度切片數和維度切片數決定球體表面的光滑程度,其他參數決定是否完整球體。

SphereGeometry 實例
7. 環狀體: RingGeometry
構造函數:RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength)
參數解釋:內環半徑和外環半徑,決定環的大小和環寬度,圓角分割數,決定了環形的圓滑程度,環切數,決定了環平面被分成幾道,起始角度和終末角度決定了是否整環
RingGeometry 實例
8. 管狀體: TorusGeometry
構造函數:TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
參數解釋:環半徑,決定環平面大小;管道半徑,決定管道粗細;圓角分割數,決定環光滑程度,管道分割數,決定管道光滑程度,圓心角度,局定是否完整環狀管道
TorusGeometry 實例
9. 環形節:TorusKnotGeometry
構造函數:TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale)
參數解釋:環半徑,管道半徑,圓角切割數,管道分割數上邊都有解釋,p ,q參數是控制環狀管道的參數,一般使用默認值就好,這兩個是互素數的時候個環之間是不會相交的,具體信息請自行維基百科, 最後一個參數是z軸方向縮放比例
TorusKontGeometry 實例
10. 文字形狀 :
構造函數:TextGeometry(text, parameters)
參數解釋: 參數很簡單,文字內容和文字樣式控制參數組
TextGeometry 實例

注:以上圖片來字官方文檔截圖

發佈了30 篇原創文章 · 獲贊 26 · 訪問量 17萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章