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

參數化幾何體能夠作出十分豐富的數學幾何體，要求有必定的幾何知識。

轉載請註明地址：郭先生的博客