Three.js Nedir? Web Sitesinde 3D Nasıl Yapılır?

Three js nedir diye araştırıyorsanız, tarayıcıda 3D görüntü çizmeyi kolaylaştıran açık kaynak bir JavaScript kütüphanesiyle karşılaşacaksınız. Kendi sitemin ana sayfasındaki dizüstü ve telefon sahnesini Three.js ile hazırladım. Burada ne işe yaradığını, hangi durumlarda tercih ettiğimi ve bu sahneyi hızlandırırken öğrendiklerimi anlatacağım.

Three.js ne işe yarar?

Three.js, WebGL’in (tarayıcının 3D çizim altyapısı) üzerinde çalışıyor. Ricardo Cabello, mrdoob adıyla bilinen geliştirici, projeyi 2010’da başlattı. Kütüphane, web sitesinde 3D sahne kurmayı kolaylaştırıyor; sizin sitenizde hangi sahnenin anlamlı olacağı ise tasarım kararı.

Ürün gösteriminde nesnenin farklı yönlerini inceletmek, portfolyoda işleri bir sahnenin içinde sunmak ya da tanıtımda hikâyeyi hareketle anlatmak için düşünülebilir. Ben önce ziyaretçinin neyi daha iyi anlayacağını soruyorum. Bir ürünün biçimini göstermekle yalnızca arka planda hareket üretmek aynı amaca hizmet etmiyor.

Kendi sitemde dizüstü ve telefon, işleri gösteren bir sahne olarak yer alıyor. Metinlerin hepsi gerçek HTML; ziyaretçinin okuyacağı içerik sahnenin içine kapatılmış değil. Sizin projenizde de tanıtım metni, hizmet bilgisi ve iletişim yolu, görsel deneyimden bağımsız okunabilmeli.

Three.js, video veya görsel nasıl seçilir?

Her hareketli alan için 3D kurmak gerekmiyor. Ziyaretçi nesneyle etkileşime girecekse Three.js, belirlenmiş bir anlatımı izleyecekse video, tek bakışta bilgi alacaksa görsel düşünülebilir. Kararı yalnızca görüntünün etkisine göre verirseniz, gereksiz bir yükü de sayfaya taşıyabilirsiniz.

Yöntem	Etkileşim	Dosya yükü	SEO’ya etkisi	Ne zaman
Three.js	Sahne kullanıcı hareketine karşılık verebilir.	Modeller, dokular ve çizim işi birlikte değerlendirilir.	Önemli metinler ayrıca HTML olarak sunulmalı.	Ürünü inceletmek veya etkileşimli bir anlatım kurmak için.
Video	İzleme akışı önceden belirlenmiştir.	Süre ve görüntü kalitesine göre değişir.	İçeriğin açıklaması sayfada metin olarak yer almalı.	Belirli sırayla ilerleyen tanıtım için.
Görsel/animasyonlu GIF	Görüntünün içinde serbest inceleme sunmaz.	Boyut ve hareket miktarına göre değişir.	Görselin anlattığı bilgi metinde de bulunmalı.	Sabit görünüm veya kısa hareket yeterliyse.

Bu seçeneklerin dosya yükünü yalnızca adından anlayamazsınız. Küçük bir sahneyle ayrıntılı bir sahnenin ihtiyacı aynı olmadığı gibi, görselin ve videonun hazırlanış biçimi de sonucu değiştirir. Tasarım önerisini değerlendirirken gerçek sayfanın telefondaki davranışını görmek isterim.

Açılışta önce poster göstermek

Kendi ana sayfamın ilk açılışında 3D sahneyi hemen kurmak yerine poster (sahnenin önceden alınmış görüntüsü) gösteriyorum. Asıl sahne dokunma, kaydırma ya da birkaç saniye sonrasında başlıyor. Böylece ziyaretçi sayfayla karşılaştığında önce ağır kurulumun tamamlanmasını beklemiyor.

Bu düzenlemeyle Lighthouse mobil ana sayfa puanı 36’dan 100’e çıktı; 100 sonucu önbellek ısınmışken alındı, önbelleksiz ilk ölçüm 48’di. Ekim sonundaki son ölçümde puan 98 oldu. Lighthouse, sayfanın performansını ölçen bir test aracı; değerlendirmede puanın yanında açılışın nasıl hissettirdiğine de bakıyorum.

Buradaki ders, 3D’yi tamamen kaldırmak zorunda olmadan başlangıç sırasını değiştirebilmek. Önce sayfanın okunacak kısmını ve sahnenin görüntüsünü sunup ağır işi sonraya bırakmak mümkün. Siz de tasarımın ilk ekranında neyin hemen gerekli olduğunu sorarak başlayabilirsiniz.

Kaydırırken her şeyi yeniden çizmemek

Kaydırma sırasında ekrandaki görüntüleri sürekli yeniden çizmek de takılmaya yol açıyordu. Kaydırma sürerken bu ekran çizimlerini durdurunca, ölçümdeki 74 uzun görev (ekranı bekleten uzun işlemler) 0’a indi. Açılışla kaydırmanın farklı sorunlar olduğunu bu yüzden ayrı ayrı ele aldım.

Telefonda gölge hesabını kapattım ve küçük dokular (nesne yüzeylerine kaplanan görseller) kullandım. Ziyaretçi alt bilgiye indiğinde 3D çizim de duruyor. Sahne artık görünmüyorsa onu çalıştırmaya devam etmek yerine, sayfanın o bölümündeki ihtiyaca göre davranmasını tercih ediyorum.

