Giriş

Merhaba, ben Baturalp.

Bu yazıda, Elfatek AR-GE departmanında yaptığım staj süresince üzerinde çalıştığım Mobil Vinç Kumandası ve Operator Joystick için 3D ürün konfigürasyonu projesinden bahsetmek istiyorum.

Proje kapsamında kullanıcıların ürünleri web tarayıcısı üzerinden üç boyutlu olarak görüntüleyebildiği, farklı donanım seçeneklerini seçerek kendi konfigürasyonlarını oluşturabildiği ve hazırladıkları tasarımı teklif sürecine aktarabildiği bir web uygulaması geliştirildi. Ben de bu süreçte uygulamanın arayüz geliştirme, 3D model yönetimi ve konfigürasyon altyapısı üzerinde çalıştım.

Yazının devamında projenin amacını, kullanılan teknolojileri ve geliştirme sürecini paylaşacağım.

Projenin Amacı

Mobil Vinç Kumandası ve Operator Joystick ürünleri farklı kullanım alanlarına göre çeşitli donanım seçenekleriyle üretilebiliyor. Bu yüzden müşterinin istediği ürünü seçmesi ve nasıl görüneceğini önceden inceleyebilmesi önem taşıyor.

Bu projede amaç, kullanıcıların herhangi bir program kurmadan doğrudan web tarayıcısı üzerinden ürünü üç boyutlu olarak görüntüleyebilmesi, farklı donanım seçeneklerini deneyebilmesi ve kendi konfigürasyonunu oluşturabilmesiydi.

Kullanılan Teknolojiler

Projeyi geliştirirken aşağıdaki teknolojilerden yararlandım.

• React
• Vite
• JavaScript
• Three.js
• React Three Fiber
• Drei
• GLB

React ile kullanıcı arayüzünü geliştirdim. Three.js ve React Three Fiber sayesinde 3D modelleri web sayfasında görüntüleyip yönetebildim. Drei kütüphanesini ise kamera kontrolleri ve sahne yönetimi gibi işlemleri kolaylaştırmak için kullandım.

Sistemin Genel Yapısı

Uygulama iki farklı ürün için hazırlandı.

• Mobil Vinç Kumandası
• Operator Joystick

Kullanıcı önce istediği ürünü seçiyor. Daha sonra seçilen ürünün 3D modeli yükleniyor ve kullanıcı arayüz üzerinden istediği parçaları değiştirerek ürünü kendi ihtiyaçlarına göre düzenleyebiliyor.

Yapılan her seçim anında modele yansıyor. Böylece kullanıcı yaptığı değişiklikleri beklemeden görebiliyor.

Mobil Vinç Kumandası Konfigüratörü

İlk olarak Mobil Vinç Kumandası için konfigürasyon ekranı geliştirildi.

Kumanda üzerindeki butonlar, joystickler ve anahtarlar belirlenen slotlara yerleştirilebiliyor. Her slot yalnızca kendisiyle uyumlu parçaları kabul edecek şekilde tasarlandı. Böylece geçersiz kombinasyonların seçilmesi engellendi.

Modelin rahat incelenebilmesi için kamera hareketleri, yakınlaştırma ve döndürme ayarları da düzenlendi.

Operator Joystick Konfigüratörü

Daha sonra aynı yapı Operator Joystick için uyarlandı.

Bu ürün üzerinde üst kontrol bölgeleri, thumbwheel seçenekleri, buton yerleşimleri, trigger tipi ve alt kapak seçenekleri kullanıcı tarafından değiştirilebiliyor.

Seçimler yapıldıkça model de anında güncelleniyor ve ortaya çıkan görünüm kullanıcıya gösteriliyor.

3D Model Yönetimi

Projede kullanılan modeller GLB formatındaydı.

Modeller yüklendikten sonra kamera konumu, ışıklandırma ve yakınlaştırma ayarları düzenlenerek ürünlerin farklı açılardan rahat incelenebilmesi sağlandı. Ayrıca farklı ekran boyutlarında modelin düzgün görünmesi için çeşitli düzenlemeler yapıldı.

Dinamik Konfigürasyon Kuralları

Projede sadece görsel değişiklikler yapılmadı. Kullanıcının yaptığı seçimlerin birbirleriyle uyumlu olması da kontrol edildi.

Örneğin Mobil Vinç Kumandasında bazı parçalar yalnızca belirli slotlara yerleştirilebiliyor. Operator Joystick tarafında ise seçilen güvenlik tipine göre aktif olan bölgeler ve kullanılabilecek trigger seçenekleri otomatik olarak değişiyor.

Bu sayede kullanıcı yalnızca geçerli konfigürasyonlar oluşturabiliyor.

Tasarımın Kaydedilmesi ve Teklif Süreci

Kullanıcının yaptığı seçimler tarayıcı üzerinde saklanıyor. Böylece sayfa kapatılsa bile konfigürasyon korunabiliyor.

Konfigürasyon tamamlandıktan sonra ürün bilgileri ve oluşturulan görseller teklif ekranına aktarılıyor. Böylece hazırlanan tasarım teklif sürecinde kullanılabiliyor.

Bu proje benim için oldukça öğretici ve değerli bir deneyim oldu. Daha önce teorik olarak öğrendiğim birçok konuyu gerçek bir proje üzerinde uygulama fırsatı buldum. Özellikle React ve Three.js teknolojileriyle çalışırken hem teknik becerilerimi geliştirdim hem de bir yazılım projesinin fikir aşamasından başlayarak tasarım, geliştirme ve kullanılabilir bir ürüne dönüşme sürecini yakından deneyimleme şansı elde ettim. Staj süresince edindiğim bilgi ve deneyimlerin, gelecekteki meslek hayatımda bana önemli katkılar sağlayacağına inanıyorum.