JavaScript’te Three.js ile 3D Modelleme: Adım Adım Rehber
Three.js, JavaScript kullanarak web üzerinde 3D grafikler oluşturmak için en popüler kütüphanelerden biridir. Three.js ile 3D modelleme, web uygulamaları için dinamik ve etkileşimli grafikler oluşturmanızı sağlar. Bu yazıda, Three.js ile nasıl 3D modelleme yapılacağına dair detaylı bir rehber sunacağız.
1. Three.js Nedir?
Three.js, JavaScript ile 3D grafikler oluşturmak için kullanılan açık kaynaklı bir kütüphanedir. WebGL üzerinde çalışan Three.js, tarayıcıda gerçek zamanlı 3D grafikler ve animasyonlar oluşturmanızı sağlar. Three.js, 3D grafiklerin görsel açıdan etkileyici ve interaktif olmasını sağlayan birçok araç sunar.
Three.js ile:
- 3D modeller oluşturabilir,
- Işık, gölge ve malzeme efektleri ekleyebilirsiniz.
- 3D animasyonlar yapabilir ve etkileşimli sahneler tasarlayabilirsiniz.
2. Three.js ile 3D Modelleme İçin Gerekli Araçlar
2.1. Three.js Kütüphanesinin Yüklenmesi
Öncelikle, Three.js kütüphanesini projemize dahil etmemiz gerekiyor. Bunun için npm kullanarak kütüphaneyi yükleyebiliriz veya direkt olarak bir CDN bağlantısı ile yükleme yapabiliriz.
CDN ile Three.js Yükleme:
<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>
npm ile Yükleme:
npm install three
2.2. Gerekli HTML Yapısı
Three.js ile 3D modelleme yapmak için basit bir HTML yapısına ihtiyacımız var. Aşağıdaki gibi bir HTML dosyası oluşturabilirsiniz:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js 3D Modelleme</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>
<script src="app.js"></script>
</body>
</html>
3. Three.js ile Basit Bir 3D Sahne Oluşturma
Şimdi, Three.js ile basit bir 3D sahne oluşturalım. İlk olarak bir kamera, sahne, ışık ve bir küp ekleyeceğiz.
app.js:
// 1. Sahne Oluşturma
const scene = new THREE.Scene();
// 2. Kamera Oluşturma
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 3. WebGL Renderer Oluşturma
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 4. Küp Geometri ve Malzeme Oluşturma
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
// 5. Küp'ü Sahneye Ekleme
scene.add(cube);
// 6. Kamera Pozisyonu
camera.position.z = 5;
// 7. Animasyon Döngüsü
function animate() {
requestAnimationFrame(animate);
// Küp'ün Dönmesini Sağlama
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Sahneyi Render Etme
renderer.render(scene, camera);
}
// Animasyonu Başlatma
animate();
Bu basit örnek, bir küp oluşturur ve onu döndüren bir animasyon başlatır.
4. Three.js ile 3D Modelleme: Geometri ve Malzeme
4.1. Geometri Çeşitleri
Three.js, birçok farklı geometrik şekil oluşturmanıza imkan verir. Bunlar arasında:
- BoxGeometry: Küp
- SphereGeometry: Küre
- CylinderGeometry: Silindir
- TorusGeometry: Halka
- PlaneGeometry: Düzlem
Her bir geometrik şekil, THREE.Geometry sınıfının bir alt sınıfıdır ve parametrelerle şeklin boyutlarını ayarlayabilirsiniz.
4.2. Malzeme Türleri
Three.js ile 3D modellerinize farklı malzemeler ekleyebilirsiniz. Örnek olarak:
- MeshBasicMaterial: Işık etkisi almadan düz renk
- MeshLambertMaterial: Işık etkisi alan ve daha mat bir yüzey
- MeshPhongMaterial: Işık ve yansıma efekti ile daha parlak bir yüzey
5. Three.js ile 3D Modelleme: Işık ve Kamera
5.1. Işıklandırma
Three.js’te ışıklandırma oldukça önemli bir yer tutar. Işıklandırma, sahnedeki objelerin görünürlüğünü etkiler ve gerçekçi bir görünüm sağlar. Aşağıda en yaygın kullanılan ışık türleri:
- AmbientLight: Genel, yumuşak ışık
- DirectionalLight: Güneş ışığı gibi, belirli bir yönden gelen ışık
- PointLight: Noktasal ışık kaynağı
Örnek Işıklandırma:
// AmbientLight Oluşturma
const ambientLight = new THREE.AmbientLight(0x404040); // Yumuşak beyaz ışık
scene.add(ambientLight);
// DirectionalLight Oluşturma
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
5.2. Kamera Kullanımı
Three.js'te kamera, sahnenin nasıl görüneceğini belirler. Genellikle iki tür kamera kullanılır:
- PerspectiveCamera: Gerçekçi bir perspektif sağlar (mesafeler küçülür).
- OrthographicCamera: Paralel görünüm sunar (mesafeler aynı kalır).
Kamera ve Perspektif:
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
6. Three.js ile İleri Seviye Özellikler
6.1. 3D Model İçe Aktarma
Three.js’te dışarıdan 3D modelleri içe aktarmak için, .obj, .fbx, .gltf gibi dosya formatlarını kullanabilirsiniz. Bu dosyalar, Three.js’te uygun yükleyiciler ile projeye dahil edilebilir.
Örneğin, .gltf dosyasını yüklemek için:
const loader = new THREE.GLTFLoader();
loader.load('model.gltf', function(gltf) {
scene.add(gltf.scene);
});
6.2. 3D Animasyonlar
Three.js ile animasyonlar da oldukça kolaydır. Keyframe animasyonları ve bone-based animasyonlarla karakter ve nesneleri hareket ettirebilirsiniz.
7. Sonuç
Three.js ile 3D modelleme, web projelerinizi bir adım öteye taşıyacak çok güçlü bir araçtır. Bu yazıda temel bir Three.js sahnesi oluşturarak, geometri, malzeme, ışıklandırma, kamera kullanımı ve animasyonları keşfettik. Three.js, güçlü özellikleri sayesinde, 3D modelleme ve görselleştirme projelerinde kullanabileceğiniz çok sayıda imkan sunar.
Yorum Yap