前言

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

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

Geometry的屬性: 基礎(chǔ)屬性與動畫屬性

基礎(chǔ)屬性

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

動畫屬性

Three中可以通過兩種方式實現(xiàn)動畫:

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

Geometry的其他屬性

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

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

一個頂點的位置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來設(shè)置頂點的顏色，=顏色值可以通過Color對象來定義。一個頂點的顏色數(shù)據(jù)用一個Color對象來表示，然后作為幾何體.colors屬性值數(shù)組的元素。當然對于點模型Points和線模型Line幾何體的頂點顏色屬性.colors中頂點數(shù)據(jù)才會起作用，如果是網(wǎng)格模型Mesh，顏色需要通過三角面對象Face3來定義。

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

Geometry的主要類別

立方緩沖幾何體（BoxGeometry）

BoxGeometry是四邊形的原始幾何類，它通常使用構(gòu)造函數(shù)所提供的width、height、depth參數(shù)來創(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是歐式幾何的一個簡單形狀，它由圍繞著一個中心點的三角分段的數(shù)量所構(gòu)造，由給定的半徑來延展。 同時它也可以用于創(chuàng)建規(guī)則多邊形，其分段數(shù)量取決于該規(guī)則多邊形的邊數(shù)。

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 );

運行功能截屏展示

總結(jié)

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

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

最新評論