3D Örnekler – 3D Güneş Sistemi
Merhaba arkadaşlar bu yazımda sizlerle, dersinizde konu anlatımında materyal olarak veya ödev-projelerinizde kolayca kullanabileceğiniz 3D Güneş Sistemi örneği paylaşacağım. HTML, CSS ve JavaScript kullanarak hazırlamış olduğumuz örneğimizi incelemeye başlayalım.
Aşağıdaki bölümde “HTML” sekmesine tıkladığınızda kullanılan html kodlarını, “CSS” sekmesine tıkladığınızda css kodlarını, “JS” sekmesine tıkladığınızda javascript kodlarını inceleyebilirsiniz. “Result” sekmesi ile de örneğimizi canlı olarak inceleyebilir ve kullanabilirsiniz.
Uygulamanın Tanımı
Yukarıdaki uygulama güneş sistemini anlatan 3 boyutlu bir uygulamadır. Uygulamada, güneş sistemi içerisinde bulunan gezegenler, bu gezegenlerin dünya ve güneşe olan uzaklıkları, yörünge hızları, yörüngede döndükleri çevrenin boyutu bulunmaktadır.
Uygulamanın Kullanımı
Uygulamamıza baktığımızda, sol üst tarafta “Menü” linkini göreceksiniz. Bu linke tıkladığımızda sıralı bir şekilde gezegen isimleri ve güneş açılıyor. Bilgilerini öğrenmek istediğimiz öğeye tıklıyoruz ve seçtiğimiz öğenin sistemdeki resminin üzerine bilgiler geliyor. Menüden seçimlerimizi değiştirerek tüm öğeler hakkında bilgi alabiliyoruz. Sağ tarafa baktığımızda ise “Kontroller” linkini görüyoruz. Bu link sayesinde, sol menüden seçtiğimiz öğenin “Hız”, “Boyut” ve “Mesafe” özelliklerini öğrenebiliyoruz. Geçişleri yanlarındaki butonlara tıklayarak yapıyoruz.
Hız: Seçtiğimiz öğenin yörüngedeki hızını gösteriyor.
Boyut: Seçtiğimiz öğenin yörüngede döndüğü çevreyi gösteriyor.
Mesafe: Seçtiğimiz öğenin güneş veya dünyaya olan uzaklığını gösteriyor.
Ayrıca “Kontroller” linki içinde bulunan “2D” ve “3D” seçenekleri ile iki boyutlu veya üç boyutlu olarak sistemi inceleyebiliyoruz. “+” seçeneği ile sistemi 3 boyutlu olarak hareketli şekilde, “-“ seçeneği ile sistemi yandan görünecek şekilde sabit olarak inceleyebiliyoruz.
Not: Yapımındaki kodlar çok uzun olduğu için nasıl yapıldığını anlatmadım, yapımı ile ilgili merak ettiğiniz veya takıldığınız bir yer olursa (HTML,CSS veya JS ile ilgili) mail veya yorum olarak iletebilirsiniz.
Evet arkadaşlar 3D Güneş Sistemi uygulamamızı tanıtmış olduk, bu uygulamayı yukarıda da dediğim gibi ister projenizde isterseniz öğrencilerinize konu anlatırken materyal olarak kullanabilirsiniz, etkileyici ve ilgi çekici olacaktır. Soru ve önerilerinizi yorum olarak ya da e-mail göndererek iletebilirsiniz, teşekkürler.
