Téglalap az XY-síkban
BufferGeometry + DoubleSide material

01Az alakzat leírása

Egy W × H méretű téglalap, amelynek középpontja az origóban van, és teljes egészében az XY-síkban fekszik (z = 0). Manuálisan építjük fel a PlaneGeometry helyett, hogy az indexelés és normálisok folyamata teljes egészében látható legyen.

02Parametrikus egyenlet

A csúcspontok u, v ∈ {0, 1} paraméterekkel:

P(u, v) = ( x(u) = W · (u − 0.5), u ∈ {0, 1} y(v) = H · (v − 0.5), v ∈ {0, 1} z = 0 ) W = 4, H = 2.5

Index	u	v	x	y
0	0	0	−2.0	−1.25
1	1	0	+2.0	−1.25
2	1	1	+2.0	+1.25
3	0	1	−2.0	+1.25

03Geometria felépítése

Három buffer: position, normal, index. A négy csúcsból két háromszög:

Index-tömb: [ 0, 1, 2, 0, 2, 3 ]

// Csúcspozíciók (Float32Array)
const posArray = new Float32Array([
  -W/2, -H/2, 0,  // 0 bal-alsó
   W/2, -H/2, 0,  // 1 jobb-alsó
   W/2,  H/2, 0,  // 2 jobb-felső
  -W/2,  H/2, 0,  // 3 bal-felső
]);

// Index-tömb (Uint16Array)
const idxArray = new Uint16Array([
  0, 1, 2,  // 1. háromszög
  0, 2, 3,  // 2. háromszög
]);

const geo = new THREE.BufferGeometry();
geo.setAttribute('position',
  new THREE.BufferAttribute(posArray, 3));
geo.setIndex(
  new THREE.BufferAttribute(idxArray, 1));
geo.computeVertexNormals();

04DoubleSide material

A GPU alapértelmezés szerint csak az előlapot rendereli (back-face culling). Két külön Mesh-el, FrontSide és BackSide material-lal érjük el a két eltérő színt — ez a DoubleSide kézi megfelelője.

Mély piros — előlap

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

FRONT

Cián — hátlap

#00FFFF · RGB(0, 255, 255)

BACK

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

05GridHelper

A GridHelper alapból az XZ-síkban van. 90°-os X-tengelyes forgatással kerül az XY-síkba:

const grid = new THREE.GridHelper(
  10, 20, 0x334455, 0x1a2233
);
grid.rotation.x = Math.PI / 2; // XZ → XY
scene.add(grid);

06Kamera & OrbitControls

PerspectiveCamera — FOV 45°, pozíció (0, 1.5, 6)
OrbitControls — bal egér: forgat, jobb: pásztáz, görgő: zoom
autoRotate — gombbal ki/be kapcsolható
enableDamping — tehetetlenség effekt

Fájl

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

⬇ Letöltés: rectangle3d.html

Téglalap az XY-síkbanBufferGeometry + DoubleSide material

Téglalap az XY-síkban
BufferGeometry + DoubleSide material