three.js 幾何體(三)
阿新 • • 發佈:2020-07-12
上一篇介紹了幾何體的構造體引數,這篇郭先生就接著上一篇說。
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 );
引數化幾何體可以做出十分豐富的數學幾何體,要求有一定的幾何知識。
轉載請註明地址:郭先生的部落格
&n