Three.js İlk Projem

Modern tarayıcılar, **WebGL** (Web Graphics Library) dediğimiz düşük seviyeli bir API sayesinde ekran kartının (GPU) gücünü kullanabilir. Ancak doğrudan WebGL ile bir kare çizmek bile sayfalarca karmaşık matematiksel kod gerektirir. İşte **Three.js**, bu karmaşayı sadeleştiren, bize "Sahneye bir küp ekle" deme lüksü tanıyan muazzam bir kütüphanedir. **Nasıl Kulanılır ?** - **Sahne (Scene)**: Her şeyin içinde bulunduğu "evren". Objeleri, ışıkları ve arka planı buraya eklersiniz. - **Kamera (Camera)**: Dünyayı nereden izliyoruz? En yaygın olanı PerspectiveCamera'dır; gerçek hayat gibi uzaklaşan nesneleri küçük gösterir. - **İşleyici (Renderer)**: Sahneyi ve kamerayı alıp, saniyede 60 kez ekranın piksellerine (Canvas) basan motordur. **Nesne Yapısı: Mesh** Ekranda gördüğünüz her 3D model (bir araba, bir küp veya bir karakter) aslında bir Mesh'tir. Bir Mesh ise iki bileşenin birleşmesiyle oluşur: - **Geometri (Geometry)** Nesnenin **iskeletidir**. Üç boyutlu uzaydaki noktaların (vertex) ve bu noktaları birleştiren yüzeylerin matematiksel verisidir. Three.js bize hazır geometriler sunar: BoxGeometry (Küp), SphereGeometry (Küre) gibi. - **Materyal (Material)** Nesnenin **derisidir**. "Bu nesne ışığı yansıtıyor mu?", "Rengi ne?", "Üzerinde bir doku (texture) var mı?" sorularının cevabıdır. **Işıklandırma** Three.js'te varsayılan olarak her yer zifiri karanlıktır. Eğer MeshStandardMaterial gibi ışığa duyarlı bir materyal kullandıysanız, sahneye ışık eklemezseniz objeniz siyah görünecektir. - **AmbientLight** : Her şeyi eşit aydınlatır, gölge oluşturmaz (Dolgu ışığı). - **DirectionalLight** : Güneş gibidir. Belirli bir yönden paralel ışınlar gönderir. - **PointLight** : Bir ampul gibidir. Tek bir noktadan her yöne ışık saçar. **Animasyon** Bir 3D sahneyi "canlı" kılan şey, onun statik bir resim değil, sürekli güncellenen bir yapı olmasıdır. requestAnimationFrame kullanarak bir döngü yaratırız. Bu döngüde objenin rotasyonunu değiştirip renderer'a "tekrar çiz" deriz. Three.js öğrenmek sadece kod yazmak değil, aynı zamanda ışık, gölge ve derinlik ile oynamayı öğrenmektir. Web sitenize bir 3D öğe eklediğinizde, kullanıcıya sadece bilgi değil, bir deneyim sunarsınız. **ÖRNEK KOD PARÇASI** ``` Three.js İlk Projem ```

#threejs

Web Sayfasına 3D Nesne Ekleme (Three.js)

CoreOps × xDevForum