Bu makalemizde, Three.JS ile birlikte gelen temel 3D şekillerin sahneye nasıl eklendiğini  ve ekleme sırasında kullanılan parametrelerin anlamını göreceğiz. Ancak konuya giriş yapmadan önce, 3D dünyasında yeni olanlar için ufak bir ön bilgilendirme gerekebilir.


















Vertex, Polygon, Mesh ??

Vertex kavramı, 2D veya 3D ortamdaki bir noktayı tanımlamak için kullanılır. 2D bir düzlemde Vertex (x,y) koordinatları ile temsil edilirken, 3D bir sahnede (x,y,z) koordinatları ile temsil edilir.

En az 3 adet Vertex'in aralarına, birlikte kapalı bir alan oluşturacak şekilde doğrular çizersek, ortaya çıkan yüzeye polygon denir.

Polygonların bir araya gelmesi ile ortaya çıkan 3D nesneye ise Mesh denir.

Bir önceki makalemizde, sahneye bir küre eklemiştik. Bu küre aslında, polygonlardan oluşan bir Mesh nesnesiydi. Aynı şekilde, bu makale boyunca göreceğimiz diğer 3D şekiller de, yine polygonlardan oluşan Mesh nesneleri olacak.

Three.JS ile birlikte gelen pek çok temel şekil var. Her birini ayrı ayrı ekleyip açıklamaya kalkarsam, sonuna kadar sabredemeyeceğin bir makalenin ortaya çıkacağından korkuyorum. Bu yüzden tüm temel şekilleri tek bir örnek üzerinde ekleyeceğim ve parametreleri ile ilgili kod içerisine yorum satırları ekleyeceğim.

Örneğimizde toplamda 20 şekil olacak ve istesen de hepsini birden ezberleyemezsin. Zaten hepsini de her an kullanacaksın diye bir kural da yok. Burada sadece hangi şekilin nasıl eklendiğini görmüş ol, yeter. İşin düştüğünde buraya tekrar dönüp kopya çekersin (İşin doğrusu ben de hepsini ezbere bilmiyorum).

Kod uzun olduğu için bu sefer bir değişiklik yapalım ve önce çıktıyı görelim. Örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Şekillerin daha net görülmesi için tel kafesin de görüldüğü bir multimatertal kullandım ve bunu her seferinde tanımlamamak için her fonksiyona tek tek geçtim. Sen özellikle Geometry tanımlarına geçilen yarıçap ve segment gibi parametrelere dikkat et.

İlk olarak aşağıdaki kodlarla gerekli olan HTML sayfamızı hazırlayalım.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="three-r61.min.js"></script>
<script src="program.js"></script>
</head>
<body>
</body>
</html>

Ardından aşağıdaki kodlarla "program.js" dosyamızı hazırlayalım.

"use strict";

var renderer, scene, camera;

$(document).ready(function () {

    addContainer();

    setStyle();

    prepareScene();
    
    var material = buildMaterial();

    addCube(material);
    
    addIcosahedron(material);
    
    addOctahedron(material);
    
    addTetrahedron(material);
    
    addSphere(material);
    
    addMultiPartedCube(material);
    
    addMultiPartedIcosahedron(material);
    
    addMultiPartedOctahedron(material);
    
    addMultiPartedTetrahedron(material);
    
    addSemiSphere(material);
    
    addCylinder(material);
    
    addCone(material);
    
    addPyramid(material);
    
    addTorus(material);
    
    addTorusKnot(material);
    
    addPrism(material);
    
    addBrokenCone(material);
    
    addBrokenPyramid(material);
    
    addMultiPartedTorus(material);
    
    addMultiPartedTorusKnot(material);

    animation();

});

