Giriş
Deneme çalışmalarımdan bazılarında Three.js'i kullandım. Bu kitaplık, tarayıcıda 3D'ye başlamanın neden olduğu baş ağrılarını ortadan kaldırma konusunda gerçekten çok başarılı. Bu araçla kamera, nesne, ışık, malzeme ve daha fazlasını oluşturabilirsiniz. Ayrıca, sahnenizin HTML 5'in kanvası, WebGL veya SVG kullanılarak çizilip çizilmeyeceğine karar verebilirsiniz. Açık kaynak olduğu için projeye dahil bile olabilirsiniz. Ancak şu anda bir motor olarak oynayarak öğrendiklerime odaklanacağım ve bazı temel bilgilerden bahsedeceğim.
Three.js'in tüm avantajlarına rağmen, bazen zor anlar yaşayabilirsiniz. Genellikle örneklerle, tersine mühendislikle ve (benim durumumda kesinlikle) belirli işlevleri bulmakla ve zaman zaman GitHub üzerinden soru sormakla oldukça fazla zaman geçirmeniz gerekir. Sorunuz olursa Mr. doob ve AlteredQualia kanallarının çok faydalı olduğunu düşünüyorum.
1. Temel bilgiler
3D hakkında en azından temel düzeyde bilgi sahibi olduğunuzu ve JavaScript konusunda makul düzeyde yetkin olduğunuzu varsayacağım. Aksi takdirde, biraz kafa karıştırıcı olabileceğinden bu tür işlemleri denemeden önce biraz bilgi edinmenizi öneririz.
3D dünyamızda aşağıdakilerden bazılarını kullanacağız. Bu öğeleri oluşturma sürecinde size yol göstereceğim:
- Bir sahne
- Oluşturucu
- Kamera
- Bir veya iki nesne (malzemeler dahil)
Elbette bazı harika şeyler yapabilirsiniz. Umarım bunu yapar ve tarayıcınızda 3D ile denemeler yapmaya başlarsınız.
2. Destek
Tarayıcılarda destek hakkında kısa bir not. Deneyimlerime göre, Google'ın Chrome tarayıcısı, desteklenen oluşturma araçları ve temel JavaScript motorunun hızı açısından çalışmak için en iyi tarayıcıdır. Chrome, Canvas, WebGL ve SVG'yi destekler ve son derece hızlıdır. 4. sürümün kullanıma sunulmasıyla birlikte Firefox, Chrome'a çok yakın bir ikinci sırada yer alıyor. JavaScript motoru Chrome'dan biraz daha yavaş olsa da oluşturma teknolojilerine verdiği destek yine mükemmel. Opera ve Safari, WebGL desteği ekleme sürecindedir ancak mevcut sürümleri yalnızca tuvali destekler. Internet Explorer (9 ve sonraki sürümler) yalnızca tuval oluşturmayı destekler. Microsoft'un WebGL özelliklerini eklemeyi planladığına dair bir şey duymadım.
3. Ortamı hazırlama
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şturma yapmak istediğinizi varsayacağım. Tuval, WebGL'den daha yaygın olarak desteklenir ancak WebGL'nin grafik kartınızın GPU'sunda çalıştığını belirtmek gerekir. Bu, CPU'nuzun oluşturma dışındaki diğer görevlere (ör. gerçekleştirmeye çalıştığınız fizik veya kullanıcı etkileşimi) odaklanabileceği anlamına gelir.
Seçtiğiniz oluşturma aracından bağımsız olarak, JavaScript'in performans için optimize edilmesi gerektiğini unutmayın. 3D, bir tarayıcı için hafif bir iş değildir (ve mümkün olması bile harikadır). Bu nedenle, kodunuzdaki darboğazların nerede olduğunu anlamaya çalışın ve mümkünse bunları kaldırın.
Bu bilgiler ışığında, three.js'yi indirdiğinizi ve HTML dosyanıza eklediğinizi varsayarak bir sahneyi nasıl oluşturacağınızı öğrenelim. 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ğil.
4. Ağ oluşturma
Bir sahnemiz, kameramız ve oluşturma aracımız (örnek kodumda WebGL'yi tercih ettim) var ancak çizecek bir şeyimiz yok. Three.js, birkaç farklı standart dosya türünü yükleme desteği sunar. Bu, Blender, Maya, Cinema4D veya başka bir kaynaktan modeller oluşturuyorsanız çok kullanışlıdır. Basitleştirmek için (sonuçta bu, başlamakla ilgilidir!) İlkel öğelerden bahsedeceğim. Basit şekiller, geometrik ağlardır. Küre, düzlem, küp ve silindir gibi nispeten basit şekillerdir. Three.js, aşağıdaki türde primitifleri 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. Peki kürenin malzemesi ne olacak? Kodda sphereMaterial değişkenini kullandık ancak henüz tanımlamadık. Öncelikle materyaller hakkında biraz daha ayrıntılı konuşmamız gerekiyor.
5. Malzemeler
Bu, hiç şüphesiz Three.js'in en kullanışlı özelliklerinden biridir. Bu araç, ağlarınıza uygulayabileceğiniz birçok yaygın (ve çok kullanışlı) malzeme sunar:
- "Temel": "Işıksız" olarak oluşturulur.
- Lambert
- Phong
Daha fazlası da var ancak basitlik açısından bunları kendiniz keşfetmenizi tercih ediyorum. Özellikle WebGL söz konusu olduğunda bu materyaller hayat kurtarıcı olabilir. Neden? Çünkü WebGL'de oluşturulan her şey için gölgelendirici yazmanız gerekir. Gölgelendiriciler başlı başına büyük bir konudur ancak kısaca GPU'ya bir öğenin nasıl görünmesi gerektiğini söyleyen GLSL (OpenGL Gölgelendirici Dili) ile yazılırlar. Bu nedenle, ışıklandırma, yansıma vb. ile ilgili matematiksel işlemleri taklit etmeniz gerekir. Bu süreç çok hızlı bir şekilde karmaşık hale gelebilir. Three.js sayesinde, istemiyorsanız bunu yapmanız gerekmez. Ancak gölgelendirici yazmak istiyorsanız bunu bir MeshShaderMaterial ile de yapabilirsiniz. Bu nedenle, bu kurulum esnektir.
Ancak şimdilik küreye bir Lambert malzemesi uygulayalım:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
Bir malzeme oluştururken renk dışında pürüzsüzleştirme veya ortam haritaları gibi başka özellikler de belirtebileceğinizi belirtmek isteriz. Materyallerde ve aslında motorun size sağladığı tüm nesnelerde ayarlayabileceğiniz çeşitli özellikler için Wiki sayfasına göz atmanız gerekir. Ayrıca, API'nin daha ilgi çekici bir görünümünü sunan threejs.org da kısa süre önce kullanıma sunuldu.
6. Işıklar!
Sahneyi hemen oluşturacak olursanız kırmızı bir daire görürsünüz. Lambert malzemesi uygulamış olsak da sahnede ışık olmadığından Three.js varsayılan olarak tam ortam ışığına döner. Bu, düz renklendirmeyle aynıdır. Bunu basit bir ışık noktasıyla düzeltelim:
// 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
Artık her şeyi oluşturmaya hazırız. Ancak aslında tam da bunu yapmamız gerekiyor:
// draw!
renderer.render(scene, camera);
Ancak muhtemelen birden fazla kez oluşturmak isteyeceksiniz. Bu nedenle, döngü oluşturacaksanız requestAnimationFrame işlevini kullanmanız gerekir. Bu işlev, tarayıcıda animasyonu yönetmenin en akıllıca yoludur. Henüz tam olarak desteklenmemektedir. Bu nedenle Paul Irish'ın shim aracına göz atmanızı öneririz.
8. Yaygın Nesne Özellikleri
Three.js'nin koduna göz atarsanız birçok nesnenin Object3D'den "devralındığını" görürsünüz. Bu, konum, döndürme ve ölçek bilgileri gibi çok yararlı özellikler içeren bir temel nesnedir. Özellikle, küremiz, Object3D'den devralınan ve kendi özelliklerini (geometri ve malzemeler) ekleyen bir ağdır. Bu konulardan neden bahsediyorum? Ekranınızda hiçbir şey yapmayan bir küre görmek istemezsiniz. Bu özellikler, ağların ve materyallerin temel ayrıntılarını anında değiştirmenize olanak tanıdığından incelenmeye değerdir.
// 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. Dirty Little Secrets
Three.js ile ilgili bir noktaya dikkatinizi çekmek istiyorum. Örneğin, bir örgünün köşe noktalarını değiştirirseniz oluşturma döngüsünde hiçbir şeyin değişmediğini fark edersiniz. Neden? Bunun nedeni, Three.js'in (bildiğim kadarıyla) bir ağ için verileri optimizasyon amacıyla önbelleğe almasıdır. Gerçekten yapmanız gereken, Three.js'e bir şeyin değiştiğini işaretlemektir. Böylece, gerekenleri yeniden hesaplayabilir. Bunu aşağıdakilerle yapabilirsiniz:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
Daha fazlası da var ancak bulduğum bu iki yöntem en yararlı olanlardır. Gereksiz hesaplamaları önlemek için yalnızca değişen öğeleri işaretlemeniz gerekir.
Sonuç
Three.js'ye bu kısa girişi faydalı bulduğunuzu umuyoruz. Elinize aldığınız bir şeyi denemek kadar iyi bir şey yoktur. Bunu kesinlikle tavsiye ederim. Tarayıcıda doğal olarak çalışan 3D çok eğlencelidir. Three.js gibi bir motor kullanmak, kafanızın bir sürü derdinden kurtulmanızı ve gerçekten harika şeyler üretmenizi sağlar. Size biraz yardımcı olmak için bu laboratuvar makalesinde kaynak kodunu topladım. Bu kodu referans olarak kullanabilirsiniz. Bu içerikten keyif aldıysanız Twitter üzerinden bize bildirin. Her zaman sohbet etmek için hazırız.