Primitive geometriler (hazır formlar)

Bir primitiv oluştururken yalnızca “küp mü küre mü” demezsiniz; o şeklin çözünürlüğünü ve boyutlarını da seçersiniz. En sık tartışılan kavram segment sayısıdır: yüzeyi oluşturan üçgenlerin yoğunluğu buradan gelir — segment arttıkça eğri yüzeyler pürüzsüzleşir, fakat vertex ve üçgen sayısı (dolayısıyla GPU yükü) genelde hızla büyür.

A. BoxGeometry (küp ve prizma)

Düz yüzeyli nesnelerin temelidir; width, height, depth ile tanımlanır. İsteğe bağlı segment parametreleri ile yüz başına ızgara bölünebilir.

• Kullanım: duvarlar, kutular, zemin blokları.
• İpucu: sadece düz bir kutu gerekiyorsa çoğu zaman segment sayılarını varsayılan (1) bırakmak en ekonomiktir.

B. SphereGeometry (küre)

widthSegments ve heightSegments küresel ağın sıklığını belirler.

• Kullanım: gezegenler, toplar, kavisli yüzeyler.
• Maliyet: segment çok yükselirse üçgen sayısı ciddi artar; uzak veya küçük nesnelerde düşük segment genelde yeterlidir.

C. PlaneGeometry (düzlem)

İki boyutlu, varsayılan olarak tek taraflı bir yüzeydir; genişlik, yükseklik ve isteğe bağlı segment ızgarası alır.

• Kullanım: zeminler, duvarlar, UI panelleri, su yüzeyi tabanı.
• Dikkat: tek taraflı görünür; arka yüzü de göstermek için materyalde side: THREE.DoubleSide gerekir.

D. TorusGeometry (simit / halka)

radius (ana halka) ve tube (boru kalınlığı) ile kontrol edilir; tubular / radial segmentler pürüzlülüğü ayarlar.

• Kullanım: halkalar, lastik profili, dekoratif soyut formlar.

Silindir ve koni: CylinderGeometry ve ConeGeometry sık kullanılan diğer primitivlerdir; yarıçap, yükseklik, alt/üst kapak ve segmentler performansı doğrudan etkiler (aşağıdaki tabloda özet).

Aynı küre tipinde üç örnek: sol daha az segment (daha köşeli), orta taban, sağ daha fazla (daha pürüzsüz). Kaydırıcı taban segmenti değiştirir; wireframe üçgen yoğunluğunu gösterir. Her demo bölümünde, demo kutusundan ayrı — yalnızca o section içinde, ana içerik sütunu ile aynı genişlikte isteğe bağlı ses şeridi vardır: assets/audio-files/Primitive-Demo-1 … 4 dosya adlarıyla eşlenir (mp3, m4a, ogg, wav, webm sırayla denenir).

Bu blok diagram-primitive-geometri.js içindeki initSegmentCompare ile eşlenir. Orta küre için seçilen taban segmentten üç farklı kesitlik üretilir; her güncellemede eski geometri dispose edilir.

Üç kürenin segmentleri tek kaynaktan türetilir; döngü içinde geometri yenilenir.

function segTriple(base) {
  const b = Math.max(4, Math.min(48, Math.round(base)));
  const low = Math.max(3, b - 8);
  const mid = b;
  const high = Math.min(64, b + 10);
  return [low, mid, high];
}

// apply() içinde — her küre için dispose + yeniden SphereGeometry
for (let i = 0; i < 3; i++) {
  meshes[i].geometry.dispose();
  meshes[i].geometry = geos[i];
}

Aşağıda modeli elle çizmiyorsunuz; parametre seçiyorsunuz. Tür değiştikçe ilgili kaydırıcılar görünür — kutu boyutları, küre segmenti, düzlem boyutu ve ızgara, torus yarıçap ve boru kalınlığı.

initPrimitiveSwitch: tür seçiciye göre mesh.geometry.dispose() ve yeni primitiv; kutu dışındaki türlerde düzlem rotation.x = -π/2 ile yere yaslanır.

