Felosztás (N) 12
Bal egér: forgat  |  Jobb: pásztáz  |  Görgő: zoom
Three.js · Tananyag

Henger az XY-síkban
3 rész: alsó lap + palást + felső lap

01Az alakzat leírása

Egy R sugarú, H magasságú henger, amelynek tengelye a Z-tengellyel esik egybe, középpontja az origóban van. Három különálló BufferGeometry-ből épül fel:

  • Alsó lap — kör z = −H/2 síkban, lefelé néző normálissal
  • Palást — N négyszög (2N háromszög) a két körgyűrű között
  • Felső lap — kör z = +H/2 síkban, felfelé néző normálissal

Paraméterek: R = 1.5, H = 3.0, N = 12 (default).

02Parametrikus egyenlet
Kerületi pont (i = 0…N−1): P(i, z) = ( x = R · cos(i · 2π/N) y = R · sin(i · 2π/N) z = z ← −H/2 (alsó) vagy +H/2 (felső) ) Alsó lap origója: C_bottom = (0, 0, −H/2) Felső lap origója: C_top = (0, 0, +H/2)
03Geometria felépítése

Alsó és felső lap — fan-topológia (mint a körlapnál), lefelé ill. felfelé néző normálissal. A CCW sorrend a normális irányától függ:

Alsó lap (normális: 0,0,−1): origó → i+1 → i ← fordított CCW! Felső lap (normális: 0,0,+1): origó → i → i+1 ← szokásos CCW

Palást — minden szektorhoz egy négyszög, két háromszögre bontva:

Bᵢ Bᵢ₊₁ Tᵢ Tᵢ₊₁ [0] [1] z=−H/2 z=+H/2

Csúcsindexek a palástban (i = 0…N−1):

Bᵢ = alsó kerület i-edik pontja (index: i) Bᵢ₊₁ = alsó kerület következő pontja (index: (i+1)%N) Tᵢ = felső kerület i-edik pontja (index: N + i) Tᵢ₊₁ = felső kerület következő pontja(index: N + (i+1)%N) [0] háromszög: Bᵢ → Bᵢ₊₁ → Tᵢ [1] háromszög: Bᵢ₊₁ → Tᵢ₊₁ → Tᵢ
// Palást csúcsok: 2N pont (alsó + felső kör) for (let i = 0; i < N; i++) { const θ = i * (2*Math.PI / N); // alsó (index i): z = −H/2 pos.set([R*cos(θ), R*sin(θ), -H/2], i*3); // felső (index N+i): z = +H/2 pos.set([R*cos(θ), R*sin(θ), +H/2], (N+i)*3); } // Palást indexek: 2N háromszög for (let i = 0; i < N; i++) { const b0 = i, b1 = (i+1)%N; const t0 = N+i, t1 = N+(i+1)%N; idx.push(b0, b1, t0); // [0] idx.push(b1, t1, t0); // [1] }
04Anyagok & színek

Három mesh, három eltérő szín — komplementer pár + semleges:

Mély piros — alsó lap
#8B0000
BOTTOM
Acélkék — palást
#1a4a6e
SIDE
Cián — felső lap
#00CCCC
TOP
Komplementer: Piros HSL(0°,100%,27%) ↔ Cián HSL(180°,100%,40%)
05Wireframe

A wireframe LineSegments-ként épül fel, öt részből:

  • Alsó körél — N él a z = −H/2 síkban
  • Felső körél — N él a z = +H/2 síkban
  • Függőleges élek — N él az alsó és felső kerületi pontok között
  • Alsó sugárélek — N él: origó → alsó kerületi pont
  • Felső sugárélek — N él: origó → felső kerületi pont

Összesen: 5N él.

06DoubleSide & GridHelper

A ◑ DoubleSide gomb minden mesh anyagát THREE.DoubleSide-ra állítja — így a henger belsejébe nézve is látszanak a lapok. A ⊞ Rács a GridHelper XY-síkban (rotation.x = π/2).

Fájl

Egyetlen önálló HTML fájl, offline is megnyitható.

⬇ Letöltés: cylinder3d.html