3D Örnekler – 3D Güneş Sistemi

2.086 kez okundu

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.

gunessistemi

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.

 

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload CAPTCHA.

Tipobe365 Giriş