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

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

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