Three.js ile Yapılmış 10 Etkileşimli Site

Bir tasarım referansını kaydederken genellikle ekran görüntüsünü alıp geçiyoruz. Sayfanın yerleşimi, renkleri, yazı karakterleri o karede duruyor. Üç boyutlu sitelerde ise görüntü, işin ancak bir bölümünü anlatıyor. Bir koltuğun kumaşını değiştirmek, bir arşivi farklı düzende açmak ya da şehrin içinde yol almak için siteyi kullanmak gerekiyor. Tasarımın nasıl çalıştığı o zaman ortaya çıkıyor.

Three.js, bu tür sahneleri tarayıcıda kurmaya yarayan bir JavaScript kütüphanesi. Üç boyutlu modelleri, ışıkları ve kamerayı yönetmek için gereken araçları sağlıyor. Onunla bir ürün gösterimi de hazırlanabiliyor, oyun da, görsel üretim aracı da. Dolayısıyla Three.js örneklerine bakarken birbirinden oldukça farklı işlerle karşılaşıyoruz.

Bu yazıda, kendi sitesi veya projesi için referans arayan tasarımcı ve geliştiriciler açısından incelenmeye değer on çalışmayı bir araya getirdim. Her birinin kısa kaydı ve canlı bağlantısı var. Seçki, basılabilir bir kâğıt karakterle başlayıp ürün sunumlarına, gezilebilir dünyalara ve yaratıcı araçlara uzanıyor. Geliştirdiğim FormDrive da aralarında; bu listedeki bana ait tek proje.

Tasarımın ekrandan çıktığı yer: Paper Critters

Paper Critters'ta üç boyutlu bir kâğıt karakterin üzerine çıkartmalar yerleştiriyorsunuz. Karakteri çevirdikçe desenin yan ve arka yüzlerde nasıl devam ettiğini görebiliyorsunuz. Geliştiricinin açıkladığı yerleştirme yöntemi, çıkartmaların köşeleri aşarak diğer yüzlere geçmesine izin veriyor. Tasarım bittiğinde kesme ve katlama çizgileri olan bir PDF alıyorsunuz. Üç boyutlu ön izleme burada somut bir soruyu cevaplıyor: düz kâğıttaki desen, karakteri katlayıp birleştirdiğinizde nasıl görünecek?

Paper Critters: tarayıcıdaki karakterden kesilip katlanacak bir tasarıma.

Ürün üzerinde seçim yapmak

Bir nesneyi kişiselleştirme fikri, ürün sunumlarında da karşımıza çıkıyor. Hazır seçeneklerden birini seçip üründeki karşılığını gördüğünüz bu arayüzlere konfigüratör deniyor. Seçimlerin kapsamı ise projeden projeye değişiyor.

FormDrive, geliştirdiğim üç araçlık otomobil stüdyosu. Boyayı ve jantları değiştirebilir, kapıları ve diğer hareketli parçaları açıp kapatabilirsiniz. Aracı serbestçe çevirmek mümkün; ön, yan ve detay görünümleri için hazır kamera açıları da var. Işık seçenekleri aynı boyayı farklı stüdyo ortamlarında incelemeye izin veriyor.

Burada otomobilin görünüşü ve parçaları üzerinde çalışıyorsunuz; fiyat hesaplama veya sipariş aşaması yok. Uygulamayı incelemek isteyenler için kaynak kodu açık. Araç modellerinin lisansları ise uygulama kodundan ayrı; kullanım koşulları depoda belirtiliyor.

Aynı Mustang üzerinde boya, jant, kapı ve aydınlatma kontrolleri.

GIRIH X Furniture Configurator'da seçimlerin yanında üretim bilgisi de bulunuyor. Banyo dolabının ölçüsü ve düzeni değiştikçe parça dökümü, ölçülendirilmiş kesim bilgisi ve tahmini toplam güncelleniyor. Hotel Noir veya Desert Terrazzo gibi hazır tasarımlardan başlayıp ayrıntıları düzenleyebiliyorsunuz.

Bu kez seçilen görünüşün hangi parçalardan oluştuğu da ortada. Mobilya sunumu üzerinde çalışan biri için, modelle bu bilgilerin yan yana nasıl yerleştirildiği incelenmeye değer. Ekrandaki tutarlar örnek fiyatlar; montajı ve Avustralya'daki mal ve hizmet vergisi GST'yi içermiyor.

Hazır dolap tasarımıyla birlikte malzemeler, parçalar ve örnek fiyat hesabı değişiyor.

Bir malzemeyi hangi ışıkta görüyoruz?

Bir koltuğun rengini değerlendirirken onu gördüğümüz ışığı da hesaba katmak gerekiyor. Anderson Mancini'nin Lumen Decor Studio 2 çalışması, tek bir oturma odasının aydınlatmasına odaklanıyor. Copper Haze ve Ink Hush düzenlerinde aynı mobilyalar oldukça farklı bir ışık altında kalıyor.

Kayıtta özellikle duvarlara ve koltuk yüzeylerine bakın. Mobilyaların yerleşimi sabit kaldığı için, değişen ışığın odayı nasıl etkilediğini takip etmek kolaylaşıyor.

Oda ve eşyalar yerinde kalırken aydınlatma değişiyor.

Giuseppe Paccione'nin portfolyosundaki 03 Configuratore bölümünde ölçek küçülüyor: bu kez bir koltuğun döşemesi, ahşabı ve ışık ortamı seçiliyor. Ön izleme, seçimden sonra aşama aşama netleşiyor. İlk anda görülen grenli görüntü, hesaplama ilerledikçe yerini daha temiz yüzeylere bırakıyor.