Tür değişince tek rebuild() dalı seçilir; düzlemde ekstra yerel dönüş ve konum ayarı yapılır.

function rebuild() {
  const t = typeSel ? typeSel.value : "box";
  mesh.geometry.dispose();
  let g;
  if (t === "box") {
    g = new THREE.BoxGeometry(w, h, d);
  } else if (t === "sphere") {
    g = new THREE.SphereGeometry(1, s, s);
  } else if (t === "plane") {
    g = new THREE.PlaneGeometry(w, h, seg, seg);
  } else {
    g = new THREE.TorusGeometry(R, tube, rs, ts);
  }
  mesh.geometry = g;
  if (t === "plane") {
    mesh.rotation.x = -Math.PI / 2;
    mesh.position.y = 0.01;
  } else {
    mesh.rotation.set(0, 0, 0);
    mesh.position.y = 0.65;
  }
}

Aynı geometri 36 kez tekrarlanır (6×6 ızgara). Segment artınca her kürenin üçgen sayısı büyür; toplam yük artar ve FPS genelde düşer — özellikle zayıf cihazlarda fark hissedilir.

initPerfSpheres: 36 ayrı Mesh aynı SphereGeometry örneğini paylaşır; segment değişince tek geometri yenilenir ve tüm mesh’lere atanır.

Paylaşımlı geometri: bir kez dispose, yeni SphereGeometry, döngüde her mesh’e aynı referans.

const COL = 6;
const ROW = 6;
const N = COL * ROW;
// ... her hücre için new THREE.Mesh(geo, mat) — başlangıç geo paylaşımlı

function updateGeo() {
  const seg = Math.max(4, Math.min(48, Math.round(Number(range.value))));
  geo.dispose();
  geo = new THREE.SphereGeometry(0.32, seg, seg);
  for (const m of meshes) {
    m.geometry = geo;
  }
}

PlaneGeometry ızgarası ne kadar sıksa, aynı dalga fonksiyonu o kadar pürüzsüz görünür; düşük segmentte yüzey blok blok kırılır.

initPlaneWave: düzlem yerel koordinatlarında saklanan rest dizisi + her karede sinüs/kosinüs ile Z yer değiştirme; computeVertexNormals() ile aydınlatma güncellenir.

Segment değişince taban düzlem yeniden üretilir ve durağan köşe konumları userData.rest içinde saklanır; animasyon döngüsünde position buffer’ı güncellenir.

function rebuildPlane() {
  const g = new THREE.PlaneGeometry(4, 4, s, s);
  mesh.geometry = g;
  const pos = g.attributes.position;
  const rest = new Float32Array(pos.count * 3);
  // ... köşe xyz rest[] içine yazılır → g.userData.rest = rest
}

// loop içinde — taban + dalga ofseti (Z)
const disp =
  Math.sin(bx * 2.2 + t * 1.4) * 0.35 + Math.cos(by * 1.8 + t * 1.1) * 0.22;
pos.setXYZ(i, bx, by, bz + disp);
pos.needsUpdate = true;
g.computeVertexNormals();

Kod tarafında primitivleri üretirken segmentlerin ne işe yaradığını görmek önemlidir: aynı sınıf, farklı parametrelerle hem “kaba” hem “ince” mesh üretebilir. Bu sayfadaki çalışan davranış tek kaynakta diagram-primitive-geometri.js dosyasında toplanmıştır; her demo bölümünde isteğe bağlı ses bandı (demo kutusundan ayrı, sütun genişliğinde), kutunun içinde ise o bloğa karşılık gelen sabit tablosu ve kod kesiti (segment), parametrik tablo / kesit, performans tablosu / kesit, düzlem dalgası tablosu / kesit bulunur.

Genel “tek dosyada üç satır” örneği kaldırıldı; böylece sayfadaki sayılar ile editörde gördüğünüz kod aynı dosyadan izlenir ve kopyala-yapıştır hataları azalır.