Kendi 3D Web Kitlerimi Neden Oluşturmak İstiyorum?

Tekrar eden parçalar

Bir interaktif 3D web sitesi yaptığında aslında birçok parçayı tekrar tekrar kullanıyorsun.

• Kamera hareketi.
• Scroll kontrolü.
• Model rotation.
• Material değişimi.
• Responsive davranış.
• Loading ekranı.

Bunların hepsini her projede sıfırdan yapmak zaman alıyor. Üstelik her seferinde aynı küçük hataları yeniden yapma riski de var: mobilde bozulan bir kontrol, yükleme sırasında boş kalan bir ekran, pencere boyutu değişince kayan bir kamera.

Bu yazıda bu tekrar eden parçaları nasıl yeniden kullanılabilir kitlere çevirmeyi düşündüğümü, bir kitin neyi içermesi ve neyi içermemesi gerektiğini ve bunun AI destekli geliştirmeyle nasıl birleştiğini anlatıyorum. Bu bir tamamlanmış ürün tanıtımı değil; bir üretim yaklaşımı ve bu yaklaşımın gerekçeleri.

Kit tam olarak ne demek?

Burada "kit" kelimesiyle kastettiğim şey büyük bir çerçeve ya da kütüphane değil. Kit, belirli bir işi iyi yapan, küçük, belgelenmiş ve farklı projelere taşınabilen bir parça koleksiyonu. Bir kitin üç özelliği olmasını istiyorum:

• Tek işi olmalı: "Ürün döndürme kiti" ürünü döndürür; aynı anda animasyon, ödeme ve analitik yönetmeye çalışmaz.
• Ayarlanabilir olmalı: Hız, sınır, başlangıç açısı gibi değerler dışarıdan verilebilir olmalı; kodun içine gömülmemeli.
• Bağımsız olmalı: Bir projenin özel verisine ya da yapısına sıkı sıkıya bağlı olmamalı.

Bu özellikler bir kitin "kopyala-yapıştır parça"dan farkını oluşturuyor. Kopyala-yapıştır parça her projede biraz değişir ve zamanla birbirinden ayrılan sürümlere dönüşür. Kit ise tek bir doğru kaynak olarak kalır.

Reusable kitler

Bu nedenle tamamladığım iyi projelerden reusable kitler çıkarmanın mantıklı olduğunu düşünüyorum. Bir proje bittiğinde kodun hangi bölümünün genel amaçlı olduğunu ayırabilirim. Sonra bunu ayrı bir sistem haline getirebilirim. Bir sonraki projede tekrar kullanırım. Böylece zaman içinde kendi üretim altyapım oluşur.

Burada sıralama önemli: önce proje, sonra kit. Henüz hiçbir projede kullanılmamış bir kiti "ileride lazım olur" diye tasarlamak çoğu zaman gereksiz karmaşıklık üretir, çünkü gerçek ihtiyaçları bilmeden soyutlama yapılır. Gerçek bir projede çalışmış, sınanmış ve sorunları görülmüş bir parçayı ayıklamak çok daha sağlıklı. Genel bir mühendislik deneyimi olarak, bir şeyin iki üç farklı yerde gerçekten tekrarlandığını görmeden soyutlamamak iyi bir kural.

Hangi parçalar kit olmaya uygun?

Başta saydığım tekrar eden parçaların her birini kit olarak düşünürken nelere dikkat edileceğini özetleyeyim.

Kamera hareketi: Kameranın bir noktadan diğerine geçişi, yumuşatma ve sınır değerleri. Kitin sağlaması gereken şey, kamera durumlarını (konum, hedef, görüş açısı) isimli noktalar olarak tanımlayıp aralarında geçiş yapabilmek. Ürünün farklı açılardan gösterilmesi gerektiğinde bu sık kullanılır.

Scroll kontrolü: Sayfanın kaydırma oranını 0 ile 1 arasında bir değere çevirip sahnedeki animasyonlara bağlamak. Burada dikkat edilecek şey, kaydırma değerinin yumuşatılması ve farklı cihazlarda tutarlı çalışması. Bu konunun tasarım tarafı için scroll tabanlı 3D web siteleri yazısına bakabilirsin.

