TEKNOLOJİK
ARAŞTIRMALAR
Tekstil Teknolojileri Elektronik Dergisi
Cilt: 8, No: 1, 2014 (1-7)
Electronic Journal of Textile Technologies
Vol: 8, No: 1, 2014 (1-7)
www.teknolojikarastirmalar.com
e-ISSN:1309-3991
Makale
(Article)
Üç Boyutlu Modellerin Javascript Programlama Dili Yardımıyla İnternet
Ortamına Alınması
Bekir AKSOY1, Mehmet DAYIK2,
1
2
Süleyman Demirel Üniversitesi Senirkent MYO Bilgisayar Teknolojileri Bölümü Isparta/TÜRKİYE
Süleyman Demirel Üniversitesi Mühendislik Fakültesi Tekstil Mühendisliği Bölümü Isparta/TÜRKİYE
bekiraksoy@sdu.edu.tr mehmetdayik@sdu.edu.tr
Özet
Üç boyutlu model oluşturmak yada üç boyutlu tasarım programları ile oluşturulan modellerin internet sayfasına
aktarılması için kullanılan yapılardan birisi de three.js’dir. Tasarım programları ile çizilmiş olan modellerin
internet sayfasına aktarımı esnasında kullanılan three.js yapısı içerisinde yer alan konumlandırma, döndürme,
boyutlandırma, koordinat sistemi, ışık kaynakları ve kamera yapıları kullanılmıştır. Bu çalışmada tasarım
programları ile çizilmiş olan modellerin three.js yapısı kullanılarak internet ortamına aktarılması sağlanmıştır.
Anahtar Kelimeler: Html 5, jquery, javascript, üç boyutlu model
Dressed in three-dimensional models of textile products displayed on
the internet
Abstract
To create three-dimensional models or models created with three-dimensional design software to the web page of
one of the structures used for transferring the three.js is. The pattern drawn by the design of the program to the
web page that is used during transfer structure located within three.js positioning, rotating, sizing, coordinate
system, the structure of light sources and cameras are used. In this study, drawn with design programs using the
structure of the models three.js have been transferred to the internet environment.
Keywords : : Html 5, jquery, javascript, three-dimensional model
Bu makaleye atıf yapmak için
Aksoy B., Dayık M.,“Üç Boyutlu Modellerin Javascript Programlama Dili Yardımıyla İnternet Ortamına Alınması” Tekstil Teknolojileri Elektronik Dergisi 2014, 8(1) 1-7
How to cite this article
Aksoy B., Dayık M.,“ Dressed in three-dimensional models of textile products displayed on the internet” Electronic Journal of Textile Technologies, 2014, 8 (1) 1-7
1
Aksoy B., Dayık M.
Teknolojik Araştırmalar: TTED 2014 (1) 1-7
1. GİRİŞ
İnternet teknolojilerinde kullanılan yapılardan birisi olan asp.net platformudur. Bu platform içerisinde yer
alan MIME türü dosya kimlik tanımlayıcısı, üç boyutlu modellerin dosya formatlarının internet sayfasına
tanıtılması için kullanılmaktadır. Örneğin bir kullanıcı internet sayfasını ziyaret ettiğinde üç boyutlu
modellerin görüntülenmesi için kullanılan dosya formatlarının MIME türü olarak internet sunucusunda ve
asp.net platformuyla hazırlanan projenin içerisindeki web.config ayar dosyasının içerisinde tanımlı olması
gerekmektedir.
Tasarım programları ile hazırlanan modellerin MIME türü dosya kimlik tanımlayıcısı ile tanımlanıp
internet ortamına alınabilmesi için OBJ (Object) dosya formatı olarak dışarıya alınması gerekmektedir.
OBJ dosya formatı olarak dışarıya alınan model dosyasının yanında, MTL uzantılı bir dosya da üretilir.
Bu dosya üç boyutlu modele ait resim dosyalarının yolunu belirtmek için kullanılmaktadır. Bu MTL
dosyaları içerisinde yer alan resim dosyalarının dizin yolları arasında aynı zamanda kıyafet desenin dizin
yolu da bulunmaktadır.
IIS (Internet Information Service) yapısı kullanılarak üç boyutlu modellerin internet sayfasında
görüntülenmesini sağlamak için; internet sayfasına MIME türü olarak OBJ ve MTL dosya formatlarının
eklenerek IIS (Internet Information Server) yöneticisi çalıştırılması gerekmektedir.
2. IIS (Internet Information Server) MIME Türü Yapılandırması
IIS yapısı kullanılarak üç boyutlu modellerin gösterimini sağlayacak olan internet sayfasına MIME türü
olarak OBJ ve MTL dosya formatlarını eklemek için öncelikle IIS yöneticisi çalıştırılır. Bu işlemi
gerçekleştirmek için Windows işletim sisteminde Başlat – Çalıştır penceresine “inetmgr” komutu
yazılarak tamam butonuna tıklanıldığında Şekil 1’deki görülen IIS yöneticisi penceresi ekrana
gelmektedir.
Şekil 1. IIS MIME Türleri
Üç boyutlu modeli gösterecek olan internet sitesi IIS Yöneticisi penceresindeki sol kısımda bulunan
siteler bölümünden seçilmesi gerekmektedir. Bunun akabinde şekil 1’de kırmızı kare ile gösterilen MIME
türleri butonu tıklandığında şekil 2’deki pencere ekrana gelmektedir.
2
Teknolojik Araştırmalar: TTED 2014 (1) 1-7
Üç Boyutlu Modellerin Javascript Programlama Dili
Şekil 2. IIS Yönetici MIME Türleri Penceresi
Bu pencerede sağ tuş ekle seçeneği seçildiğinde şekil 3’deki gibi bir pencere açılmaktadır.
Şekil 3. MIME Türü Ekleme Penceresi
Bu pencerede “Dosya Adı Uzantısı” olarak üç boyutlu modelimize ait OBJ dosyalarının uzantısı olan
“.obj” ifadesi yazılması gerekmektedir “MIME Türü” olarak ise MIME türünün genel ifadesi olan
“Application/octet-stream” ifadesi yazılıp tamam butonu ile MIME türü IIS’e eklenmektedir. Bu işlem
MTL dosyaları içinde tekrarlanması gerekmektedir. Bu işlemlerden sonra OBJ ve MTL dosyaları IIS’e
eklenerek internet sayfasında kullanılması mümkün olmaktadır.
3. Three.js Projesi ile OBJ ve MTL Dosyalarının İnternet Ortamına Alınması
Üç boyutlu modelin three.js projesi kullanılarak internet ortamına alınabilmesi için aşağıdaki kodlar
three.js projesine eklenmiştir.
<script src="../build/three.js"></script>
Kod satırı ile three.js projemizi html sayfamıza tanıtılması sağlanmaktadır.
<script src="../examples/js/loaders/MTLLoader.js"></script>
kod satırı ile three.js projemize ait olan ve .MTL dosyalarının okunması sağlanmakta ve okutulan
javascript dosyasını oluşturulan e-ticaret sitesine tanıtılmasını sağlanmaktadır.
<script src="../examples/js/loaders/OBJMTLLoader.js"></script>
3
Aksoy B., Dayık M.
Teknolojik Araştırmalar: TTED 2014 (1) 1-7
kod satırı ile three.js oluşturulan e-ticaret sitesindeki projeye ait olan ve .MTL dosyası ve .OBJ
dosyalarını okuyan javascript dosyasının e-ticaret sitesine tanıtımı yapılmıştır.
<script src="../examples/js/Detector.js"></script>
kod satırı ile internet tarayıcısının WebGL desteği olup olmadığının kontrolü yapılmaktadır. Ayrıca
javascript kodlarının bulunduğu javascript dosyasını e-ticaret sitesine tanıtımı gerçekleştirilmektedir.
camera = new THREE.OrthographicCamera(-300, 300, 145, -145, 0.1, 20000);
kod satırı ile hazırlanan three.js projesinin OrthographicCamera özelliğini kullanılmaktadır. Bu
fonksiyona gönderilen değerler sırasıyla sol, sağ, üst, alt, yakınlık ve uzaklık değerlerini temsil
etmektedir.
camera.position.z = 100;
Kod satırı ile kameranın z eksenindeki konumunu ayarlanmaktadır.
scene = new THREE.Scene();
Kod satırı ile yeni bir sahne oluşturulmaktadır.
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 1, 1, 1 ).normalize();
Kod satırı ile oluşturulan nesneye (obj) ön tarafına ışık uygulanmasını sağlanmıştır.
scene.add( directionalLight );
Kod satırı ile sahneye ışık eklenmektedir.
var directionalLight2 = new THREE.DirectionalLight( 0xffeedd ); // arka taraf ışıgı
directionalLight2.position.set( -1, -1, -1 ).normalize();
Kod satırı ile oluşturulan nesnenin (obj) arka tarafına ışık uygulanması sağlanmıştır.
scene.add( directionalLight2 );
Kod satırı ile ışık sahneye eklenmektedir. Eğer ışıklarımızı sahneye eklemese idi oluşturulan nesne
ekranda siyah görünüme sahip olurdu.
var loader = new THREE.OBJMTLLoader();
kod satırı ile three.js projesine ait olan bir objmtlloader nesnesi oluşturulmaktadır.
loader.load( '../marv/sisman/l.obj', '../marv/sisman/l.mtl', function ( object ) {
kod satırı ile oluşturulan objmtlloader nesnesine .OBJ dosyasını ve bu .OBJ dosyasına ait olan .MTL
dosyasının yolu belirtilmektedir. Oluşturulan uygulama ile istenilen fonksiyon oluşturulmaktadır.
Buradaki MTL dosyasında gömlek desenini oluşturan resim dosyasının yolu da bulunmaktadır. Gömleğin
desenini değiştirmek istediğimizde .MTL dosyasının içindeki desen resim dosyasının yolunu
değiştirmemiz yeterli olacaktır.
object.position.y = - 70;
kod satırı oluşturulan nesnenin başlangıçtaki y değerini değiştirmek için kullanılmaktadır.
4
Teknolojik Araştırmalar: TTED 2014 (1) 1-7
Üç Boyutlu Modellerin Javascript Programlama Dili
object.scale.set(0.1,0.1,0.1);
Kod satırı ile nesnenin boyutlarını %10 oranında küçültülmektedir. Tasarlanan üç boyutlu model e-ticaret
sitesine
sığamayacak
kadar
büyük
olduğundan
dolayı
küçültme/büyültme
(scale)
işleminin
gerçekleştirilmesi gerekmektedir.
scene.add( object );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
camera.aspect = window.innerWidth / window.innerHeight;
Kod satırları, kameranın en-boy oranını hazırlanan e-ticaret sitesinin en-boy oranına göre ayarlama işlemi
gerçekleştirilmektedir.
camera.updateProjectionMatrix();
Kod satırı ile kamerada yapılmış olan değişikliklerin kaydedilmesini sağlanmaktadır.
Var timer = new Date().getTime() * 0.0005;
Kod satırı ile zamanlayıcı (timer) oluşturulmaktadır. Bu zamanlayıcı ile nesnenin e-ticaret sitesi üzerinde
dönüşü sağlanmaktadır.
camera.position.x = Math.floor(Math.cos( timer ) * 200);
Kod satırı ile kameranın x eksenindeki dönüş pozisyonun zamanlayıcıya bağlı olarak dönüşü ile ilgili
ayarlar yapılmaktadır.
camera.position.y += ( - mouseY - camera.position.y ) * .1;
Kod satırında kameranın fare yardımıyla y eksenindeki dönüş pozisyonu ile ilgili ayarlar yapılmaktadır.
camera.position.z = Math.floor(Math.sin( timer ) * 200);
Kod satırı ile kameranın z ekseninde zamanlayıcıya bağlı olarak dönüşü ile ilgili ayarlar yapılmaktadır.
4. OBJ ve MTL Dosyalarının Çalışma Anında Değiştirilmesi
Üç boyutlu modellerin üzerindeki kıyafetin desenlerini değiştirmek için MTL dosyası içerisinde yer alan
resim yollarında değişiklik yapılmak istenildiğinde ve değişiklik yapıldığında internet sayfasının ön
belleğinde değişiklik yapılmadan önceki MTL dosyası mevcut olduğundan, yapılan değişik modele
yansımamaktadır. Bu nedenle MTL dosyalarında değişiklik yapıldığında guid bir sayı üretilip MTL
dosyasının ismine bu guid sayı verilir. Örneğin dosyamız “0c2e8fa9255b412983e9d787ca785d25.mtl”
isimde kaydedilir. Böylece MTL dosyalarına farklı desenler uygulandığında çalışma anında değişiklik
modele yansıtılmış olmaktadır. Bu MTL dosyasının yolunu değiştirebilmek için sayfaya eklenecek olan
5
Aksoy B., Dayık M.
Teknolojik Araştırmalar: TTED 2014 (1) 1-7
OBJ ve MTL dosyasının yolunu içeren javascript kodunu tasarım tarafına literal nesnesi eklenir ve kod
tarafında bu literal nesnesine javascript kodu yazılır. MTL değiştirilmek istenildiğinde bu literal nesnesi
içerisine yazılan javascript kodu güncellenir. Bunu gerçekleştirebilmek için ise aşağıda verilen kod
yazılmıştır.
ltrGoster.Text
+=
"loader.load('/marv/"
+
drpModel.SelectedItem.Text
+
"/"
+
drpBeden.SelectedItem.Text + ".obj', '" + mtl + "', function (object) { \n";
Üç boyutlu modelin OBJ ve MTL dosyalarının IIS’de MIME türü eklenmesinin yanı sıra sitemizin
web.config dosyasında da aşağıdaki kod satırının da eklenerek OBJ ve MTL dosyalarının internet
sayfasına tanıtılması gerekmektedir.
<system.webServer>
<staticContent>
<mimeMap fileExtension=".obj" mimeType="application/octet-stream"/>
<mimeMap fileExtension=".mtl" mimeType="application/octet-stream"/>
</staticContent>
</system.webServer>
Bu işlemlerden sonra şekil 4’de de görüldüğü gibi üç boyutlu modele farklı desenleri giydirmek mümkün
olmaktadır.
Şekil 4. Üç boyutlu modele kıyafet giydirilip desenlerinin değiştirilmesi
5. SONUÇ
Three.js yapısı ile üç boyutlu modeller internet sayfasına alınarak görüntülenmiştir. Böylece çeşitli çizim
programları ile tasarlanmış olan modeller three.js yapısı ile tek bir platformda birleştirilerek internet
tarayıcında görüntülenebildiği görülmüştür. Bu çalışmada three.js projesi javascript yapısını kullandığı
için OBJ dosyaları güncellenerek farklı bedenler, MTL dosyaları güncellenerek de farklı desenler hızlı ve
kolay bir şekilde kullanıcıya gösterilmiştir.
6
Teknolojik Araştırmalar: TTED 2014 (1) 1-7
Üç Boyutlu Modellerin Javascript Programlama Dili
6. KAYNAKLAR
1. http://www.tuncaydemirer.com
2. http://www.threejs.org
3. Algan, S., İstanbul 2012, Her Yönüyle C# 4.0
4. http://www.jquery.com
5. http://www.leventkaragol.com
6. http://learningthreejs.com/
7. http://blog.teamtreehouse.com/the-beginners-guide-to-three-js
8. http://fhtr.org/BasicsOfThreeJS/#1
9. http://stackoverflow.com/questions/18319154/with-three-js-can-i-attach-information-to-an-objectsuch-as-a-url
10. http://www.smartjava.org/content/render-geographic-information-3d-threejs-and-d3js
7
© Copyright 2024 Paperzz
