Three.js - Three.js

Three.js
Three.js örneklerinin ekran görüntüleri
Three.js örneklerinin ekran görüntüleri
Orijinal yazar (lar)Ricardo Cabello (Bay doob )
Geliştirici (ler)Three.js Yazarlar[1]
İlk sürüm24 Nisan 2010; 10 yıl önce (2010-04-24)[2]
Kararlı sürüm
r122 / 28 Ekim 2020; 29 gün önce (2020-10-28)
Depo
Bunu Vikiveri'de düzenleyin
YazılmışJavaScript
TürJavaScript kitaplığı
LisansMIT[1]
İnternet sitesiThreejs.org

Three.js bir tarayıcılar arası JavaScript kitaplığı ve uygulama programlama Arayüzü (API) animasyonlu oluşturmak ve görüntülemek için kullanılır 3D bilgisayar grafikleri içinde internet tarayıcısı kullanma WebGL. Kaynak kodu şu tarihte bir depoda barındırılıyor: GitHub.

Genel Bakış

Three.js, grafik işlem birimi (GPU) ile hızlandırılmış 3D animasyonlar JavaScript bir parçası olarak dil İnternet sitesi tescilliye güvenmeden tarayıcı eklentileri.[3][4] Bu, gelişi nedeniyle mümkündür WebGL.[5]

Three.js gibi üst düzey kitaplıklar veya GLGE, SceneJS, PhiloGL veya diğer birçok kitaplık, geleneksel bağımsız bir uygulama veya bir eklenti için gereken çaba olmadan tarayıcıda görüntülenen karmaşık 3D bilgisayar animasyonlarının yazılmasını mümkün kılar.[6]

Tarih

Three.js, ilk olarak Ricardo Cabello tarafından Nisan 2010'da GitHub'da yayınlandı.[2] Kütüphanenin kökenleri, kütüphaneye olan ilgisine kadar izlenebilir. demoscene 2000'lerin başında.[7] Kod ilk olarak şu tarihte geliştirilmiştir: ActionScript ve 2009'da JavaScript'e aktarıldı. Cabello'ya göre, JavaScript'e aktarımın iki güçlü noktası, her çalıştırma ve platform bağımsızlığından önce kodu derlemek zorunda değildi. Gelişiyle WebGL Three.js, çekirdeğin kendisinden ziyade bir modül olarak işleme kodu ile tasarlandığından, Paul Brunt bunun için oluşturucuyu oldukça kolay bir şekilde ekleyebildi.[8] Cabello'nun katkıları arasında API tasarımı, CanvasRenderer, SVGRenderer ve çeşitli katkıda bulunanların taahhütlerini projeye birleştirmekten sorumlu olmak yer alıyor.

İlk katkıda bulunan Branislav Ulicny, bir dizi yayınladıktan sonra 2010 yılında Three.js ile başladı. WebGL kendi sitesinde demolar. O istedi WebGL CanvasRenderer veya SVGRenderer'ın özelliklerini aşmak için Three.js'deki oluşturucu yetenekleri.[8] Başlıca katkıları genellikle malzemeleri, gölgelendiricileri ve son işlemeyi içerir.

Tanıtılmasından kısa bir süre sonra WebGL Mart 2011'de Firefox 4'te, Joshua Koo gemiye çıktı. Eylül 2011'de 3D metin için ilk Three.js demosunu oluşturdu.[8] Katkıları sıklıkla geometri üretimi ile ilgilidir.

Michael Herzog, 2015'in sonlarında aktif bir katılımcı oldu. Ricardo Cabello'nun ardından, taahhütler açısından en büyük ikinci katkıda bulunan kişi.[9]

GitHub'da 1300'den fazla katılımcı var.[10]

Özellikleri

Three.js aşağıdaki özellikleri içerir:[11]

  • Etkiler: Anaglif, şaşı ve paralaks bariyeri.
  • Sahneler: çalışma zamanında nesne ekleme ve kaldırma; sis
  • Kameralar: perspektif ve ortografik; denetleyiciler: trackball, FPS, yol ve daha fazlası
  • Animasyon: armatürler, ileri kinematik, ters kinematik, morph, ve ana kare
  • Işıklar: ortam, yön, nokta ve spot ışıklar; gölgeler: yayınlama ve alma
  • Malzemeler: Lambert, Phong, pürüzsüz gölgeleme, dokular ve daha fazlası
  • Gölgelendiriciler: tam OpenGL Gölgeleme Diline erişim (GLSL ) yetenekler: mercek parlaması, derinlik geçişi ve kapsamlı işlem sonrası kitaplığı
  • Nesneler: ağlar, parçacıklar, hareketli karakterler, çizgiler, şeritler, kemikler ve daha fazlası - tümü ile Ayrıntı düzeyi
  • Geometri: düzlem, küp, küre, simit, 3B metin ve daha fazlası; değiştiriciler: torna, ekstrüzyon ve tüp
  • Veri yükleyiciler: ikili, resim, JSON ve sahne
  • Yardımcı programlar: tam zaman seti ve 3B matematik işlevleri hüsran, matris, kuaterniyon, UV'ler, ve dahası
  • Dışa aktarma ve içe aktarma: Three.js uyumlu JSON dosyalarını içinden oluşturmak için yardımcı programlar: Blender, openCTM, FBX, Max, ve OBJ
  • Destek: API belgeleri yapım aşamasındadır. Herkese açık bir forum ve wiki tam anlamıyla çalışıyor.
  • Örnekler: 150'den fazla kodlama örneği dosyası, ayrıca yazı tipleri, modeller, dokular, sesler ve diğer destek dosyaları
  • Hata ayıklama: Stats.js,[12] WebGL Denetçisi,[13] Three.js Denetçisi[14]
  • Sanal ve Artırılmış Gerçeklik WebXR [15]

