Three.js Eğitimi: Yeni Başlayanlar İçin Bir Rehber

Three.js, web tarayıcılarında 3B grafikler oluşturmak için en popüler JavaScript kütüphanelerinden biridir. WebGL üzerine inşa edilmiştir ve düşük seviyeli WebGL öğrenmenize gerek kalmadan, bir web tarayıcısında animasyonlu 3B bilgisayar grafikleri oluşturma ve görüntüleme sürecini basitleştirir. İster etkileşimli görselleştirmeler, oyunlar veya sürükleyici web deneyimleri oluşturmak isteyin, Three.js fikirlerinizi hayata geçirmek için ihtiyacınız olan araçları sağlar.

Three.js geliştirmeye başlamadan önce, API test ihtiyaçlarınız için Postman'e alternatif olarak Apidog'u denemeyi düşünün. Apidog, API geliştirme, test etme ve dokümantasyon için güçlü özelliklere sahip, sezgisel bir arayüz sunar; üstelik birçok kullanıcının Postman'de can sıkıcı bulduğu özellik şişkinliği olmadan. API'lerle etkileşim kuran web uygulamaları geliştirirken mükemmel bir yardımcı araçtır.

button

Şimdi, Three.js yolculuğumuza başlayalım!

1. Ortamınızı Kurma

Kurulum

Three.js'yi projenize dahil etmenin birkaç yolu vardır:

Seçenek 1: npm Kullanımı (Önerilen)

npm install three

Ardından JavaScript dosyanıza içe aktarın:

import * as THREE from 'three';

Seçenek 2: CDN Kullanımı

Bunu HTML dosyanıza ekleyin:

<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>

Seçenek 3: Yerel olarak indirin ve dahil edin

Kütüphaneyi Three.js web sitesinden indirin ve HTML'nize dahil edin:

<script src="path/to/three.min.js"></script>

Proje Yapısı

Temel bir Three.js projesi için şunlara ihtiyacınız olacak:

project-folder/
├── index.html
├── style.css
└── script.js

index.html dosyanız şunları içermelidir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Three.js App</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. Temelleri Anlama

Three.js, anlaşılması gereken birkaç temel kavram üzerine çalışır:

Temel Bileşenler

Sahne: Tüm nesnelerinizi, ışıklarınızı ve kameralarınızı barındıran bir kap olarak düşünün.
Kamera: Sahnenin hangi bölümünün görünür olduğunu tanımlar (bakış açınız).
Renderer: Kameranın gördüklerini ekranınıza çizer.
Nesneler (Örgüler): Genellikle geometri ve malzemeden oluşan sahnenizdeki 3B nesneler.
Işıklar: Sahneniz için aydınlatma kaynakları.

İlk Sahnenizi Oluşturma

Dönen bir küp oluşturmak için temel bir örnek:

// Sahneyi oluştur
const scene = new THREE.Scene();

// Bir kamera oluştur
const camera = new THREE.PerspectiveCamera(
    75,                                     // Görüş alanı
    window.innerWidth / window.innerHeight, // En boy oranı
    0.1,                                    // Yakın kırpma düzlemi
    1000                                    // Uzak kırpma düzlemi
);
camera.position.z = 5;

// Renderer'ı oluştur
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Bir küp oluştur
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Animasyon döngüsü
function animate() {
    requestAnimationFrame(animate);
    
    // Küpü döndür
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}
animate();

3. Uygulamanızı Duyarlı Hale Getirme

Three.js uygulamanızın tüm cihazlarda iyi görünmesini sağlamak için pencere boyutlandırmayı işlemeniz gerekir:

// Pencere boyutlandırmayı işle
window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    // Renderer'ı güncelle
    renderer.setSize(width, height);
    
    // Kamerayı güncelle
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

4. Malzemeler ve Aydınlatma Ekleme

Temel sahneler sadece başlangıçtır. Görsel kaliteyi malzemeler ve ışıklarla geliştirelim:

Malzemeler

// Yansımalı standart malzeme
const material = new THREE.MeshStandardMaterial({
    color: 0x0088ff,       // Mavi renk
    roughness: 0.5,        // Bir miktar parlak
    metalness: 0.5,        // Bir miktar metalik
});

// Basit parlak yüzeyler için Phong malzemesi
const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0xff0000,       // Kırmızı renk
    shininess: 100,        // Çok parlak
    specular: 0x111111     // Özel vurgu rengi
});

