前言

Three js的官方文檔教程中給予了很多的Geomerty來構造不同類別的三維多邊形，例如立方體BoxGeometry、圓柱體CylinderGeometry、球體SphereGeometry等Three.js幾何體類都是基于基類BufferGeometry二次封裝。Geometry對原生WebGL中的頂點位置position、頂點法向量normal、頂點顏色color、頂點紋理坐標uv、頂點索引index等頂點數據進行了封裝，關于Geometry頂點更多介紹可以在學習的過程中通過官方文檔或者b站的視頻來練習。

但是如果第一次接觸到頂點的概念，沒有原生WebGL基礎，建議學習下原生WebGL教程，這樣的話，可以更好的理解幾何體頂點的概念。這次分析構成模型對象的重要元素之一：Geometry（幾何體）。本文分三部分介紹Geometry的主要性質。

Geometry的屬性: 基礎屬性與動畫屬性

基礎屬性

• 頂點(vertices): 核心屬性，表示幾何體的頂點位置，在構造面及計算法線等時使用
• 顏色(colors): 用于著色時的顏色計算
• 面(faces): 由不同頂點組成的面，包含頂點索引、面法線、面頂點法線等數據，一般為三角面(包含三個點的索引)
• Geometry的方法: 基礎變換、Mesh與頂點合并、點面法線、包圍盒/球計算
• BufferGeometry 與 DirectGeometry(Todo)

動畫屬性

Three中可以通過兩種方式實現動畫:

• 變形動畫(morph animation): 每一幀的狀態(tài)由指定的頂點數組決定，在動畫中應用指定頂點位置數組插值后的值（常用）
• 骨骼蒙皮動畫(bones skin animation): 每一幀的狀態(tài)中Mesh的頂點位置由指定的不同骨骼及它們的權重決定

Geometry的其他屬性

vertices頂點位置屬性(Geometry自定義一個幾何體)

閱讀Three Js文檔下的立方體BoxGeometry、球體SphereGeometry、圓柱體CylinderGeometry等three.js幾何體類的源碼，發(fā)現這些幾何體的源碼都是生成各類幾何體的頂點的相關算法。

一個頂點的位置xyz坐標，可以使用Three.js的一個三維向量Vector3來表示，Three.js幾何體對。Geometry的屬性.vertices表示頂點位置位置坐標的集合。

var geo = new THREE.Geometry();
//位置坐標
var point = new THREE.Vector3(18, 20, 4);

colors頂點顏色屬性

通過Three.js幾何體對象Geometry的屬性color來設置頂點的顏色，=顏色值可以通過Color對象來定義。一個頂點的顏色數據用一個Color對象來表示，然后作為幾何體.colors屬性值數組的元素。當然對于點模型Points和線模型Line幾何體的頂點顏色屬性.colors中頂點數據才會起作用，如果是網格模型Mesh，顏色需要通過三角面對象Face3來定義。

const color = new THREE.Color(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0xffff00})

Geometry的主要類別

立方緩沖幾何體（BoxGeometry）

BoxGeometry是四邊形的原始幾何類，它通常使用構造函數所提供的width、height、depth參數來創(chuàng)建立方體或者不規(guī)則四邊形。

代碼示例：

代碼示例
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

圓形緩沖幾何體（CircleGeometry）

CircleGeometry是歐式幾何的一個簡單形狀，它由圍繞著一個中心點的三角分段的數量所構造，由給定的半徑來延展。 同時它也可以用于創(chuàng)建規(guī)則多邊形，其分段數量取決于該規(guī)則多邊形的邊數。

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

圓錐緩沖幾何體（ConeGeometry）

一個用于生成圓錐幾何體的類。

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

運行功能截屏展示

總結

以上就是Three js內置的一些三維多邊體的主要構造方法，具體的可以參考官方網站的document手冊（https://threejs.org/docs/?q=geo#api/zh/geometries/CircleGeometry）。會有詳解的解釋和方法來上手不同的物體，同時應該巧妙地運用three js的其他對象和屬性來構造豐富多彩的顏色和炫酷的特效。例如我靈活的使用了for循環(huán)和隨機的random函數的方法來構造出來的三角形多種多樣，例如下圖所示的這樣，感覺很有意思。當然本人我也是剛開始學習前端的三維gis知識，在很多方面還有很多不足之處，還望各位大佬不吝賜教?。?/p>

到此這篇關于Three.Js實現顏色自定義變換的文章就介紹到這了,更多相關Three.Js顏色自定義變換內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論