three.js Shape

2023-02-16 17:33 更新

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

代碼示例

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) 一個Vector2數(shù)組。

從點來創(chuàng)建一個Shape。第一個點定義了偏移量, 接下來的點被作為LineCurves加入到curves中。

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

屬性

共有屬性請參見其基類Path。

.uuid : String

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

.holes : Array

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

方法

共有方法請參見其基類Path。

.extractPoints ( divisions : Integer ) : Array

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

{
	shape
	holes
}

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

.getPointsHoles ( divisions : Integer ) : Array

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

源代碼

src/extras/core/Shape.js


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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號