Model rotation: Sürükleyerek döndürme, bırakınca yavaşlama, dikey açıya sınır koyma ve gerekirse otomatik dönüş. Basit görünür, ama dokunmatik ekranda sayfa kaydırmayla çakışmaması gibi ayrıntıları yönetmek zaman alır. Kontrol tasarımı için 3D ürün görüntüleyicisinde kontroller yazısını yazdım.

Material değişimi: Renk ya da malzeme seçildiğinde modelin görünümünü güncellemek. Bu kit, modelin hangi parçasının hangi malzemeyle eşleşeceğini ve geçişin ani mi yumuşak mı olacağını yönetebilir. Çok sayıda renk seçeneği olan ürünlerde bu özellikle değerli; örnek bir uygulama için Aura Reformer renk seçici yazısına bakabilirsin.

Responsive davranış: Pencere boyutu ve cihaz yönü değiştiğinde sahnenin kadrajını, çözünürlüğünü ve kontrol duyarlılığını uyarlamak. Mobil ve masaüstü için ayrı kamera kadrajı tanımlayabilmek burada işe yarar.

Loading ekranı: Model ve dokular inerken kullanıcıya bir ilerleme göstermek, yükleme bittiğinde sahneyi yumuşakça açmak. Yükleme ekranı küçük bir ayrıntı gibi görünse de kullanıcının sayfanın bozuk olup olmadığına dair ilk izlenimini belirler.

Belgelendirme ve sürüm disiplini

Bir kit, ancak sonradan hatırlanabildiği ve güvenle değiştirilebildiği ölçüde işe yarar. Aylar sonra açıldığında "bu ayar ne işe yarıyordu?" diye düşündüren bir kit, sıfırdan yazmaktan pek de hızlı değildir. Bu yüzden her kit için küçük ama düzenli bir belgelendirme alışkanlığı öneriyorum.

Kısa bir kullanım notunda şunlar yer alabilir:

• Kitin tek cümlelik amacı.
• Alabildiği ayarlar, varsayılan değerleri ve ne yaptıkları.
• Dışarıya verdiği olaylar ya da fonksiyonlar.
• Bilinen sınırlar: örneğin hangi tarayıcılarda ya da hangi cihazlarda denendiği.
• Kullanılmaması gereken durumlar.
• Minimum çalışan bir kullanım örneği.

Değişiklik yönetimi de aynı ölçüde önemli. Bir kiti yeni bir proje için değiştirdiğinde eski projelerin bozulmaması gerekir. Bunun için kitte yapılan değişiklikleri küçük adımlarla kaydetmek, geriye dönük uyumu bozan değişiklikleri açıkça not etmek ve eski projelerin hangi sürümü kullandığını bilmek yeterli bir disiplin sağlar. Karmaşık bir paketleme sistemi şart değil; düzenli bir klasör yapısı ve değişiklik notları çoğu zaman yeterli olur.

Bir de kitin kendi içinde test edilebilir olması fayda sağlar: basit bir örnek sayfa, kitin her değişiklikten sonra hâlâ çalıştığını hızla doğrulatır. Bu örnek sayfa aynı zamanda yeni bir projeye başlarken en hızlı başlangıç noktası olur.

Kitin içinde olmaması gerekenler

Kiti tasarlarken neyi dışarıda bırakacağını bilmek, neyi içereceğini bilmek kadar önemli. Şunlar genelde kitin dışında kalmalı:

• Projeye özel içerik: Marka renkleri, metinler, ürün adları ve belirli model dosyaları projeye ait.
• Projeye özel iş kuralları: "Bu renk şu üründe seçilemez" gibi kurallar kitin içinde değil, kitin kullanıcı kodunda yer almalı.
• Ağır bağımlılıklar: Her kit için büyük bir kütüphane eklemek, toplam site ağırlığını artırır. Kitin ne kadar yük getirdiği önemli bir tasarım ölçütü.
• Tahmini gelecek ihtiyaçlar: "Belki lazım olur" diye eklenen özellikler bakım yükünü artırır.