Yeni seçimin ardından görüntünün netleşmesini beklemek gerekiyor. Kumaşın ve ahşabın yüzeyini değerlendirmek için bu süreyi de sunumun bir parçası olarak düşünmeli.

Malzeme seçiminin ardından koltuğun görüntüsü aşamalı olarak tamamlanıyor.

Koleksiyonda kaybolmadan gezinmek

Tek bir nesneyi incelemekten çıkıp bir koleksiyona geçtiğimizde, içerikler arasında nasıl dolaşılacağı önem kazanıyor. Pixel Vault 2047, moda arşivinin Playground bölümünde iki görünüm sunuyor. Dairesel düzende koleksiyonun çevresinde geziniyor, ızgaraya geçtiğinizde işleri yan yana görüyorsunuz.

Buradaki görünüm düğmesi, gösterişli sunumdan sıkılan veya belirli bir işe dönmek isteyen ziyaretçiye daha doğrudan bir yol bırakıyor. Bir portfolyo hazırlarken de aynı ihtiyaç çıkabilir: ilk kez gelen kişi keşfetmek isterken, ikinci kez gelen kişi daha önce gördüğü işi arayabilir. İki ziyaretin aynı biçimde ilerlemesi gerekmiyor.

Pixel Vault'un aynı koleksiyon için sunduğu iki gezinme biçimi.

Gezinmenin kendisi anlatının parçası olduğunda

Shader.se'de sayfayı kaydırdıkça kamera eski bir bilgisayarın ekranına yaklaşıyor. İş seçkisi, ofis ve ekip bölümleri, 1980'lerin kurumsal teknoloji dünyasında birbirine bağlanıyor. Bej bilgisayarlar ve dönemin ofis görüntüleri bütün sayfaya yayılmış.

Kurucu ortak Filip Kantedal, yapım yazısında bu tercihin geçmişini anlatıyor: şirket kurarken karşılaştıkları iş dünyası söylemiyle dalga geçen bir kimlik hazırlamışlar. Şirketin adı sonradan değişmiş, ama şaka sitede yaşamaya devam etmiş. Görsel tercihlerin ekibe neden bu kadar özgü olduğunu bu hikâye açıklıyor.

Bir bölümden diğerine geçerken Shader'ın eski ofis dünyası devam ediyor.

Adrian Red'in Cyber City Orion projesinde ise izleyeceğiniz yolu siz seçiyorsunuz. Neonlarla aydınlanan şehirde uçan araçla ilerlemek, çatılarda dolaşmak ve arcade oyunlarına ulaşmak mümkün. Projenin sayfası, Blade Runner ve Cyberpunk etkisini açıkça belirtiyor.

Orion'a bir bilgiyi hızla bulmak için girmiyorsunuz; şehrin içinde vakit geçirmek zaten deneyimin kendisi. Bu yüzden oyun kontrolleri ve görev işaretleri burada yerli yerinde. Bir portfolyoya aynı tür bir dünya kurmayı düşünürken, ziyaretçinin o dünyada ne yapacağını da tasarlamak gerekiyor.

Cyber City Orion'un uçuş ve şehir keşfinden bir bölüm.

Hazır sahneden kendi görseline: Nodl

Şimdiye kadarki örneklerde hazırlanmış bir nesne veya dünya içinde hareket ettik. Nodl ise tarayıcıda yeni görseller üretmeye yarayan bir editör. Şekilleri ve efektleri temsil eden blokları birbirine bağlıyorsunuz; ortaya çıkan bağlantı düzeni görüntünün nasıl oluşacağını belirliyor. “Düğüm tabanlı editör” ifadesi bu çalışma biçimini anlatıyor.

Hazır bir şablonu açıp değerlerini değiştirmek, editörün mantığını görmenin kolay bir yolu. Düzenleme sırasında sonucu aynı çalışma alanında izleyebiliyorsunuz. Aşağıdaki kayıt ürünün hareketli açılışını gösteriyor; üretim sürecini incelemek için siteden editöre geçmek gerekiyor.

Nodl'un açılış görselleri; düğümlerle çalışma alanı sitenin editöründe.

Bir görüntünün parçalarını ayırmak

Black Hole Simulation'da kara deliğin çevresindeki maddeyi temsil eden birikim diskini açıp kapatabiliyorsunuz. Disk kaldırıldığında, arka plandaki ışığın bükülmüş görünümünü ayrı olarak izlemek mümkün. Böylece görüntüde üst üste gelen unsurları ayırt edebiliyorsunuz. Bu örneği bilimsel görselleştirme arayüzü olarak ele alıyorum; fizik hesaplarının doğruluğunu ayrıca sınamadım.

Birikim diskinin açık ve kapalı olduğu iki görünüm.

Referans olarak neyi kaydetmeli?

Bu sitelere dönüp bakarken yalnız son görüntüyü kaydetmek eksik kalıyor. Paper Critters'ın baskıya uzanan akışı, Pixel Vault'un görünüm değişimi veya Lumen'in ışık seçenekleri, birkaç hareket boyunca anlaşılıyor. Kendi projenizde kullanabileceğiniz fikir de çoğu zaman o hareketlerin arasında.

Üzerinde çalıştığınız işe en yakın örneği açın ve tek bir akışı takip edin. Ziyaretçinin nereden başladığını, neyi değiştirdiğini ve sonunda nereye ulaştığını kısa bir kayıtla saklayın. Yanına da o tercihin sizin sitenizde hangi ihtiyacı karşılayacağını yazın. Böylece bir süre sonra referansa döndüğünüzde, güzel göründüğü için mi kaydettiğinizi, yoksa çözmek istediğiniz soruya gerçekten cevap verdiği için mi seçtiğinizi hatırlarsınız.