Yazar: 希彼赫
Canlı deneyin Bu proje hakkında
FLORA, Dünya Kupası ülkelerini ve simge çiçeklerini sıcak ışıklı bir sergi salonuna taşıyor: Arjantin'in jakarandası, Hollanda lalesi, Japonya'nın kasımpatısı, Kolombiya'nın cattleya orkidesi — her çiçek, döner platform üzerinde sürükleyip yakından inceleyebileceğiniz, Tripo ile üretilmiş bir 3D model.
Sıvı cam görünümlü arşiv kartları her çiçeğin bilimsel adını, familyasını, çiçeklenme dönemini, sembolizmini ve kültürel notlarını sıralar; bayrak çubuğu tek tıkla ülke değiştirir, dilerseniz kamerayı açıp el hareketleriyle gezinirsiniz. Varlıklar tek bir teslim protokolüne uyar (+Z yönelim, orijin sap kökünde); eksik yuvaları prosedürel yer tutucular otomatik doldurur.
Öne çıkanlar
- Her örneği döner platformunda sürükleyerek çevirin, yakın plan için çift tıklayın
- Bayrak çubuğundan tek tıkla ülke değiştirin ya da kamera önünde el hareketleriyle gezinin
- Sıvı cam görünümlü arşiv kartları bilimsel ad, familya, çiçeklenme dönemi, sembolizm ve kültürel notları sunar
- Eksik varlıklar aynı protokoldeki prosedürel yer tutucularla otomatik doldurulur; hiçbir kaide boş kalmaz
Teknik inceleme
3D örnekler · Tripo text-to-3D
Salondaki altı ulusal çiçek — cattleya, dalya, cennet kuşu çiçeği, kasımpatı, jakaranda ve lale — hepsi Tripo text-to-3D işi; GLB olarak dışa aktarılıp GLTFLoader ile ihtiyaç oldukça salona yükleniyor.
Her çiçek aynı kurala göre teslim ediliyor: yüz +Z yönünde, orijin sap kökünde, yükseklik yaklaşık bir birim. Bir örnek eksik kalırsa kod aynı kurala göre prosedürel bir yedek üretip kaideye koyuyor — hiçbir vitrin boş kalmıyor.
Sıcak ışık · RoomEnvironment IBL
Salonda elle yerleştirilmiş tek bir lamba yok: bütün sıcak ışık Three.js’in RoomEnvironment’ından geliyor. Ürettiği environment map sayesinde Tripo modellerinin PBR malzemeleri parlamalarını ve yumuşak yayılımını doğal biçimde gösteriyor. Lamba lamba ayar derdi yok — tek bir environment map, ışık hazır.
Müze etiketleri · CSS3DRenderer
Etiketlerdeki bilimsel adlar, familyalar ve kültür notları aslında sayfadaki gerçek DOM öğeleri; CSS3DRenderer ile 3D sahneyle birlikte dönüyorlar. Faydası gayet somut: yazı her mesafeden net, seçilip kopyalanabiliyor, hatta sıvı cam görünümü bile sıradan CSS ile yazılmış.
Hareketle sayfa çevirme · MediaPipe Hands
Alttaki bayrak çubuğuna tıklamanın yanında salon temassız da geziliyor: MediaPipe Hands kameradan elinizi okuyor, bir el sallayışıyla sıradaki ülkenin standına geçiyorsunuz — fareye hiç dokunmadan bütün salonu dolaşabilirsiniz.
