Three.js ile E-Ticaret İçin 3D Ürün Sahnesi Oluşturma

Three.js Nedir?

Three.js, web tarayıcısında 3D grafik oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. WebGL API'sini soyutlayarak, düşük seviyeli grafik programlama bilgisi gerektirmeden 3D sahneler oluşturmanıza olanak tanır.

model-viewer hazır bir çözüm sunarken, Three.js tam kontrol ve özelleştirme imkanı verir. Kendi ürün görüntüleme deneyiminizi sıfırdan tasarlamak istiyorsanız Three.js doğru seçimdir.

Temel Sahne Kurulumu

Her Three.js uygulaması üç temel bileşene ihtiyaç duyar:

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// Sahne
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf5f5f5);

// Kamera
const camera = new THREE.PerspectiveCamera(
  45, window.innerWidth / window.innerHeight, 0.1, 100
);
camera.position.set(0, 1, 3);

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);

Aydınlatma

Ürün görselleştirmede aydınlatma kaliteyi belirleyen en önemli faktördür:

// Ortam ışığı - genel aydınlık
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);

// Ana ışık - gölge ve hacim
const keyLight = new THREE.DirectionalLight(0xffffff, 1);
keyLight.position.set(5, 5, 5);
scene.add(keyLight);

// Dolgu ışık - gölgeleri yumuşatma
const fillLight = new THREE.DirectionalLight(0xffffff, 0.3);
fillLight.position.set(-5, 3, -5);
scene.add(fillLight);

Daha gerçekçi aydınlatma için HDRI environment map kullanabilirsiniz. RGBELoader ile bir .hdr dosyası yükleyip sahneye uygulayabilirsiniz.

3D Model Yükleme

const loader = new GLTFLoader();
loader.load('urun.glb', (gltf) => {
  const model = gltf.scene;

  // Modeli sahnenin merkezine yerleştir
  const box = new THREE.Box3().setFromObject(model);
  const center = box.getCenter(new THREE.Vector3());
  model.position.sub(center);

  scene.add(model);
});

Kamera Kontrolü

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;  // Yumuşak hareket
controls.dampingFactor = 0.05;
controls.minDistance = 1;       // Minimum zoom
controls.maxDistance = 10;      // Maksimum zoom
controls.maxPolarAngle = Math.PI / 2;  // Zemin altına bakma engeli

Render Döngüsü

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

Performans İpuçları

• Renderer'da powerPreference: "high-performance" ayarlayın
• Gölge haritaları (shadow maps) yalnızca gerekli ise açın
• Draco sıkıştırmalı modeller kullanın ve DRACOLoader entegre edin
• Pencere boyutu değiştiğinde renderer ve kamerayı güncelleyin

Sonuç

Three.js, tam özelleştirme gerektiren 3D ürün görüntüleme projeleri için güçlü bir temeldir. Öğrenme eğrisi model-viewer'a göre daha dik olsa da sunduğu esneklik ve kontrol eşsizdir.