three.js Shape

2023-02-16 17:33 更新

使用路徑以及可選的孔洞來定義一個(gè)二維形狀平面。 它可以和ExtrudeGeometry、ShapeGeometry一起使用,獲取點(diǎn),或者獲取三角面。

代碼示例

const heartShape = new THREE.Shape();

heartShape.moveTo( 25, 25 );
heartShape.bezierCurveTo( 25, 25, 20, 0, 0, 0 );
heartShape.bezierCurveTo( - 30, 0, - 30, 35, - 30, 35 );
heartShape.bezierCurveTo( - 30, 55, - 10, 77, 25, 95 );
heartShape.bezierCurveTo( 60, 77, 80, 55, 80, 35 );
heartShape.bezierCurveTo( 80, 35, 80, 0, 50, 0 );
heartShape.bezierCurveTo( 35, 0, 25, 25, 25, 25 );

const extrudeSettings = { depth: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };

const geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );

const mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );

例子

geometry / shapes

geometry / extrude / shapes

geometry / extrude / shapes2

構(gòu)造函數(shù)

Shape( points : Array )

points -- (optional) 一個(gè)Vector2數(shù)組。

從點(diǎn)來創(chuàng)建一個(gè)Shape。第一個(gè)點(diǎn)定義了偏移量, 接下來的點(diǎn)被作為L(zhǎng)ineCurves加入到curves中。

如果沒有點(diǎn)被指定,一個(gè)空的形狀將會(huì)被創(chuàng)建,且.currentPoint將會(huì)被設(shè)為原點(diǎn)。

屬性

共有屬性請(qǐng)參見其基類Path。

.uuid : String

該類所創(chuàng)建的實(shí)例的UUID。它是自動(dòng)被指定的,因此它不應(yīng)當(dāng)被編輯、更改。

.holes : Array

一個(gè)paths數(shù)組,定義了形狀上的孔洞。

方法

共有方法請(qǐng)參見其基類Path。

.extractPoints ( divisions : Integer ) : Array

divisions -- 結(jié)果的精細(xì)程度(細(xì)分?jǐn)?shù))。在形狀以及.holes(孔洞)數(shù)組上調(diào)用getPoints,并返回一個(gè)來自于:

{
	shape
	holes
}

的對(duì)象,其中的形狀和孔洞是Vector2數(shù)組。

.getPointsHoles ( divisions : Integer ) : Array

divisions -- 結(jié)果的精細(xì)程度(細(xì)分?jǐn)?shù))。獲取一個(gè)表示形狀上的孔洞的Vector2s數(shù)組。

源代碼

src/extras/core/Shape.js


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)