Three.js & Webgl

WebGL nedir ? : ilave eklentilere gerek kalmadan herhangi bir uyumlu tarayıcıda grafik oluşturulmasını sağlayan açık bir web standardıdır.  işin özeti tarayıcı üzerinden grafik

THREE.js nedir ?: webgl kullanmamıza yarayan javascript kütüphanesidir
http://threejs.org/ ana sitesidir  sevdiğim güzel taraflardan birisi açık kaynaktır.Çok güzel dökümantasyonu var

https://www.heroforge.com/  three.js hazırlanan uygulamalardan bir tanesi ama bunu çok beğendim.

http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene buradaki makaleyi inceleyim özet olarak 


                                         ALTYAPI

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.min.js"></script> <script> // Our Javascript will go here. </script> </body> </html>

(kodlar dökümantasyondan alıntıdır, temel altyapımızı oluşturduk)




                                           SAHNE


 var scene = new THREE.Scene();

/* SAHNEMİZİ OLUŞTURDUK */

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); /* BURADA KAMERAMIZIN AÇISINI BELİRLEDİK */ var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); /* pencere ölçüleri */ document.body.appendChild( renderer.domElement );


/* BURADA KAMERAMIZIN AÇISINI BELİRLEDİK */



                         NESNELERİ EKLEYELİM


var geometry = new THREE.BoxGeometry( 1, 1, 1 ); /* KÜP nesnesi X Y Z KORDİNATLARINI BAZ ALIR */ var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );/* rengi */ var cube = new THREE.Mesh( geometry, material ); scene.add( cube );/* ekleme komutu */ camera.position.z = 5;

                              NESNELERİ RENDER ETMEK

function render() { requestAnimationFrame( render );



/* hareketleri yazağımız yer */ renderer.render( scene, camera ); } render();

/* özel fonksiyonumuz var hazır şekilde verilen bu şekilde nesnelere hareket katabiliriz */

                    HAREKET KATALIM O ZAMAN

cube.rotation.x += 0.1; cube.rotation.y += 0.1;

KÜBÜN X VE Y KORDİNATLARINA 0.1 LİK HAREKET VERDİK RENDER FONKSİYONUMUZ O ANİMASYONU ÇALIŞTIRACAKTIR

                             PROJEMİZİN TOPLU HALİ


<html> <head> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.min.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); </script> </body> </html>

YAKINDA BAŞKA KONULARDA GÖRÜŞMEK ÜZERE :)


Türkçe kaynak isterseniz :http://www.jskoleji.com/p/threejs.html









Hiç yorum yok:

Yorum Gönderme