Kitin ağırlığı konusunu özellikle vurgulamak istiyorum. Bir kit ne kadar kullanışlı olursa olsun, siteyi yavaşlatıyorsa değeri düşer. Bu dengenin neden önemli olduğunu tasarım ve performans yazısında anlattım.

AI ile birlikte

Bence AI araçlarıyla çalışırken bu daha da değerli olabilir. Çünkü AI'ye her seferinde aynı problemi anlattırmak yerine daha önce test edilmiş bir sistem üzerinden ilerleyebilirsin. Test edilmiş bir temel, AI'nin ürettiği değişikliklerin de daha güvenli kontrol edilmesini sağlıyor. Bu süreci Claude Code yazımda anlattım.

Bunu biraz açayım. Bir kod yardımcısına "bu sayfaya döndürülebilir ürün modeli ekle" dediğinde, her seferinde sıfırdan bir çözüm üretebilir. Bu çözümler birbirinden farklı olabilir; birinde dokunmatik ekran desteği olur, diğerinde olmaz; birinde bellek temizliği düşünülmüştür, diğerinde unutulmuştur. Her çıktıyı baştan incelemek zaman alır ve hata riskini artırır.

Elinde test edilmiş bir kit varsa, yardımcıdan istediğin şey değişir: "mevcut kiti şu şekilde ayarla ve şu sayfaya bağla". Bu durumda inceleyeceğin kod parçası küçülür; çünkü çekirdek davranış zaten bilinen ve sınanmış bir yapıdan geliyor. Üretilen değişikliğin kiti bozup bozmadığını anlamak da daha kolay, çünkü kitin beklenen davranışı net.

Kitin belgelenmesi de burada önem kazanıyor. Kısa bir kullanım notu, kitin ne yaptığını, hangi ayarları aldığını ve hangi durumlarda kullanılmaması gerektiğini söylüyorsa, hem gelecekteki ben hem de çalıştığım araçlar için net bir bağlam sağlamış oluyorum. AI ile üretimde kontrolün neden gerekli olduğuna dair daha geniş bir bakış için AI ile üretirken kontrol yazısına bakabilirsin.

Bir kit nasıl ayıklanır?

Bir projeden kit çıkarmak için izlediğim yaklaşım kabaca şu adımlardan oluşuyor:

• Tekrarı tespit et: Aynı davranışın birden fazla projede ya da aynı projenin birden fazla sayfasında yeniden yazıldığını fark et.
• Sınırı çiz: Kitin tek sorumluluğunu bir cümleyle yaz. Cümle "ve" ile uzuyorsa, muhtemelen iki kit var.
• Projeye özel kısmı ayır: Sabit değerleri, metinleri ve model yollarını dışarıdan verilen ayarlara çevir.
• Basit bir arayüz belirle: Kitin dış dünyaya sunduğu şeyi küçük tut: birkaç ayar ve birkaç olay.
• Temizlik ve kaynak yönetimi ekle: Kullanılmayan olay dinleyicilerini kaldırmak, bellekte tutulan geometri ve dokuları serbest bırakmak gibi işleri kitin sorumluluğuna al.
• Küçük bir örnek sayfa yaz: Kitin tek başına çalıştığını gösteren çıplak bir örnek, hem test hem belge işlevi görür.
• İkinci projede gerçekten kullan: Asıl sınav budur. İkinci kullanımda ortaya çıkan sürtüşmeler kitin arayüzünü iyileştirir.

Bu adımların sonunda kit, "bir projenin kodu" olmaktan çıkıp "bir yapı taşı" haline geliyor.

Kit yaklaşımının riskleri

Her yaklaşım gibi bunun da riskleri var; dürüstçe listelemek istiyorum.

• Erken soyutlama: Gerçek ihtiyaç görülmeden kit yazmak, kullanılmayan karmaşıklık üretir.
• Bakım yükü: Kit sayısı arttıkça her birinin güncel kalması, tarayıcı ve kütüphane değişikliklerine uyumu bir iş haline gelir.
• Aşırı esneklik: Her şeyi ayarlanabilir yapmaya çalışmak, kitin kullanımını zorlaştırır. Mantıklı varsayılanlar önemli.
• Her işe aynı kalıbı zorlamak: Kit, yeni bir projenin özel ihtiyacını gölgelememeli. Bazen sıfırdan yazmak daha doğru olabilir.
• Gereksiz 3D: Elimde hazır bir kit olması, her siteye 3D koymak için bir gerekçe değil. Bu konuyu web sitesinde 3D ne zaman gereksiz yazısında ayrıca işledim.