Işıklar

// Ortam ışığı ekle
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// Yön ışığı ekle (güneş gibi)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// Nokta ışığı ekle (ampul gibi)
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

5. Farklı Geometriler Oluşturma

Three.js birçok yerleşik geometri ile birlikte gelir:

// Küre
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = -3;
scene.add(sphere);

// Silindir
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const cylinder = new THREE.Mesh(cylinderGeometry, material);
cylinder.position.x = 0;
scene.add(cylinder);

// Torus (donut)
const torusGeometry = new THREE.TorusGeometry(0.8, 0.3, 16, 100);
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.x = 3;
scene.add(torus);

6. Three.js'de Metin Oluşturma

TextGeometry kullanarak sahnenize metin eklenebilir:

// İlk olarak, yazı tipini yükle
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
    const textGeometry = new THREE.TextGeometry('Hello Three.js!', {
        font: font,
        size: 0.5,
        height: 0.1,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5
    });
    
    const textMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
    const text = new THREE.Mesh(textGeometry, textMaterial);
    
    // Metni ortala
    textGeometry.computeBoundingBox();
    const textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
    text.position.x = -textWidth / 2;
    
    scene.add(text);
});

7. Çizgiler Çizme

Tel kafesler veya yol görselleştirmesi için Three.js'de çizgiler oluşturabilirsiniz:

// Çizgi için noktalar oluştur
const points = [];
points.push(new THREE.Vector3(-2, 0, 0));
points.push(new THREE.Vector3(0, 2, 0));
points.push(new THREE.Vector3(2, 0, 0));

// Çizgi geometrisini oluştur
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

// Malzeme oluştur
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });

// Çizgiyi oluştur
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

8. Etkileşim ve Kontroller

Kullanıcıların 3B sahnenizle etkileşim kurmasına izin vermek için kontroller ekleyebilirsiniz:

// OrbitControls'ü içe aktar
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Kontrolleri oluştur
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Pürüzsüz sönümleme efekti ekle
controls.dampingFactor = 0.05;

// Animasyon döngüsünü güncelle
function animate() {
    requestAnimationFrame(animate);
    
    // Kontrolleri güncelle
    controls.update();
    
    renderer.render(scene, camera);
}

9. 3B Modelleri Yükleme

Blender gibi yazılımlarda oluşturulan modelleri içe aktarabilirsiniz:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load(
    'path/to/model.gltf',
    // Yüklendiğinde çağrılır
    function(gltf) {
        scene.add(gltf.scene);
    },
    // Yükleme sırasında çağrılır
    function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% yüklendi');
    },
    // Hata durumunda çağrılır
    function(error) {
        console.error('Bir hata oluştu', error);
    }
);

10. Hata Ayıklama ve Performans İpuçları

İstatistik Paneli

import Stats from 'three/examples/jsm/libs/stats.module.js';

const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
    requestAnimationFrame(animate);
    stats.begin();
    
    // Animasyon kodunuz burada
    
    stats.end();
    renderer.render(scene, camera);
}

Performans İpuçları

Geometry yerine BufferGeometry kullanın (kullanımdan kaldırılmıştır)
Mümkün olduğunda malzemeleri ve geometrileri yeniden kullanın
Daha iyi GPU kullanımı için renderer.powerPreference = 'high-performance' ayarlayın
Kamera görünümü dışında kalan nesneleri gizlemek için Object3D.frustumCulled = true kullanın
Mümkün olduğunda daha az çokgen kullanarak model karmaşıklığını optimize edin

Sonuç

Artık ortamınızı kurmaktan etkileşimli 3B sahneler oluşturmaya kadar Three.js'nin temellerini öğrendiniz. Bu sadece başlangıç; Three.js, çarpıcı 3B web deneyimleri oluşturmak için çok çeşitli özellikler sunar.

Bilginizi derinleştirmek için, resmi Three.js belgelerini ve örnekler galerisini keşfedin. Topluluk ayrıca forumlarda ve GitHub'da aktiftir ve her seviyedeki geliştiriciler için kaynaklar ve destek sağlar.

Unutmayın, öğrenmenin en iyi yolu denemektir. Basit projelerle başlayın ve yavaş yavaş daha karmaşık sahneler üzerinde çalışın. Pratik ve sabırla, kısa sürede etkileyici 3B web deneyimleri oluşturacaksınız!

Three.js ile mutlu kodlamalar!

button