Tarayıcılarımızda 5 ya da 10 yıl önce hayal edemeyeceğimiz yeteneklerimiz var. Tüm 3D oyun dünyaları tarayıcıda çalışabilir ve etkileşimli web siteleri daha sürükleyici deneyimler olabilir.
Belli bir sosyal medya şirketi tarafından satın alınan belirli bir sanal gerçeklik şirketi ile, şimdi 3D ile çalışmaya başlamak için mükemmel bir zaman. Şaşırtıcı bir şekilde, şimdi ağlar ve materyaller dahil olmak üzere saf JavaScript ile 3D oluşturabiliriz.
Tabii ki, mümkün olsa bile, çok miktarda kod gerektiriyor ve Three.js'nin devreye girmesi, 3D ortamları basitçe ve daha az kodla oluşturmamızı sağlıyor.
Ne yazık ki, yeni olduğu için, 3D tüm tarayıcılar tarafından desteklenmiyor. Şu anda Chrome, Safari ve Firefox ile sınırlıyız.
Zaman geçtikçe, IE desteği artacaktır, ancak şimdilik Microsoft adanmışları için bir geri dönüşe ihtiyacınız olacaktır.
Yapmamız gereken ilk şey, three.js web sitesi ve kütüphanenin en son sürümünü indirin.
Ardından, belgenizin başına başka bir JavaScript dosyası gibi atıfta bulunun ve biz de hazırız.
Yapmamız gereken ilk şey, üç.js ile bir şey oluşturmak için bir sahne, bir kamera ve bir oluşturucu yaratmaktır. Bir sahneden başlayarak:
var scene = new THREE.Scene();Sonra bir kameraya ihtiyacımız var. Bunu, kullanıcının aradığı bakış açısı olarak düşünün. Three.js'nin aslında burada birçok seçeneği var, ancak basitlik için bir perspektif kamera kullanacağız:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Bu yöntem dört parametre alır: birincisi görüş alanı, ikincisi en boy oranı (bunu her zaman kullanıcının bakış açısına dayandırmanızı tavsiye ederim), yakın kırpma düzlemi ve son olarak da en uzak kırpma düzlemidir. Bu son iki parametre işleme sınırlarını belirler, böylece çok fazla veya çok uzak olan nesneler çizilmez, bu da kaynakları boşa harcar.
Sırada, WebGL Renderer'ı kurmamız gerekiyor:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Görebildiğiniz gibi, buradaki ilk şey, oluşturucunun bir örneğini oluşturmak, ardından boyutunu kullanıcının görüş alanına ayarlamaktır. Sonunda, çalışmamız için boş bir tuval oluşturmak üzere sayfaya ekledik.
Şimdiye kadar yaptığımız tek şey sahneyi oluşturdu, şimdi ilk 3B nesneyi oluşturacağız.
Bu eğitim için basit bir silindir olacak:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Bu yöntem aynı zamanda 4 parametre alır: Birincisi silindirin tepesinin yarıçapı, ikincisi silindirin tabanının yarıçapı, üçüncüsü yükseklik, sonuncusu yükseklik bölümlerinin sayısıdır.
Nesnenin matematiğini belirledik, şimdi onu bir malzemeye sarmamız gerekiyor, böylece ekranda bir şey gibi görünüyor:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Bu kod, nesne için basit bir malzeme ekler, bu durumda mavi bir renk. Tel çerçevesini doğru olarak ayarladım, çünkü animasyonu yaptıktan sonra nesneyi daha net gösterir.
Son olarak, silindirimizi sahnemize eklememiz gerekiyor, şöyle ki:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
Sahneyi oluşturmadan önce yapılacak en son şey kamera konumunu ayarlamaktır:
camera.position.z = 20;Görebildiğiniz gibi, söz konusu JavaScript son derece basittir, çünkü Three.js tüm karmaşık şeylerle uğraşmaktadır, bu yüzden zorunda değiliz.
Dosyayı bir tarayıcıda test ederseniz artık hiçbir şeyin olmadığını göreceksiniz. Çünkü sahneyi render etmeye başlamadık. Sahneyi oluşturmak için aşağıdaki koda ihtiyacımız var:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Şimdi tarayıcınızdaki dosyaya bir göz atıyorsanız, bunun gerçekten bir silindir oluşturduğunu göreceksiniz, ancak bu çok heyecan verici değil.
3D'nin değerini gerçekten arttırmak için, animasyon fonksiyonunu başlatmamız gerekiyor. Bu, render fonksiyonumuzda birkaç küçük değişiklikle yapabileceğimiz:
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Tarayıcınızda test ederseniz, düzgün bir şekilde animasyonlu bir 3D silindir göreceksiniz.
Bir demo görmek ve kod ile oynamak istiyorsanız burada yap.
Gördüğünüz gibi, bu (çok basit) bir sahneyi yaratmak, iki düzineden az kod çizdi ve çok az matematik içeriyordu.
Eğer kontrol ederseniz örnekler three.js web sitesinde, yapılmış bazı inanılmaz işler göreceksiniz.
JavaScript için bu harika kütüphane, temel kod yazabilen herkesin katılabileceği noktaya kadar 3D kodlama giriş seviyesini gerçekten düşürdü.
Öne çıkan görsel / küçük resim, 3D görüntü Shutterstock üzerinden.