Bu risklerin farkında olmak, kiti bir hedef değil bir araç olarak tutmamı sağlıyor.

Kitlerin ürün tarafındaki karşılığı

Kitlerin bir yararı da müşteri işlerinde hız ve tutarlılık sağlaması olabilir. Örneğin bir ürünün web sitesine döndürülebilir 3D model olarak eklenmesi talep edildiğinde, çekirdek davranış zaten hazırsa zaman, modelin kendisine ve ürünün özel ihtiyaçlarına ayrılabilir. Bu da dikkati asıl önemli noktaya, yani ürünün doğru ve çekici görünmesine verir.

Model tarafında da benzer bir mantık geçerli: hazırlık adımlarının bir sırası ve kontrol listesi olması, her projede aynı özeni göstermeyi kolaylaştırır. Web için model hazırlama sürecini web sitesi için 3D ürün modeli nasıl hazırlanır yazısında, hizmetin kapsamını ise web için 3D ürün modeli sayfasında bulabilirsin. Sade bir başlangıç için model-viewer ile 3D model ekleme yazısı hazır bir bileşenle nasıl ilerlenebileceğini gösteriyor; kendi kitini yazmak her zaman şart değil, hazır bir çözüm yeterliyse onu kullanmak daha mantıklı olabilir.

Genel fikir

Bu yaklaşım her projeyi bir sonrakinin temeli yapma fikrinin teknik uygulaması. Her proje yalnızca teslim edilen bir iş değil, aynı zamanda bir sonraki işe kalan bir birikim olmalı. Kitler bu birikimin kodla ifade edilmiş hali.

Kitlerin ne kadar ağır olacağı da önemli; performans tarafını tasarım ve performans yazısında anlattım. Hafif, amaca yönelik ve gerektiğinde yüklenen bir kit, siteyi yormadan işini yapar. Ağır, her şeyi bir arada sunan bir yapı ise kolaylık yerine yük getirir.

Başlamadan önce kontrol listesi

Bir parçayı kit yapmaya karar vermeden önce kendime şunları soruyorum:

• Bu davranışı en az iki farklı yerde kullandım ya da kullanacağım kesin mi?
• Tek cümleyle ne yaptığını söyleyebiliyor muyum?
• Projeye özel değerleri ayarlara çevirebilir miyim?
• Kullanılmadığında sayfaya ek yük bindirmeden dışarıda bırakılabilir mi?
• Mobil cihazlarda ve düşük güçlü donanımda sınadım mı?
• Kullanımını anlatan kısa bir not yazabilir miyim?
• Temizlik (bellek, olay dinleyicisi) işlerini kit mi yapıyor?

Cevaplardan çoğu "evet" ise, kit mantıklı bir yatırım. Çoğu "hayır" ise, parçayı projede bırakıp biraz daha olgunlaştırmak daha doğru.

Sık sorulan sorular

Sonuç

Kamera, scroll, rotation, materyal değişimi, responsive davranış ve yükleme gibi tekrar eden parçaları sınanmış, küçük ve ayarlanabilir kitlere çevirmek zamandan ve hatadan tasarruf sağlıyor. Önce projeyi bitirip sonra gerçekten tekrar eden parçayı ayıklamak, kiti hafif ve işe yarar tutuyor. AI destekli geliştirmede de bu temel, üretilen değişikliklerin daha güvenli incelenmesine yardım ediyor. Zamanla bu parçalar, kendi üretim altyapıma dönüşüyor.

İlgili çalışmaAura ReformerÜrün Modelleme · Müşteri Çalışması · Blender · EEVEE · 6 ürün

İlgili çalışmaGemiSinematik kamera yolu · Blender · EEVEE · 1.500 kare · 24 fps