xDevForum — Türkçe topluluk forumu

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

<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Three.js İlk Projem</title>
    <style>
        body { margin: 0; }
        canvas { display: block; } /* Scrollbar oluşmasını engeller */
    </style>
</head>
<body>

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
            }
        }
    </script>

    <script type="module">
        import * as THREE from 'three';

        // 1. SAHNE (EVREN)
        const scene = new THREE.Scene();

        // 2. KAMERA (GÖZ)
        // PerspectiveCamera(Bakış Açısı, En-Boy Oranı, Yakın Kesim, Uzak Kesim)
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5; // Kamerayı küpten biraz uzaklaştırıyoruz

        // 3. RENDERER (MOTOR)
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement); // Canvas'ı sayfaya ekle

        // 4. NESNE OLUŞTURMA (MESH)
        // Geometri (Şekil) + Materyal (Doku) = Mesh
        const geometry = new THREE.BoxGeometry(1, 1, 1); // 1x1x1 boyutunda küp
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Yeşil renk
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube); // Küpü sahneye ekle

        // 5. ANİMASYON DÖNGÜSÜ
        function animate() {
            requestAnimationFrame(animate);

            // Küpü her karede biraz döndür
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            // Sahneyi kameradan bakarak çiz
            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html>```

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

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

Konuyu Yanıtla

Bu konuda yer alanlar