前言

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

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

Geometry的屬性: 基礎(chǔ)屬性與動(dòng)畫(huà)屬性

基礎(chǔ)屬性

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

動(dòng)畫(huà)屬性

Three中可以通過(guò)兩種方式實(shí)現(xiàn)動(dòng)畫(huà):

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

Geometry的其他屬性

vertices頂點(diǎn)位置屬性(Geometry自定義一個(gè)幾何體)

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

一個(gè)頂點(diǎn)的位置xyz坐標(biāo)，可以使用Three.js的一個(gè)三維向量Vector3來(lái)表示，Three.js幾何體對(duì)。Geometry的屬性.vertices表示頂點(diǎn)位置位置坐標(biāo)的集合。

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

colors頂點(diǎn)顏色屬性

通過(guò)Three.js幾何體對(duì)象Geometry的屬性color來(lái)設(shè)置頂點(diǎn)的顏色，=顏色值可以通過(guò)Color對(duì)象來(lái)定義。一個(gè)頂點(diǎn)的顏色數(shù)據(jù)用一個(gè)Color對(duì)象來(lái)表示，然后作為幾何體.colors屬性值數(shù)組的元素。當(dāng)然對(duì)于點(diǎn)模型Points和線模型Line幾何體的頂點(diǎn)顏色屬性.colors中頂點(diǎn)數(shù)據(jù)才會(huì)起作用，如果是網(wǎng)格模型Mesh，顏色需要通過(guò)三角面對(duì)象Face3來(lái)定義。

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ù)來(lái)創(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是歐式幾何的一個(gè)簡(jiǎn)單形狀，它由圍繞著一個(gè)中心點(diǎn)的三角分段的數(shù)量所構(gòu)造，由給定的半徑來(lái)延展。 同時(shí)它也可以用于創(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）

一個(gè)用于生成圓錐幾何體的類。

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

運(yùn)行功能截屏展示

總結(jié)

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

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

最新評(píng)論