Three.js Nedir? 3D Web Sitesi Geliştirme

Three.js, JavaScript tabanlı, açık kaynaklı bir 3D grafik kütüphanesidir. WebGL (Web Graphics Library) teknolojisi üzerine kuruludur ve tarayıcı içinde donanım hızlandırmalı 3D grafikler oluşturmanıza olanak tanır. Web sitelerinde oyunlar, simülasyonlar, animasyonlar, ürün görselleştirmeleri veya sanal gerçeklik deneyimleri yaratmak isteyen geliştiriciler için idealdir.

Three.js’in Temel Özellikleri

• Sahne (Scene), Kamera (Camera) ve Renderer (Render motoru) oluşturma desteği
• Işıklar, gölgelendirme, malzemeler ve doku haritalama
• Hazır geometriler (küp, küre, düzlem vb.) veya harici 3D modeller (.glTF, .OBJ, .FBX) ile çalışma
• Parçacık sistemleri, post-processing efektleri ve shader desteği
• VR (Sanal Gerçeklik) ve AR (Artırılmış Gerçeklik) entegrasyon imkanı
• Fizik motorlarıyla uyumlu (Ammo.js, Cannon.js gibi)

Nerelerde Kullanılır?

• 🎮 Web Tabanlı Oyunlar
• 🛒 3D Ürün Görselleştirme ve E-Ticaret
• 🧠 Eğitim ve Simülasyon Uygulamaları
• 🌍 Sanal Gerçeklik Deneyimleri (WebXR desteği)
• 🎨 Görsel Sanatlar, Etkileşimli Portföyler

Three.js ile 3D Web Sitesi Geliştirme Adımları

1. Proje Hazırlığı

HTML, CSS, JavaScript temel bilgisine sahip olun. Projenize three.js’i ekleyin:

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

Alternatif: NPM ile kurulum

npm install three

2. Temel Yapıyı Kurun

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

3. Nesne Ekleyin

const geometry = new THREE.BoxGeometry();

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

camera.position.z = 5;

4. Animasyon Döngüsü Oluşturun

function animate() {

requestAnimationFrame(animate);

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render(scene, camera);

}

animate();