Threejs中Geometry的用法示例

2021-10-01 04:16:29 字數 1695 閱讀 9831

geometry是其他很多***geometry(如boxgeometry、spheregeometry)的基類,與之相對應的還有buffergeometry,buffergeometry是其他帶buffergeomerty的基類, buffergeomerty效率比geometry高,但是geometry使用相對簡單點,本文就說下geometry的基本用法。

geometry中有頂點位置和面以及面uv等屬性,可以靈活控制物體的幾何形狀,但是使用也更複雜(相對於它的子類),下面使用geometry畫乙個最基本的形狀三角形。

1、繪製乙個自定義頂點座標的三角形,顏色為純紅色,繪製自定義形狀必須要有頂點資料vertices和麵資料faces。

執行後的效果如下圖: 

2、接下來將三角形的每個頂點顏色設定為不同的值

這些顏色值屬性存在three.face3(**中的face.vertexcolors)中,型別為包含3個顏色值的陣列。要使用頂點顏色還得將material的vertexcolors設定為three.vertexcolors,而且最終的顏色是頂點顏色和材質顏色color相乘的值,所以為了看到頂點顏色將材質顏色改為白色0xffffff(或者不設定也可以)

3、在實際使用中更多的情況是在物體表面貼上紋理貼圖,接下來為這個三角形貼上紋理

要正確使用貼圖必須要新增面的uv值,每個面有三個頂點,因此每個面也有三個uv值(參考**中的uvs),下列的**將的右下角貼到三角形上 。

function drawmesh()

); var mesh = new three.mesh( geometry, material );

scene.add( mesh );

}

如下圖所示,只能看到的右下角(當然也可以通過修改面uv值顯示出的不同部分) 

如果設定的頂點顏色或者材質顏色,最終的顏色值也是這幾種顏色混合的結果,例如將上面的頂點顏色加上就得到了下面的結果

4、最後繪製兩個三角形面組成乙個完整的四邊形,並且將完整貼上。

ThreeJS中CameraHelper的使用

參考 想達到這種效果,都必須使用2個相機。就如上圖2所示,螢幕相機的投影是整個螢幕 左右兩個小視窗共同組成 帶相機助手的投影是左面的畫面。偽 螢幕相機 let camera newthree.perspectivecamera 45 1,0.01 300 camera.position.set 1 ...

threejs中矩陣旋轉原理

建立乙個立方體cube放到場景中 繞向量 1,1,0 旋轉30度 var axis new three.vector3 1,1,0 建立乙個三維向量 var rotworldmatrix new three.matrix4 建立乙個4 4矩陣 rotworldmatrix.makerotationa...

threejs 入門中的OrbitControls

threejs 可以通過 npm install three 來安裝 文件介紹 軌道控制使攝像機可以圍繞目標旋轉。orbitcontrols object camera,domelement htmldomelement object 必需 要控制的攝像機。相機不得是其他物件的子物件,除非該物件是場...