Three.js ve WebGL
Sahne, Three.js kütüphanesiyle WebGL üzerinde çiziliyor. Çok sayıda altıgen parça tek bir çizim çağrısında (instancing) çizildiği için kalabalık sahne de akıcı kalıyor.
3DHizmet
3D web tasarım
Ziyaretçinin sayfayı kaydırdıkça içinde ilerlediği, tarayıcıda gerçek zamanlı çalışan 3D ve interaktif web siteleri tasarlıyor ve geliştiriyoruz. Three.js ve WebGL ile; eklenti ya da uygulama kurmaya gerek kalmadan, masaüstünde ve mobilde.
Canlı örnek: bu site.
cimix.net'in ana sayfası bu hizmetin çalışan bir örneğidir. Sayfayı aşağı kaydırdığınızda gördüğünüz sahne önceden kaydedilmiş bir video değildir; kaydırma hareketinize tepki veren, tarayıcıda gerçek zamanlı çizilen bir 3D sahnedir. Sahne her bölümde şekil değiştirir: önce logo, sonra her hizmet için ayrı bir 3D model, ardından tünel ve son olarak projelerin 3D cihazlarda sunumu.
Nasıl yapıldı?
Kaydırmaya bağlı geçişler
Her bölümün kendi sahne kurgusu var. Parçalar, kaydırma konumuna göre bir sonraki şekle yumuşakça dönüşüyor.
Özel 3D modeller
Dizüstü bilgisayar, telefon, kalem, hedef ve mesaj balonu modelleri GLB formatında hazırlandı ve web için küçültüldü.
Işık ve son işlem
Stüdyo ortam ışığı, parlama (bloom) ve ton eşleme ile sinematik bir görüntü elde ediliyor.
Uyarlanabilir kalite
Cihaz zorlanırsa çözünürlük ve efektler otomatik olarak azaltılıyor; daha düşük donanımlı cihazlarda da sayfa kullanılabilir kalıyor.
Arama motoru dostu
Başlıklar, metinler ve bağlantılar normal HTML olarak sayfada. Arama motorları ve yapay zekâ asistanları içeriği okuyabiliyor.
3D ile neler yapabiliriz?
3D ana sayfa ve marka deneyimi
Logonuzu veya markanızın simgesini merkeze alan, kaydırdıkça markanızı anlatan giriş sahneleri.
3D ürün sunumu
Ürününüzü ziyaretçinin döndürüp yakından inceleyebileceği gerçek zamanlı 3D modellerle gösterin.
Kaydırmayla anlatım
Hizmetlerinizi, süreçlerinizi veya rakamlarınızı bölüm bölüm canlanan sahnelerle anlatın.
3D katmanlı kurumsal site
Teklif formu, blog, çoklu dil ve yönetim paneli gibi kurumsal ihtiyaçlarla birlikte çalışan 3D tasarım.
Etkileyici ama hızlı ve erişilebilir.
3D bir sitenin amacı ziyaretçiyi etkilemek, ama asıl işi yine bilgi vermek ve teklif toplamak. Bu yüzden 3D katmanı içeriğin önüne değil, arkasına koyuyoruz.
- Metin içerik 3D sahneyi beklemeden HTML olarak yüklenir.
- 3D modeller ve dokular web için sıkıştırılır.
- Sahne hazırlanırken ilerleme gösteren bir yükleme ekranı açılır.
- Zorlanan cihazlarda kalite otomatik olarak düşürülür.
- WebGL desteklemeyen tarayıcılarda da içerik okunabilir kalır.
3D projede adım adım.
- 01
Referans ve konsept
Beğendiğiniz siteleri, marka kimliğinizi ve hedefinizi konuşup sahnenin fikrini belirliyoruz.
- 02
Model ve sahne kurgusu
Gerekli 3D modelleri hazırlıyor, hangi bölümde ne göreceğinizi taslakla gösteriyoruz.
- 03
Geliştirme
Sahneyi Three.js ile kuruyor, metin ve formlarla birlikte sitenin geri kalanını geliştiriyoruz.
- 04
Cihaz testleri
Farklı ekran kartlarında, tarayıcılarda ve telefonlarda görünümü ve akıcılığı test ediyoruz.
- 05
Yayın ve destek
Siteyi yayına alıyor, sonrasında güncelleme ve bakımda yanınızda oluyoruz.
Sık sorulan sorular.
3D web sitesi nedir?
Tarayıcıda WebGL teknolojisiyle gerçek zamanlı çizilen 3D nesneler ve sahneler içeren web sitesidir. Ziyaretçi sayfayı kaydırdıkça veya fareyi hareket ettirdikçe sahne tepki verir; gördüğünüz şey bir video değildir.
3D web sitesi telefonda çalışır mı?
Evet. WebGL güncel mobil tarayıcıların neredeyse tamamında desteklenir. Sahne mobil ekrana göre düzenlenir; cihaz zorlanırsa çözünürlük ve efektler otomatik olarak azaltılır.
3D tasarım Google sıralamasını olumsuz etkiler mi?
Doğru kurulduğunda hayır. Başlıklar, metinler ve bağlantılar normal HTML olarak sayfada kalır; 3D katman görsel bir arka plandır. Modeller ve dokular sıkıştırılır, sayfa hızı yayın öncesinde test edilir.
3D modelleri kim hazırlıyor?
Projeye özel modelleri biz hazırlarız. Elinizde ürün, ambalaj veya logo modeli varsa onu web için optimize ederek de kullanabiliriz.
Hangi teknolojileri kullanıyorsunuz?
3D sahneler için Three.js ve WebGL, modeller için GLB/glTF formatını kullanıyoruz. Sitenin geri kalanını ihtiyaca göre PHP veya React gibi teknolojilerle, yönetim paneliyle birlikte geliştiriyoruz.
3D web sitesinin fiyatı ne kadar?
Fiyat; sahne sayısına, model ihtiyacına ve sitenin kapsamına göre değişir. Teklif formundan ihtiyacınızı yazın, kapsamı birlikte netleştirip size yazılı teklif sunalım.
3D web sitenizi konuşalım.
İhtiyacınızı yazın; kapsamı netleştirip size özel, yazılı bir teklifle dönüş yapalım.