Three.js, WebGL 1.0 tarafından desteklenen tüm tarayıcılarda çalışır.

Three.js, MIT Lisansı.[1]

Kullanım

Aşağıdaki kod bir sahne oluşturur, sahneye bir kamera ve bir küp ekler, bir WebGL oluşturucu oluşturur ve bunun görüntü alanını document.body öğesine ekler. Küp yüklendikten sonra x ve y ekseni etrafında döner.

ithalat * gibi ÜÇ itibaren "js / three.module.js";var kamera, faliyet alani, sahne, oluşturucu;var geometri, malzeme, örgü;içinde();canlandırmak();işlevi içinde() {	kamera = yeni ÜÇ.Perspektif Kamera( 70, pencere.innerWidth / pencere.innerHeight, 0.01, 10 );	kamera.durum.z = 1;	faliyet alani, sahne = yeni ÜÇ.Faliyet alani, sahne();	geometri = yeni ÜÇ.BoxGeometry( 0.2, 0.2, 0.2 );	malzeme = yeni ÜÇ.MeshNormalMaterial();	örgü = yeni ÜÇ.Örgü( geometri, malzeme );	faliyet alani, sahne.Ekle( örgü );	oluşturucu = yeni ÜÇ.WebGLRenderer( { antialias: doğru } );	oluşturucu.setSize( pencere.innerWidth, pencere.innerHeight );	belge.vücut.appendChild( oluşturucu.domElement );}işlevi canlandırmak() {	requestAnimationFrame( canlandırmak );	örgü.rotasyon.x += 0.01;	örgü.rotasyon.y += 0.02;	oluşturucu.vermek( faliyet alani, sahne, kamera );}

Topluluk

İnternet üzerinden IDE'ler Three.js için yerleşik destek WebGL Playground'da mevcuttur,[16] HTML Snippet[17]ve JSFiddle.[18] API için belgeler mevcuttur[19] wiki ile ilgili genel tavsiyelerin yanı sıra.[20] Kitaplığa bağlı olan geliştiriciler için destek GitHub'daki sorunlar forumu aracılığıyla sağlanır,[21] uygulamalar ve web sayfaları oluşturan geliştiriciler için destek ise Stack Overflow aracılığıyla sağlanır.[22] Gerçek zamanlı çevrimiçi destek, IRC üzerinden Freenode.[23] Geliştiricilerin çoğu da Twitter.

Ayrıca bakınız

Referanslar

  1. ^ a b c "Three.js / lisans". github.com/mrdoob. Alındı 20 Mayıs 2012.
  2. ^ a b "İlk taahhüt". github.com/mrdoob. Alındı 20 Mayıs 2012.
  3. ^ O3D
  4. ^ Unity (oyun motoru)
  5. ^ "Khronos Nihai WebGL 1.0 Spesifikasyonunu Yayınladı". Khronos Grubu. 3 Mart 2011. Alındı 2 Haziran 2012.
  6. ^ Crossley, Rob (11 Ocak 2010). "Çalışma: 28 milyon ABD dolarına kadar çıkan ortalama geliştirme maliyetleri". Intent Media Ltd. Arşivlenen orijinal 13 Ocak 2010. Alındı 2 Haziran 2012.
  7. ^ NVScene. "NVScene 2015 Oturumu: Tekerleği Yeniden Keşfetmek - Son Bir Kez (Ricardo Cabello)". Youtube.
  8. ^ a b c "Three.js Teknik Raporu". Github.com. 2012-05-21. Alındı 2013-05-09.
  9. ^ "Mrdoob / three.js'ye katkıda bulunanlar".
  10. ^ Bay doob (2020-08-03), mrdoob / three.js, alındı 2020-08-03
  11. ^ mrdoob (2012-11-26). "Mrdoob / three.js Wiki GitHub'ı içerir". Github.com. Alındı 2013-05-09.
  12. ^ "Stats.js". Github.com. Alındı 2013-05-09.
  13. ^ "WebGL Denetçisi". Benvanik.github.com. Alındı 2013-05-09.
  14. ^ "Three.js Inspector Labs". Zz85.github.com. Alındı 2013-05-09.
  15. ^ "three.js örnekleri". threejs.org.
  16. ^ "WebGL Playground". WebGL Oyun Alanı. Alındı 2013-05-09.
  17. ^ "HTML Snippet". Html5snippet.net. 2011-05-15. Alındı 2013-05-09.
  18. ^ "jsFiddle". jsFiddle. Alındı 2013-05-09.
  19. ^ "Three.js API referansı". Mrdoob.github.com. 2000-01-01. Alındı 2013-05-09.
  20. ^ mrdoob (2013-03-15). "Three.js Wiki". Github.com. Alındı 2013-05-09.
  21. ^ mrdoob. "Three.js Sorunları". Github.com. Alındı 2013-05-09.
  22. ^ "Three.js". StackOverflow. Alındı 2013-05-09.
  23. ^ "Freenode - Three.js". Webchat.freenode.net. Alındı 2013-05-09.

Kaynakça

Bir dizi bilgisayar bilimi ders kitabı, Three.js'ye WebGL uygulamaları için geliştirme sürecini basitleştirmenin yanı sıra WebGL kavramlarına aşina olmak için kolay bir yöntem olarak atıfta bulunur. Görünüm sırasına göre bu ders kitapları şunları içerir:

Dış bağlantılar