Bu makalemizde, sahnemize eklediğimiz nesnelerin yapı malzemesi olan materyalleri öğreneceğiz. Bir önceki makalemizde, ekranın ortasına yeşil bir küre eklemiştik ve fark etmeden mevcut materyallerden birini kullanmıştık. Şimdi sıra, hangi materyal ne için kullanılır, öğrenmeye geldi.

Three.JS'de temel olarak Mesh ismi verilen 3D nesnelerde kullanılan 3 farklı materyal tipi vardır. Bunlar;
  • MeshBasicMaterial
  • MeshLambertMaterial
  • MeshPhongMaterial

şeklinde özetlenebilir. İlk materyal tipi, sahnede gözükmek için ışığa ihtiyaç duymaz. Fosfor benzeri kendiliğinden parlayan bir yapısı vardır. İkinci materyal tipi, tahta veya lastik gibi mat yüzeyleri taklit etmek için kullanılır. Üçüncü materyal türü ise, plastik veya metal gibi parlak yüzeyleri taklit etmek için kullanılır. Bu üç materyal haricinde, nesnenin tel kafes iskeletini gösteren bir alt materyal tipi vardır ki, onu burada hiç saymıyorum, birazdan örnek üzerinde göreceğiz inşallah.


Sahneye eklenen bir nesne, yukarıdaki üç materyalden biri kullanabilirken, aynı anda birden fazla materyali de kullanabilir. Bunlara MultiMaterialObject adı verilir.

Materayaller, cismin matlık veya parlaklığının haricinde, ışığı yansıtma veya nesneye renk verme gibi özellikleri de üzerlerinde barındırırlar.

Nasıl, böyle anlat anlat olmuyor, değil mi? :) Haydi, iş başına. İlk olarak HTML belgemizi 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();

    addSphere1();
    
    addSphere2();
    
    addSphere3();
    
    addSphere4();
    
    addSphere5();

    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, 150, 400); var light = new THREE.PointLight(0xffffff); light.position.set(0, 150, 0); scene.add(light); var ambientLight = new THREE.AmbientLight(0x111111); scene.add(ambientLight); } function addSphere1() { var geometry = new THREE.SphereGeometry(50, 32, 32); var material = new THREE.MeshBasicMaterial({ color: 0x11ff55 }); var sphere = new THREE.Mesh(geometry, material); sphere.position.set(-240, 50, -50); scene.add(sphere); } function addSphere2() { var geometry = new THREE.SphereGeometry(50, 32, 32); var material = new THREE.MeshBasicMaterial({ color: 0x119955, wireframe: true, transparent: true }); var sphere = new THREE.Mesh(geometry, material); sphere.position.set(-120, 50, -50); scene.add(sphere); } function addSphere3() { var geometry = new THREE.SphereGeometry(50, 32, 32); var material1 = new THREE.MeshBasicMaterial({ color: 0x11ff55 }); var material2 = new THREE.MeshBasicMaterial({ color: 0x119955, wireframe: true, transparent: true }); var material = [material1, material2]; var sphere = THREE.SceneUtils.createMultiMaterialObject(geometry, material); sphere.position.set(0, 50, -50); scene.add(sphere); } function addSphere4() { var geometry = new THREE.SphereGeometry(50, 32, 32); var material = new THREE.MeshPhongMaterial({ color: 0x11ff55, shininess: 100, specular: 0x666666 }); var sphere = new THREE.Mesh(geometry, material); sphere.position.set(120, 50, -50); scene.add(sphere); } function addSphere5() { var geometry = new THREE.SphereGeometry(50, 32, 32); var material = new THREE.MeshLambertMaterial({ color: 0x11ff55 }); var sphere = new THREE.Mesh(geometry, material); sphere.position.set(240, 50, -50); scene.add(sphere); } function animation() { renderer.render(scene, camera); requestAnimationFrame(animation); }


Bu ö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.


