three.js 幾何體（三）

Vadim發表於2020-07-12
JS

上一篇介紹了幾何體的構造體引數，這篇郭先生就接著上一篇說。

1. ExtrudeGeometry擠壓幾何體

擠壓幾何體允許我們從一條形狀路徑中，擠壓出一個Geometry。ExtrudeGeometry有兩個引數，第一個引數是一個圖形，第二個引數是它的配置

var shape = new THREE.Shape();
shape.moveTo(0, 1.5);
shape.bezierCurveTo(2, 3.5, 4, 1.5, 2, -0.5);
shape.lineTo(0, -2.5);
shape.lineTo(-2, -0.5);
shape.bezierCurveTo(-4, 1.5, -2, 3.5, 0, 1.5);

var extrudeSettings = {
    steps: 2, //用於沿著擠出樣條的深度細分的點的數量，預設值為1
    depth: 0.3, //擠出的形狀的深度，預設值為100
    bevelEnabled: true, //對擠出的形狀應用是否斜角，預設值為true
    bevelThickness: 0.3, //設定原始形狀上斜角的厚度。預設值為6
    bevelSize: 0.5, //斜角與原始形狀輪廓之間的延伸距離
    bevelSegments: 2, //斜角的分段層數，預設值為3
        curveSegments: 12, //曲線上點的數量，預設值是12
};
var grometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

2. LatheGeometry車削幾何體

車削幾何體建立具有軸對稱性的網格，它將一條線繞著Y軸來進行旋轉。

var points = [];
for (let i = 0; i < 41; i++) {
    points.push(
        new THREE.Vector2(
            Math.abs(Math.sin((Math.PI * i) / 10)) * 1.8,
            i * 0.1 - 2
        )
    );
}
var geometry = new THREE.LatheGeometry(points, 30);

車削幾何體的第一個引數是一個Vector2物件陣列。每個點的X座標必須大於0，第二個引數是要生成的車削幾何體圓周分段的數量，預設值是12

3. ParametricGeometry引數化幾何體

引數化幾何體生成由參數列示其表面的幾何體。引數化幾何體的第一個引數是一個函式，該函式由三個引數u,v,t轉換成，u、v值作為引數定義每個頂點的位置，t該點的位置物件，可通過該物件設定u，v組成額度定點。slices屬性定義u值應該分成多少份,stacks屬性定義v值應該分成多少份

var geometry = new THREE.ParametricGeometry(
    (u, v, target) => {
        let x = Math.sin(Math.PI * 2 * u) * 1.7 * Math.abs(Math.sin(Math.PI * v));
        let y = v * 4 - 2;
        let z = Math.cos(Math.PI * 2 * u) * 1.7 * Math.abs(Math.cos(Math.PI * v));
        target.set(x, y, z);
    },
    30,
    12
);

引數化幾何體可以做出十分豐富的數學幾何體，要求有一定的幾何知識。

轉載請註明地址：郭先生的部落格

 

相關文章