Kör az XY-síkban
BufferGeometry + Fan-topológia (N=6)

01Az alakzat leírása

Egy R sugarú kör (korong), amelynek középpontja az origóban van, és teljes egészében az XY-síkban fekszik (z = 0). A közelítés N = 6 egyenlő szektorra van felosztva — a felosztási szög: Δθ = 2π/6 = 60°. Manuálisan építjük fel a CircleGeometry helyett, hogy az indexelés folyamata teljes egészében látható legyen.

02Parametrikus egyenlet

A kerület csúcspontjai i = 0…N−1 egész paraméterrel:

P(i) = ( x(i) = R · cos(i · 2π/N) y(i) = R · sin(i · 2π/N) z = 0 ) ahol: R = 2, N = 6, Δθ = 2π/6 ≈ 1.0472 rad = 60° Origó (középpont): P_center = (0, 0, 0)

Az összes csúcspont (origó + N kerületi pont):

Index	i	θ (rad)	θ (fok)	x	y
0	—	—	—	0.000	0.000
1	0	0	0°	2.000	0.000
2	1	π/3	60°	1.000	1.732
3	2	2π/3	120°	−1.000	1.732
4	3	π	180°	−2.000	0.000
5	4	4π/3	240°	−1.000	−1.732
6	5	5π/3	300°	1.000	−1.732

03Geometria felépítése

A kör fan-topológiával épül fel: minden háromszög az origóból (index 0) indul, és a kerület két szomszédos pontját köti össze. Összesen N = 6 háromszög, N+1 = 7 csúcs.

Az index-tömb felépítése (fan-topológia, minden háromszög az origóból indul):

[0] 0→1→2 [1] 0→2→3 [2] 0→3→4
[3] 0→4→5 [4] 0→5→6 [5] 0→6→1

Az utolsó háromszög visszazár: az utolsó kerületi csúcs (6) után ismét az első kerületi csúcs (1) következik.

const N = 6, R = 2.0;
// N+1 csúcs: 1 origó + N kerületi pont
const posArray = new Float32Array((N+1) * 3);
posArray.set([0, 0, 0], 0); // index 0: origó
for (let i = 0; i < N; i++) {
  const θ = i * (2*Math.PI / N); // i * 2π/6
  posArray.set([R*Math.cos(θ), R*Math.sin(θ), 0], (i+1)*3);
}

// N háromszög × 3 index = 3N egész szám
const idxArray = new Uint16Array(N * 3);
for (let i = 0; i < N; i++) {
  idxArray[i*3  ] = 0;           // origó
  idxArray[i*3+1] = i + 1;       // aktuális kerületi csúcs
  idxArray[i*3+2] = (i+1) % N + 1; // következő (visszazárással)
}

04DoubleSide material

Két külön Mesh azonos geometriával: FrontSide és BackSide. A ◑ DoubleSide gomb bekapcsolásakor a matFront.side értéke THREE.DoubleSide-ra vált — a hátlap mesh elrejtve, az előlap anyaga mindkét oldalt lefedi.

Mély piros — előlap

#8B0000 · RGB(139, 0, 0)

FRONT

Cián — hátlap

#00CCCC · RGB(0, 204, 204)

BACK

Komplementer szín: H_kompl = (H_alap + 180°) mod 360° Piros HSL(0°, 100%, 27%) → Cián HSL(180°, 100%, 40%)

05GridHelper

A GridHelper alapból az XZ-síkban van. rotation.x = π/2 forgatással kerül az XY-síkba (z = 0), hogy a körrel egy síkban legyen látható.

06Wireframe

A wireframe LineSegments-ként van megvalósítva — nem MeshBasicMaterial({wireframe:true})-ként, hogy elkerüljük a z-fighting-ot. Tartalmazza az összes sugárirányú élt és a záró kerületi vonalakat: összesen 2N = 12 él (N sugár + N kerületi ív).

Fájl

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

⬇ Letöltés: circle3d.html

Kör az XY-síkbanBufferGeometry + Fan-topológia (N=6)

Kör az XY-síkban
BufferGeometry + Fan-topológia (N=6)