Kodun uzunluğu seni korkutmasın. Bir önceki makalemizdeki eklediğimiz küre gibi sadece beş farklı küreyi yan yana ekledik. Tek fark, her birini farklı materyallerden ürettik. Şimdi bu materyallerin farklarını görelim.


var material = new THREE.MeshBasicMaterial({ color: 0x11ff55 });

Bu materyal tipi, ışıksız ortamda fosfor gibi kendiliğinden parlar. Gözükmesi için sahnede ışık olmasına ihtiyaç duymaz. Etrafı aydınlatmasına gerek duyulmayan ancak kendisinin karanlıkta parlaması gereken durumlarda kullanışlıdır. Örneğin arabaların arka stop lambaları veya yoldaki levhalar bunlara örnek verilebilir. Sınıfa geçilen parametre, Hex türünden rengi ifade eder. Biz burada yeşil türevi bir renk kullandık.


var material = new THREE.MeshBasicMaterial({ color: 0x119955, wireframe: true, transparent: true });

Bu materyal tipi, aslında bir önceki materyal ile aynıdır ancak "wireframe" ve "transparent" özelliklerini kullanarak, şeklin sadece tel iskelet kafesinin gösterilmesini sağladık. Bu kullanım çok yaygın olmasa da, ne zaman neye ihtiyacımızın olacağı hiç belli olmaz. Belki de, yaptığın oyunda odanın ortasındaki bir hologramda inşa edilecek nükleer tesisin planını göstermen gerekiyordur, kim bilir :)


var material1 = new THREE.MeshBasicMaterial({ color: 0x11ff55 });

var material2 = new THREE.MeshBasicMaterial({ color: 0x119955, wireframe: true, transparent: true });

var material = [material1, material2];

Üçüncü örneğimizde, birden fazla materyali nasıl bir arada kullanabileceğimizi görüyoruz. Yalnız burada dikkat edilmesi gereken önemli bir husus var. Tek bir materyal ile 3D nesne oluşturmak için "THREE.Mesh" fonksiyonundan faydalanırken, birden fazla materyalden oluşan 3D nesneleri oluşturmak için "THREE.SceneUtils.createMultiMaterialObject" fonksiyonundan faydalanıyoruz.


var material = new THREE.MeshPhongMaterial({ color: 0x11ff55, shininess: 100, specular: 0x666666 });

Dördüncü materyal tipimizin ışık altında parlama özelliği vardır. Plastik veya metal tarzındaki nesneler için idealdir. Gözükmesi için sahnede muhakkak ışık olmak zorundadır. Işık görmeyen yüzeyleri karanlık kalır ve gözükmez. Burada özellik olarak verilen sayısal ifadeler, ışığı yansıtma ve parlama değerleri ile ilgilidir. Öğrenmek için deneme yanılma yolunu tavsiye ediyorum.


var material = new THREE.MeshLambertMaterial({ color: 0x11ff55 });

Beşinci ve son materyal tipimiz ise mat yüzeyler için kullanılır. Lastik veya tahta tarzındaki nesneler için idealdir. Gözükmesi için sahnede yine ışık olmak zorundadır. Işık görmeyen yüzeyleri karanlık kalır ve gözükmez.

Böylece Three.JS'de 3D nesneler için kullanabileceğimiz materyalleri görmüş olduk. Makalemizi tamamlarken öğrendiklerimizi özetleyelim.
  • Three.JS'de 3D nesneler ile birlikte kullanılabilecek üç çeşit temel materyal vardır. Bunlar MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial şeklinde özetlenebilir.
  • Bu materyaller nesnelerin ışığı yansıtışına ve görünüşüne etki ederler.
  • Materyaller ile nesnelerin renklerini de değiştirebiliriz.
  • İhtiyaca göre birden fazla materyali tek bir nesnede kullanma imkanımız da vardır.


Yorum Gönder

  1. Belirtmek gerekirse 0x111111 şeklinde olan kısımda 1'lerin herbirinin yerine A-F arası ve 0-9 arası karakterler gelebilir.

    YanıtlaSil

 
Top