Animasyonun tasarımda ne zaman değer kattığını 3D ve animasyonlu web sitesi yazısında anlattım. Buradaki teknik seçimlerin ortak amacı, ziyaretçi yazıyı okurken veya iletişime geçerken sahnenin onu bekletmesini azaltmak. Görsel kararları kullanım sırasında ölçmek bu yüzden önemli.

Yansıma ortamını önceden hazırlamak

31 Ekim 2026’da sahne başlarken oluşan donmanın kaynağına baktığımda, metal yüzeylerin yansıma ortamının her açılışta tarayıcıda hesaplandığını gördüm. Bu iş masaüstünde bile tek parça 550–770 ms sürüyordu. Sahneyi geç başlatmak, başlangıç anındaki bu hesabı ortadan kaldırmıyordu.

Çözüm, ortamı bir kez önceden hesaplayıp küçük bir görsel olarak siteye koymak oldu. İşlemcinin 4 kat yavaşlatıldığı telefon testinde en uzun donma 1.134 ms’den yaklaşık 150 ms’ye indi. Masaüstünde ise 770 ms’den 55 ms’ye düştü.

Bu örnekte değiştirdiğim şey sahnenin anlatımı değil, aynı hazırlığın nerede yapıldığıydı. Ziyaretçinin tarayıcısına her açılışta tekrar hesaplatmak yerine hazır sonucu kullandım. Threejs ile site yaptırırken yalnızca son görüntüyü incelemek yetmiyor; o görüntü oluşurken telefona ne iş yaptırıldığını da sormak gerekiyor.

Three.js ile site yaptırırken sorulacaklar

Bir taslağı beğendikten sonra aşağıdaki soruları sorarım. Cevapları yalnızca sözlü almak yerine, çalışan sayfa üzerinde görmek isterim. Böylece sahnenin etkisiyle sitenin günlük kullanımını birlikte değerlendirebilirsiniz.

1. Yavaş telefonda test edildi mi; açılışta ve kaydırırken beklemeyi birlikte görebilir miyim?
2. Başlıklar ve açıklamalar gerçek HTML mi, sahne açılmadan da okunabiliyor mu?
3. İlk açılışta ne yükleniyor; ağır 3D kurulumu sonraya bırakılabiliyor mu?
4. 3D çalışmazsa ne görünüyor; poster ve temel içerik kullanılabilir kalıyor mu?
5. Hareket azaltma tercihi dikkate alınıyor mu; hareket istemeyen ziyaretçi nasıl bir sayfayla karşılaşıyor?
6. Telefon, mesaj ve iletişim düğmeleri 3D’den bağımsız çalışıyor mu?
7. Lighthouse mobil puanı hangi koşullarda ölçüldü; paylaşılan sonuç açılıştaki beklemeyle birlikte değerlendirildi mi?

Bu cevapları işin kapsamına baştan koymak, sahne tamamlandıktan sonra temel kullanım sorunlarıyla uğraşmayı azaltır. Portfolyo hazırlarken de önce gösterilecek işleri ve anlatılacak bilgiyi seçmenizi öneririm. Sunum biçimi, bu içeriği destekleyecek şekilde belirlenmeli.

Teslim sırasında sayfayı en baştan açıp metni okuyun, aşağı kaydırın ve iletişim bağlantısına ulaşın. Ardından aynı yolu 3D devreye girmeden de deneyin. Bu kısa kontrol, sahneye odaklanırken gözden kaçabilecek temel gezinme sorunlarını fark etmenize yardımcı olur.

Three.js ne zaman gerekmez?

Yerel hizmet arayan ziyaretçi çoğunlukla hizmeti, çalışma bölgesini ve size nasıl ulaşacağını görmek ister. Böyle bir sayfada 3D, bu bilgileri anlamayı kolaylaştırmıyorsa tercih etmem. Çok ürünlü mağaza listesinde de ziyaretçinin ürünleri taraması ve karşılaştırması öncelikli.

Bu tür projelerde bütçeyi içerik düzenine, mobil kullanıma ve iletişim yoluna ayırmak daha yerinde olabilir. Site hizmetlerinin kapsamını konuşurken görsel beklentiyi sayfanın işiyle birlikte değerlendiriyorum. Three.js kullanma kararı, sırf yapılabildiği için verilmemeli.

Hız ölçülerinin ne anlattığını ve kendi sitenizi nasıl kontrol edeceğinizi Core Web Vitals nedir yazısında anlattım.

Sık sorulanlar

Three.js kullanmak SEO’yu bozar mı?

Önemli olan içeriği nasıl sunduğunuz. Kendi sitemde bütün metinler gerçek HTML olarak duruyor. Siz de başlıkların, açıklamaların ve iletişim bağlantılarının 3D sahneye bağlı olmadan okunabildiğini kontrol edin.

3D sahne telefonda da çalışmalı mı?

Telefon deneyimi tasarımın başında düşünülmeli. Gerekirse gölge gibi hesaplar azaltılmalı, sahne görünmediğinde çizim durmalı. Çalışmadığı durumda gösterilecek görüntü ve temel sayfa içeriği de önceden belirlenmeli.

Ürün tanıtımı için mutlaka Three.js gerekir mi?

Hayır, göstermek istediğiniz bilgiye göre görsel veya video yeterli olabilir. Ziyaretçinin nesneyi farklı yönlerden incelemesi anlatımı güçlendiriyorsa etkileşimli sahneyi değerlendirin. Seçimi, ürünün anlaşılmasına yaptığı katkıyla verin.

Sitenizde 3D kullanımının anlamlı olup olmadığını birlikte değerlendirmek isterseniz iletişim sayfamdan bana ulaşabilirsiniz.