Giriş
Bazı Three.js için Three.js kullandım ve tarayıcıda 3D kullanmaya başlamanın verdiği zorlukları ortadan kaldırma konusunda gerçekten harika bir iş çıkardı. Ekranla kamera, nesne, ışık, materyal ve daha fazlasını oluşturabilirsiniz. Ayrıca, oluşturucu seçme olanağına da sahip olursunuz. Diğer bir deyişle, sahnenizin HTML 5'in tuvali, WebGL veya SVG kullanılarak çizilmesini isteyip istemediğinize karar verebilirsiniz. Ayrıca, açık kaynak olduğundan projeye dahil olabilirsiniz. Ama şu anda, bir motor olarak oynayarak öğrendiklerime odaklanacağım ve size bazı temel bilgiler vereceğim.
Three.js'nin tüm güzelliklerine rağmen, zorlanabileceğiniz zamanlar olabilir. Tipik olarak örnekler, ters mühendislik, (benim senaryomda kesinlikle) belirli işlevleri bulmaya ve bazen GitHub üzerinden soru sormaya epey zaman ayırmanız gerekir. Bu arada, soru sormak için Mr. doob ve AlteredQualia'nın çok yardımcı olduğunu gördüm.
1. Temel bilgiler
En azından geçici bir 3D bilgisine ve JavaScript’le ilgili makul düzeyde yeterliliğe sahip olduğunuzu varsayacağım. Aksi takdirde biraz kafa karıştırıcı olabileceğinden, bu tür şeylerle oynamadan önce biraz bilgi edinmeye değer olabilir.
3D dünyamızda, size oluşturma sürecinde size rehberlik edeceğim öğelerden bazıları verilmiştir:
- Bir sahne
- Oluşturucu
- Kamera
- Bir veya iki nesne (malzemeli)
Elbette, etkileyici şeyler de yapabilirsiniz. Umarım bunları yaparak tarayıcınızda 3D ile denemeler yapmaya başlarsınız.
2. Destek
Tarayıcılardaki destekle ilgili kısa bir hatırlatma yapmak istiyorum. Deneyimlerime göre, hangi görüntüleyicilerin desteklendiği ve temel JavaScript motorunun hızı açısından çalışılabilecek en iyi tarayıcı Google'ın Chrome tarayıcısı. Chrome Canvas, WebGL ve SVG'yi destekler ve çok hızlıdır. Sürüm 4'ün geliştirilmesiyle birlikte Firefox'u hemen kullanmaya başladım. JavaScript motoru, Chrome'unkine göre biraz daha yavaş görünse de, oluşturma teknolojilerine sağladığı destek mükemmeldir. Opera ve Safari şu anda WebGL desteği ekleme aşamasındadır, ancak mevcut sürümleri yalnızca tuvali desteklemektedir. Internet Explorer (sürüm 9 ve üstü) yalnızca tuval oluşturmayı destekler, Microsoft'un WebGL özellikleri eklemeyi planladığına dair hiçbir şey duymadım.
3. Sahneyi Ayarla
Tüm oluşturma teknolojilerini destekleyen bir tarayıcı seçtiğinizi ve daha standart seçenekler oldukları için tuval veya WebGL ile oluşturmak istediğinizi varsayalım. Tuval, WebGL'den daha yaygın şekilde desteklenir, ancak WebGL'nin grafik kartınızın GPU'sunda çalıştığını belirtmekte fayda vardır. Bu, CPU'nuzun, yapmaya çalıştığınız fizik veya kullanıcı etkileşimi gibi oluşturma olmayan diğer görevlere yoğunlaşabileceği anlamına gelir.
Hangi oluşturucuyu seçerseniz seçin, JavaScript'in performans için optimize edilmesi gerektiğini unutmayın. 3D, tarayıcılar için hafif bir görev değildir (ve bunun mümkün olması da harika bir özelliktir). Bu nedenle, kodunuzda darboğazların nerede olduğunu anlamak için dikkatli olun ve mümkünse bunları kaldırın!
Bununla birlikte ve HTML dosyanıza üç.js dosyasını indirdiğiniz ve eklediğiniz varsayıldığında, bir sahneyi nasıl oluşturursunuz? Aşağıdaki gibi:
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
Çok zor değilmiş.
4. Ağ Oluşturma
Burada bir sahnemiz, bir kameramız ve bir oluşturucumuz var (örnek kodumda WebGL'yi kullanmayı seçtim) ama gerçekte çizecek hiçbir şeyimiz yok. Three.js, birkaç farklı standart dosya türünü yükleme desteğiyle gelir. Bu, Blender, Maya, Cinema4D veya başka bir platformdan model çıktısı yapıyorsanız harikadır. İşleri basitleştirmek için (nihayetinde bu, işe başlamakla ilgili!) Temel öğelerden bahsedeceğim. Temel yapılar; Küre, Düzlem, Küp ve Silindir gibi nispeten daha basit olan geometrik ağlardır. Three.js, bu tür temel öğeleri kolayca oluşturmanıza olanak tanır:
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),
sphereMaterial);
// add the sphere to the scene
scene.add(sphere);
Her şey yolunda ama kürenin malzemesi ne olacak? Kodda bir sphereMaterial değişkeni kullandık, ancak henüz tanımlamadık. Öncelikle malzemeler hakkında biraz daha ayrıntılı konuşmamız gerekiyor.
5. Malzemeler
Hiç kuşkusuz bu, Three.js'nin en yararlı bölümlerinden biridir. Örgülerinize uygulayabileceğiniz çeşitli (ve oldukça kullanışlı) malzemeler sağlar:
- "Temel": Görüntünün 'açık' olacağı anlamına gelir
- Lambert
- Phong Dili
Dahası da var, ancak kolaylık olması açısından bunları kendiniz keşfeteceğim. WebGL söz konusu olduğunda, bu materyaller özellikle hayat kurtarıcı olabilir. Neden? Çünkü WebGL'de, oluşturulacak her şey için gölgelendiriciler yazmanız gerekir. Gölgelendiriciler başlı başına çok büyük bir konudur, ama kısacası GPU'ya bir şeyin nasıl görünmesi gerektiğini söyleyen GLSL (OpenGL Gölgelendirici Dili) ile yazılırlar. Yani ışıklandırma, yansıma ve benzeri hesaplamaları taklit etmeniz gerekir. Çok kısa sürede çok karmaşık hale gelebiliyor. Three.js sayesinde, istemiyorsanız bunu yapmak zorunda değilsiniz, çünkü bunu sizin için soyutluyor. Ancak gölgelendiriciler yazmak istiyorsanız bunu bir MeshShaderMaterial ile de yapabilirsiniz. Bu nedenle esnek bir kurulum olur.
Bununla birlikte, şimdilik küreye bir lambert malzeme uygulayalım:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
Bir malzeme oluşturduğunuzda, rengin yanı sıra yumuşatma veya ortam haritaları gibi başka özelliklerin de bulunduğunu belirtmekte fayda vardır. Malzemelerde ayarlayabileceğiniz çeşitli özellikler ve hatta motorun size sağladığı tüm nesneler için Wiki sayfasına göz atmanız gerekir. Ayrıca, API'nin daha çekici bir görünümünü sunan threejs.org sitesi de kısa süre önce oluşturuldu.
6. Işıklar!
Sahneyi şu anda işlerseniz kırmızı bir daire görürsünüz. Lambert malzemesi uygulanmış olsa da sahnede hiç ışık olmadığı için Three.js, düz renklendirmeyle aynı olan tam ortam ışığına geri dönecektir. Bunu basit bir bakış açısıyla çözelim:
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
7. Oluştur
Aslında artık kayda değer bir şekilde görüntü oluşturmak için her şeyi ayarlanmış durumdayız. Ama aslında devam etmemiz ve bunu yapmamız gerekiyor:
// draw!
renderer.render(scene, camera);
Yine de, oluşturma işlemini muhtemelen bir kereden fazla yapmak istersiniz. Bu yüzden, bir döngü oluşturacaksanız gerçekten requestAnimationFrame işlevini kullanmanız gerekir; bu, tarayıcıda animasyonu işlemenin şu ana kadarki en akıllı yoludur. Henüz tam olarak desteklenmediği için, Paul Ireland's şim'e göz atmanızı önemle tavsiye ederim.
8. Ortak Nesne Özellikleri
Three.js kodunun incelenmesine zaman ayırırsanız Object3D'den birçok nesnenin "devraldığını" görürsünüz. Bu, position, rotasyon ve ölçek bilgileri gibi oldukça kullanışlı bazı özellikler içeren bir temel nesnedir. Özellikle Küremiz, Object3D'den devraldığı ve kendi özelliklerini ekleyen bir Ağ'dır: geometry ve materials. Neden bunlardan bahsediyorum? Ekranınızda hiçbir şey yapmayan bir küre kullanmak isteme ihtimaliniz yoktur. Bu özellikleri, örgülerin ve malzemelerin altındaki ayrıntıları anında değiştirmenize olanak tanıdığından, araştırmaya değer.
// sphere geometry
sphere.geometry
// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array
// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same
9. Küçük Sırlar
Three.js ile ilgili bir sorunu hızlıca vurgulamak istedim. Örneğin, bir ağın köşelerini değiştirirseniz oluşturma döngünüzde hiçbir şeyin değişmediğini görürsünüz. Neden? Çünkü Three.js, bir ağın verilerini bir optimizasyon işlemi olarak önbelleğe alıyor. Gerçekte yapmanız gereken, Three.js’ye bir şeylerin değiştiğini bildirmek ve değişiklik yapmasını sağlayarak gerekli her şeyi yeniden hesaplamaktır. Bunu aşağıdakilerle yapabilirsiniz:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
Daha başka seçenekler de var ama benim gördüğüm bu iki seçenek en yararlı olanlar. Gereksiz hesaplamalardan kaçınmak için sadece değiştirilen şeyleri işaretlemeniz gerekir.
Sonuç
Three.js’ye ilişkin bu kısa giriş bilgilerini yararlı bulduğunuzu umuyoruz. Ellerinizi kirletip bir şeyler denemekten güzel bir şey yoktur. Bunu ne kadar önermem için öneririm. Tarayıcıda yerel olarak 3D çalıştırmak çok eğlencelidir ve Three.js gibi bir motor kullanmak sizin için bir çok sıkıntıyı ortadan kaldırır ve çok güzel bazı şeyler yapmanızı sağlar. Size yardımcı olmak amacıyla bu laboratuvar makalesinde kaynak kodu özetledik. Böylece referans olarak kullanabilirsiniz. Bunu sevdiyseniz Twitter üzerinden bana haber verin, merhaba demeniz her zaman iyi olur!