İnternet, genellikle iki boyutlu bir ortam olarak görülür. Ve adil olmak gerekirse öyle. Bunun için tasarlandı.
Dahası, canlı hale getirilmiş üç boyutlu grafiklerin eklenmesi geleneksel olarak eklentileri gerektiriyor. Macromedia bize Shockwave'ı verdi, Unity bize Birlik Web Oynatıcısını verdi ve her zaman, oyunlar için 3D grafikler kullandık.
Bununla birlikte, HTML5, CSS3 ve bazı yaratıcı JavaScriptler bunu değiştirmek için çok şey yapmıştır. Oh, hala daha çok oyunlar için kullanılıyor, ancak daha fazla alabilir ve grafikleri düzenli bir siteye her zamankinden daha kolay entegre edebilirsiniz.
Elbette, hala kullanılabilirlik endişelerimiz var. Gezinme veya temel içerik için 3D grafiklere bağlı bir site hala korkunç bir fikirdir. Bununla birlikte, ilerleyici geliştirmeyle kullanıldığında, 3D bir şeyi bir çentiğe götürmek için uygun ve hatta performansa uygun bir yoldur.
Bu amaçla, ben varım voxel.css .
voxel.css, 3B nesnelerin oluşturulmasının ağır kaldırılması için CSS3 kullanan bir çerçevedir. JavaScript, etkileşimi eklemek, animasyonları tetiklemek ve hemen hemen her şey için kullanılır.
Şey, bu konuştuğumuz CSS. Crysis seviyesinde grafikler almayacaksın. Bu çerçevenin adından da anlaşılacağı gibi, aldığınız şey çok fazla küp. Tarayıcıda Minecraft'ı düşünün. (Birisi üçte iki Minecraft klonu oluşturacak ... iki…)
Yine de, bloklu grafiklerle etkileyici şeyler yapabilirsiniz. Bunu, 8-bit sanatını yepyeni bir düzeye taşıyarak düşünün.
Voxel.css temel uygulaması sadece kütüphanenin ve 15 satır kodun dahil edilmesini gerektirir. Bu, modellerinizi ve nokta tıklama stilinizi düzenleyebileceğiniz, kaydedilebilir bir sanal sahne oluşturur.
Bu sahneleri herhangi bir web sayfasına görüntüleyebilir ve istediğiniz gibi canlandırabilirsiniz.
Saydamlık için PNG, animasyon için GIF veya sınırsız ölçeklenebilirlik için SVG dosyası kullanın. Bilinmeyen nedenlerle bir JPG kullanın veya henüz tüm tarayıcılarda uygulanmayan şeyleri sevdiğiniz için WebP formatı kullanın.
Bir demo bile var web kameranızdan canlı görüntüleri kullanır bloklar için dokular olarak.
Yine, bu CSS3. Çalışmanızı görüntülemek için bir cihazın grafik kartının üstün render gücünü (veya duruma göre çip) kullanabilirsiniz. Hiçbir şeyde dalgalı grafikler hakkında endişelenmenize gerek kalmayacak, ancak en yavaş mobil cihazlar. (Her durumda olanlar için bir geri çekilme kullanmalısınız.)
voxel.css, web uygulamanıza, sayfanıza, sitenize veya oyununuza üç boyutlu bir iyilik yapmak için basit, anlamsız bir yoldur. Deneyin, demolara bakın ve projeniz için uygun olup olmadığına bakın.