React-Three-Fiber ile Sahne Özelleştirme: useFrame, Shader ve Kontroller

Önceki yazılarımda React-Three-Fiber (R3F) ile temel bir 3D sahne oluşturmuş, dönen bir küp ve GLTF/GLB modelleri entegre ederek sahne kurulumunu öğrenmiştik.

Sonrasında Drei kütüphanesiyle sahnelerimizi görsel olarak zenginleştirmiş, performans optimizasyonu için bazı pratik ipuçları paylaşmıştık.

Bu yazıda artık bir adım daha ileri giderek sahnemizi daha dinamik, etkileşimli ve özelleştirilebilir hale getireceğiz.

OrbitControls dışında farklı kontrol yöntemleri, useFrame ile animasyon mantığı ve shader kullanarak özel materyaller oluşturmayı ele alacağım.

Kontrollerin Özelleştirilmesi

R3F projelerinde en sık kullanılan bileşenlerden biri OrbitControls olsa da, bazı durumlarda daha özgür veya özel kontrol davranışlarına ihtiyaç duyabiliriz.

Örneğin; first-person görünüm, klavye tabanlı hareket veya belirli eksenlerde kısıtlı dönüş gibi durumlarda manuel kontrol mantığını kullanmak gerekir.

Aşağıda kamerayı klavye girişleriyle hareket ettirmek için basit bir örnek oluşturalım:

"use client";
import { useThree } from '@react-three/fiber'
import { useEffect } from 'react'

function CustomControls() {
  const { camera } = useThree()

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // WASD ile kamera hareketi
      if (e.key === 'w') camera.position.z -= 0.1
      if (e.key === 's') camera.position.z += 0.1
      if (e.key === 'a') camera.position.x -= 0.1
      if (e.key === 'd') camera.position.x += 0.1

      // Yukarı/aşağı hareket için Q/E
      if (e.key === 'q') camera.position.y += 0.1
      if (e.key === 'e') camera.position.y -= 0.1
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [camera])

  return null
}

Bu kontrol yapısı ile sahnede özgür hareket sağlayabilirsiniz. Örneğin; “first-person” kamera deneyimi oluşturabilir veya pointer lock ekleyerek oyun tarzı hareket mantıkları kurabilirsiniz.

useFrame ile Animasyon

Bu konuya önce ki yazılarımızda değinsek de üstünden tekrar geçmek istedim.

useFrame, R3F’in en güçlü hook’larından biridir. Her render karesinde çalışır ve sahnedeki objelerin zaman bazlı güncellemelerini kontrol etmemizi sağlar.

Basit bir dönen küp örneği:

"use client";
import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Mesh } from 'three'

function RotatingBox() {
  const ref = useRef<Mesh>(null)

  useFrame((state, delta) => {
    if (ref.current) {
      // Delta kullanarak FPS'den bağımsız animasyon
      ref.current.rotation.y += delta
      ref.current.rotation.x += delta
      ref.current.rotation.z += delta
    }
  })

  return (
    <mesh ref={ref} position={[2, 0, 0]}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}

Not: delta değeri frame süresine göre değiştiğinden, bu sayede animasyonlar yüksek FPS’li cihazlarda da düşük FPS’li cihazlarda da aynı hızda görünür.

Bu yaklaşımı yalnızca rotasyon değil, pozisyon değişimi, ışık yoğunluğu, materyal rengi gibi birçok dinamik etki için kullanabilirsin.

Shader & Özel Materyal Kullanımı

Standart materyaller çoğu durumda yeterli olur, ancak sahnede ışığa duyarlı, dinamik veya dalgalı yüzey efektleri oluşturmak istediğimizde shaderMaterial çok işe yarar. Bu yöntem, shader kodlarını (GLSL) kullanarak tamamen kendi materyalimizi tanımlamamıza olanak tanır.

Aşağıda hem vertex hem fragment aşamasını içeren bir “dalgalanan yüzey” örneği yapalım:

"use client";
import { shaderMaterial } from '@react-three/drei'
import { extend, useFrame } from '@react-three/fiber'
import { useRef } from 'react'
import * as THREE from 'three'

// Özel shader materyali tanımla
const WaveMaterial = shaderMaterial(
  { 
    uTime: 0,
    uColor: new THREE.Color(0.2, 0.6, 1.0)
  },
  // Vertex Shader - geometriyi değiştirir
  `
  uniform float uTime;
  varying vec2 vUv;
  varying float vWave;

  void main() {
    vUv = uv;

    vec3 pos = position;
    // Sinüs dalgası ile yüzeyi deforme et
    float wave = sin(pos.x * 4.0 + uTime) * sin(pos.y * 3.0 + uTime * 0.5) * 0.3;
    pos.z += wave;
    vWave = wave;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
  }`,
  // Fragment Shader - renkleri belirler
  `
  uniform vec3 uColor;
  varying vec2 vUv;
  varying float vWave;

  void main() {
    // Dalga yüksekliğine göre renk değiştir
    vec3 color = uColor + vWave * 0.5;
    gl_FragColor = vec4(color, 0.8);
  }`
)

// Materyali R3F'e kaydet
extend({ WaveMaterial })

// TypeScript için materyal tipini genişlet
// Bu kodun işlevi waveMaterial'in JSX içinde kullanılabilmesini sağlamak
declare module '@react-three/fiber' {
  interface ThreeElements {
    waveMaterial: any
  }
}

function WaveMesh() {
  const materialRef = useRef<any>(null)

  useFrame((state, delta) => {
    if (materialRef.current) {
      // Zamanı güncelle - dalga animasyonu için
      materialRef.current.uTime += delta
    }
  })

  return (
    <mesh position={[-2, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}>
      <planeGeometry args={[2, 2, 32, 32]} />
      <waveMaterial ref={materialRef} transparent />
    </mesh>
  )
}

Bilgi: Bu örnekteki shaderMaterial fonksiyonuna verdiğimiz kodlar **GLSL (OpenGL Shading Language)** ile yazılmıştır.

Yani JavaScript değil, GPU üzerinde çalışan bir dil.

Shader’lar iki aşamadan oluşur:

Vertex Shader:

• Her bir noktanın (vertex) konumunu değiştirir.
• Burada sinüs dalgasıyla geometri yüzeyini deforme ediyoruz.

Fragment Shader:

• Her pikselin rengini belirler.
• Bu örnekte dalga yüksekliğine göre renk tonları hesaplanıyor.

Ayrıca useFrame ile her frame’de uTime değişkenini artırarak dalgaların sürekli hareket etmesini sağlıyoruz. Bu sayede yüzey, sanki su dalgalanıyormuş gibi akıcı bir animasyon kazanıyor.

Sonuç

Bu yazıda R3F ile sahnemizi daha etkileşimli ve özgün hale getirmek için custom controls, useFrame tabanlı animasyonlar ve shader tabanlı materyal özelleştirmeleri üzerinde durduk.

Bu teknikler, özellikle ileri seviye projelerde yaratıcılığı ön plana çıkarmak ve sahneleri daha “canlı” hale getirmek için güçlü araçlar sunar.

Yeni konularda görüşmek üzere!