function addContainer() {

    $("body").append("
<br>"); } function setStyle() { $("html, body, #Container").css("width", "100%"); $("html, body, #Container").css("height", "100%"); $("html, body, #Container").css("padding", "0"); $("html, body, #Container").css("margin", "0"); $("html, body, #Container").css("overflow", "hidden"); $("html, body, #Container").css("backgroundColor", "#000000"); } function prepareScene() { var container = $("#Container"); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(container.width(), container.height()); container.append(renderer.domElement); scene = new THREE.Scene(); var aspectRatio = container.width() / container.height(); camera = new THREE.PerspectiveCamera(45, aspectRatio, 0.1, 20000); camera.position.set(0, 450, 350); camera.lookAt(new THREE.Vector3(0, 0, 0)); } function buildMaterial() { var material1 = new THREE.MeshBasicMaterial({ color: 0x11ff55 }); var material2 = new THREE.MeshBasicMaterial({ color: 0x119955, wireframe: true, transparent: true }); return [material1, material2]; } function addCube(material) { // Genişlik, yükseklik, derinlik, g. segment sayısı, y. segment sayısı, d. segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.CubeGeometry(50, 50, 50, 1, 1, 1), material); shape.position.set(-200, 50, 100); scene.add(shape); } function addIcosahedron(material) { // Yarıçap var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.IcosahedronGeometry(40), material); shape.position.set(-100, 50, 100); scene.add(shape); } function addOctahedron(material) { // Yarıçap var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.OctahedronGeometry(40), material); shape.position.set(0, 50, 100); scene.add(shape); } function addTetrahedron(material) { // Yarıçap var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.TetrahedronGeometry(40), material); shape.position.set(100, 50, 100); scene.add(shape); } function addSphere(material) { // Yarıçap, g. segment sayısı, y. segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.SphereGeometry(40, 32, 32), material); shape.position.set(200, 50, 100); scene.add(shape); } function addMultiPartedCube(material) { // Genişlik, yükseklik, derinlik, g. segment sayısı, y segment sayısı, d. segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.CubeGeometry(50, 50, 50, 2, 2, 2), material); shape.position.set(-200, 50, 0); scene.add(shape); } function addMultiPartedIcosahedron(material) { // Yarıçap, alt segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.IcosahedronGeometry(40, 1), material); shape.position.set(-100, 50, 0); scene.add(shape); } function addMultiPartedOctahedron(material) { // Yarıçap, alt segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.OctahedronGeometry(40, 1), material); shape.position.set(0, 50, 0); scene.add(shape); } function addMultiPartedTetrahedron(material) { // Yarıçap, alt segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.TetrahedronGeometry(40, 1), material); shape.position.set(100, 50, 0); scene.add(shape); } function addSemiSphere(material) { // Yarıçap, g. segment sayısı, y. segment sayısı, yatay küre başlangıç, yatay küre bitiş, dikey küre başlangıç, dikey küre bitiş var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.SphereGeometry(40, 32, 16, 0, 2 * Math.PI, 0, Math.PI / 2), material); shape.position.set(200, 50, 0); scene.add(shape); } function addCylinder(material) { // Üst yarıçap, alt yarıçap, yükseklik, yuvarlak segment sayısı, yükseklik segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.CylinderGeometry(30, 30, 80, 20, 4), material); shape.position.set(-200, 50, -100); scene.add(shape); } function addCone(material) { // Üst yarıçap, alt yarıçap, yükseklik, yuvarlak segment sayısı, yükseklik segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.CylinderGeometry(0, 30, 100, 20, 4), material); shape.position.set(-100, 50, -100); scene.add(shape); } function addPyramid(material) { // Üst yarıçap, alt yarıçap, yükseklik, yuvarlak segment sayısı, yükseklik segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.CylinderGeometry(0, 30, 100, 4, 4), material); shape.position.set(0, 50, -100); scene.add(shape); } function addTorus(material) { // Torus yarı çap, tüp yarı çapı, torus segment sayısı, tüp segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.TorusGeometry(25, 10, 8, 4), material); shape.position.set(100, 50, -100); scene.add(shape); } function addTorusKnot(material) { // Torus yarı çap, tüp yarı çapı, torus segment sayısı, tüp segment sayısı, p katsayısı, q katsayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.TorusKnotGeometry(30, 8, 60, 10, 2, 3), material); shape.position.set(200, 50, -100); scene.add(shape); } function addPrism(material) { // Üst yarıçap, alt yarıçap, yükseklik, yuvarlak segment sayısı, yükseklik segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.CylinderGeometry(30, 30, 80, 6, 4), material); shape.position.set(-200, 50, -200); scene.add(shape); } function addBrokenCone(material) { // Üst yarıçap, alt yarıçap, yükseklik, yuvarlak segment sayısı, yükseklik segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.CylinderGeometry(10, 30, 100, 20, 4), material); shape.position.set(-100, 50, -200); scene.add(shape); } function addBrokenPyramid(material) { // Üst yarıçap, alt yarıçap, yükseklik, yuvarlak segment sayısı, yükseklik segment sayısı var shape18 = THREE.SceneUtils.createMultiMaterialObject(new THREE.CylinderGeometry(15, 30, 100, 6, 4), material); shape18.position.set(0, 50, -200); scene.add(shape18); } function addMultiPartedTorus(material) { // Torus yarı çap, tüp yarı çapı, torus segment sayısı, tüp segment sayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.TorusGeometry(30, 20, 16, 40), material); shape.position.set(100, 50, -200); scene.add(shape); } function addMultiPartedTorusKnot(material) { // Torus yarı çap, tüp yarı çapı, torus segment sayısı, tüp segment sayısı, p katsayısı, q katsayısı var shape = THREE.SceneUtils.createMultiMaterialObject(new THREE.TorusKnotGeometry(30, 6, 160, 10, 3, 7), material); shape.position.set(200, 50, -200); scene.add(shape); } function animation() { renderer.render(scene, camera); requestAnimationFrame(animation); }
Bu makalede anlatabileceğim daha fazla pek bir şey yok. Three.JS'de temel şekillerin hangi fonksiyonlar vasıtasıyla sahneye eklendiğini görmüş olduk. Allah tez zamanda kullanmayı da nasip etsin inşallah. Makalemizi tamamlarken, öğrendiklerimizi özetleyelim.
  • Vertex, Polygon ve Mesh kavramlarının temel anlamlarını artık biliyoruz.
  • Grafik işlemcilerin baş edebilecekleri bir Vertex sayısı limitinin olduğunu, bu yüzden de Vertex çözünürlüğünde coşmamamız gerektiğini de biliyoruz.
  • Three.JS ile birlikte gelen bir yığın temel şeklin sahneye nasıl eklendiğini  artık biliyoruz (En azından nereden kopya çekeceğimizi biliyoruz).


Yorum Gönder

 
Top