Üç.js kullanarak WebGL ile başlayın

Sep 10, 2025
Nasıl Yapılır
Web developer creating 3D shape graphics

Webgl , tüm modern tarayıcılarda yaygın olarak desteklenen, donanım hızlandırılmış 3D grafiklerle çalışmanızı sağlar Javascript , tarayıcı tabanlı uygulamalar ve oyunlar için çok çeşitli olasılıklar açmak - sadece bunları kontrol et 20 İnanılmaz WebGL örneği , kanıt için.

WebGL'nin kendisi oldukça düşük seviyeli ve bununla birlikte vanilya formunda çalışmak isteyeceksiniz. Daha yüksek düzeyde işlevsellik sağlamak için çeşitli kütüphane ve hatta oyun motorları vardır.

Bu eğitimde size göstereceğim Bir uygulama nasıl yapılır veya WebGL kullanan site ile birlikte üç.js , bu, WebGL'nin soyutlamasını sağlayan ücretsiz bir açık kaynaklı kütüphanedir.

01. Üç.j'leri alın

Tutarak başlamanız gerekir üç.js . En son yapıya sahip olduğunuzda, üç.j'leri proje klasörünüze yerleştirin. Daha sonra diğer JavaScript kütüphanesi gibi sayfamıza bir komut dosyası olarak ekleyeceğiz. Kendi kodumuzu ayrı bir javascript dosyasına yerleştireceğiz. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta charset = utf-8 & gt;
  & lt; unvanı & gt; üç.js ile başlamak; / unvan & gt;
  / head & gt;
  & lt; vücut stili = "marjı: 0;" & gt;
  & lt; script src = "three.js" & gt; & lt; / script;
  & lt; script src = "demo.js" & gt; & lt; / script;
  & lt; / body & gt;
& lt; / html & gt;

02. Sahneyi ayarla

WebGL ile başlamak için üç şeye ihtiyacımız var: bir sahne, kamera ve bir renderer. Bir sahne, nesneleri üç.js tarafından görüntülenecek nesneleri yerleştirdiğimiz yerdir. Bir kamera, onları göreceğimiz bakış açısıdır. Render, ikisini bir araya getirir ve ekranı buna göre çeker. Bunları ayarladıktan sonra, oluşturucuyu belgeye ekleriz. 

 Var genişliği = window.innerwidth;
var yüksekliği = window.innerheight;
var görünümü = 45;
var yakınlar = 0.1;
var farclipping = 9999;
var sahne = yeni üç.scene ();
var kamera = yeni three.Perspectivecamera (Görünüm, genişlik / yükseklik, yakın klipleme, farclipping);
var renderer = yeni üç.webglrenderer ();
renderer.Setsize (genişlik, yükseklik);
belge.body.appendchild (renderer.domelement);

03. Bir döngü oluşturun

Daha sonra, sahnemizi gerçekleştirmek için bir döngü oluşturmamız gerekiyor. Bunu kullanarak bunu yapıyoruz renderer.render () fonksiyonu, ancak anahtar kısım tekrar tekrar kullanmaktır. RequestanimationFrame () , tarayıcının bir tane çizmeye hazır olduğunda başka bir çerçeve isteyebilmesini sağlayan yerleşik bir işlevdir. Kullanma RequestanimationFrame () daha kolaydır ve daha yumuşak bir animasyonda, çerçevelerin kendinizin zamanını çizmeyi denemek yerine. 

 fonksiyon animate () {
  RequestanimationFrame (animate);
  renderer.render (sahne, kamera);
}
canlandırmak ();

04. Temel nesneler oluşturun

Şimdi sahnemize bazı nesneler eklemeye başlayabiliriz. Bunu örgü nesneleri oluşturarak ve bunlara ekleyerek yapabiliriz. Bir örgü, geometri (nesnenin şekli) ve bir malzemeden oluşur (boyamak için kullanılan renk veya doku). Üç farklı geometri tanımlayarak ve onlara farklı renk malzemeleri atanarak bazı temel nesneler oluşturacağız. 

 var küpometrisi = yeni üç.boxgeometri (1, 1, 1);
var cubemeral = yeni üç.MeshlambertMaterial ({Renk: 0xff0000});
var küp = yeni üç.Mesh (kubbeometri, cubemalial);
var konigeometrisi = yeni üç. tongeometri (0.5, 1, 4);
var conataterial = yeni üç.MeshlambertMaterial ({Renk: 0x00ff00});
var koni = yeni üç.Mesh (konigeometri, aynalı);
var küregeometrisi = yeni üç.sphereometry (0.5, 8, 8);
var spheremial = yeni üç.MeshlambertMaterial ({Renk: 0x0000ff});
var küresi = yeni üç.Mesh (küregeometri, küremateryal);

05. Bir pozisyon belirtin

Varsayılan olarak, kameramızın olduğu yerin kökenine (x = 0, y = 0, z = 0) eklenir, bu nedenle onlar için bir pozisyon belirlememiz gerekecek. Daha sonra, kafemize ağlarımızı eklemeye hazırız, bu da otomatik olarak oluşturulurlar. canlandırmak () döngü. 

 cube.position.x = -2
cube.position.z = -5;
cone.position.z = -5;
küre.posisyon.z = -5;
küre.position.x = 2;
cube.position.z = -5;
sahne.add (küp);
sahne.add (koni);
sahne.add (küre);

06. Bir ışık kaynağı ekleyin

Sayfanızı şimdi görürseniz, bir şeyler biraz düz görünüyorsunuz. Nesnelere uygulanan aydınlatma yoktur, bu nedenle katı birincil renklerdir ve iki boyutlu görünüyorlar. Bunu düzeltmek için, Meshbasicmalı aydınlatmayı destekleyen bir malzemeye; Kullanacağız Meshlambertmaterial . Ayrıca sahneye ışık kaynağı eklemeliyiz. 

 var lambası = yeni üç.Pointlight (0xffffff);
light.position.x = 0;
light.position.y = 10;
light.position.z = 0;
sahne.add (ışık);

07. Kaynağı hareket ettirin

Şimdi oraya gidiyoruz! Sayfanızdaki neyin açıkça üç boyutlu nesnelerin neler olduğunu görmelisiniz. Henüz yapmadık, tam olarak yararlanılıyor. canlandırmak () işlevi. Işık kaynağımızın nesnelerin üstünde dairesel bir hareketle hareket etmesi için birkaç değişiklik yapalım. 

 var ılamazı = 0;
fonksiyon animate () {
  lamblegle + = 5;
  eğer (lambleggle & gt; 360) {lightangle = 0;};
  light.position.x = 5 * matematik (lamble * math.pi / 180);
  light.position.z = 5 * matematik.sin (lamble * math.pi / 180);
  RequestanimationFrame (animate);
  renderer.render (sahne, kamera); }

08. Doku ekleyin

Uygulamada, muhtemelen nesnelerimizin düz renkler olmasını istemiyoruz. Bir dosyadan bazı dokuları bir dosyadan uygulamak daha tipik olurdu. Bunu kullanarak yapabiliriz Üç.Textureloader () . Koni nesnemizin bir dosyadan yüklediğimiz bir dokuyu kullanmak için nasıl oluşturulduğunu değiştirelim. İşlev, dosya yüklendiğinde çağrılır.

  • 3D projeler için ücretsiz dokular nerede bulabilirim? 
 Var textureloader = yeni three.textureloader ();
textureloader.load ("./ gres_texture.jpg", doku = & gt; {
  var konigeometrisi = yeni üç. tongeometri (0.5, 1, 4);
  var conataterial = yeni üç.MeshlambertMaterial ({harita: doku});
  var koni = yeni üç.Mesh (konigeometri, aynalı);
  cone.position.z = -5;
  sahne.add (koni);
  }
);

09. Doğallaştırın

İşler daha iyi görünüyor, ama bir şey hala doğal değil. Doku çok düz görünüyor ve aydınlatmaya cevap vermiyor. Bunu, bir nesnenin yüzeyindeki dokumayı simüle etmek için bir görüntünün ışık ve koyu parçalarını kullanmamızı sağlayan Bump Haritalama kullanımıyla bunu çözebiliriz. Küre üzerinde farklı bir doku ile bunu deneyelim. Malzemeyi değiştireceğiz Meshphongmaterial , bu bir belirlememizi sağlayan bumpmap öznitelik. 

 Var textureloader = yeni three.textureloader ();
textureloader.load ("./ bump_map.jpg", texture = & gt; {
  var küregeometrisi = yeni üç.sphereometry (0.5, 8, 8);
  var spheremial = yeni üç.MeshphongMaterial ({Renk: 0x0000FF, Bumpmap: Doku, Bumpscale: 1.0});
  var küresi = yeni üç.mesh (küregometri, küresel);
  küre.posisyon.z = -5;
  küre.position.x = 2;
  sahne.add (küre);
  }
);

10. Kontroller ekleyin

Son bir dokunuş olarak, kullanıcıya sahne üzerinde biraz kontrol verin. Etrafında tava yeteneğini eklemek için, sadece bunu yapmayı inandırıcı derecede kolaylaştıran üç.js ile gönderilen ekstra bir kütüphane var. ORBITCONTROLS.JS'yi üç.js paketinden proje dizininize çıkardığınızdan ve sayfanıza eklediğinizden emin olun. Bu, kamera kontrolünün ortak stillerini yerine getirmek için üç.js ile birlikte gelen birkaç kontrol kütüphanesinden biridir. 

 & lt; script src = "orbitcontrols.js" & gt;

11. Kameraya Uygula

Şimdi tek yapmamız gereken bir Üç.OritControls nesne ve kameramıza uygulayın. Kütüphane sizin için geri kalanıyla ilgilenecek: tıklamalar, fare hareketleri vb. Dinlemeniz gerekmez. Ayrıca, nesnelerinizi menşe noktasına geri getirmek ve kamerayı nesnelerin etrafında düzgün bir şekilde kaydırabilmesini sağlamak isteyebilirsiniz.

Bununla, tanıtımımızla bitirdik. Değişken doku stilleri, bazı dinamik aydınlatma ve oynatmak için kullanıcı kontrollü bir kamera ile üç nesneniz olmalıdır. 

 camera.position.z = 10;
var kontrolleri = yeni üç.orbitcontrols (kamera);

Bu makale, Web Tasarımcısı'nın 268 sayısında, Creative Web Design Magazine, uzman öğreticiler, son teknoloji trendler ve ücretsiz kaynaklar sunar. Şimdi web tasarımcısına abone olun.

Bunu beğendin mi? Bunları dene:

  • Bir Kodlayıcı'nın API'lere Komple Kılavuzu
  • Üç.js ile 3B nesneyi eritirim
  • WordPress API'sini kullanarak bir blog güç

Nasıl Yapılır - En Popüler Makaleler

CSS'de hafif veya koyu modlar nasıl uygulanır

Nasıl Yapılır Sep 10, 2025

CSS şartnamesi hiç gelişmektedir. CSS'de yeni özelliklerin uygulanması için işlem karmaşıktır, ancak basitleştirilmiş..

Google'ın flutteriyle çapraz platform mobil uygulamaları oluşturun

Nasıl Yapılır Sep 10, 2025

Yıllardır sayısız çapraz platform mobil çerçeve, geliştirici tecrübesi ve performansında sürekli iyileştirmelerle bir..

Illustrator'da ürün simgeleri kümelerini oluşturun

Nasıl Yapılır Sep 10, 2025

Simgeleri büyütmek için üstündeki simgeye tıklayın Resimli simgeler sizin için s..

Duyarlı Web Tipografi Kuralları

Nasıl Yapılır Sep 10, 2025

Duyarlı web tipografi zordur - hem tasarım pirzolası hem de teknik bilgi birikimine sahip olmanız gerekir. Fakat ancak zor olabilir, yanlış almak bir seçenek değildir, çünkü tipogr..

4 Temel Görüntü Optimizasyonu İpuçları

Nasıl Yapılır Sep 10, 2025

Birkaç şanslı geliştirici ve bu yazar, Addy Osmani'nin yeni Image Optimizasyon ebook'unu Teknik Düzenle düzenlemesi fırsat..

Fotoğrafları Photoshop ile 3B animasyonlara dönüştürün

Nasıl Yapılır Sep 10, 2025

Hepimizin fotoğraf olarak alınan büyük bir hatıra mağazasına sahibiz ve hatırlayabilmek harika. Fakat ya da bir adım dah..

Tarayıcınızda Tasarım SVG Grafikleri

Nasıl Yapılır Sep 10, 2025

Vecteezy Editor Tarayıcınızda doğru çalışan ücretsiz bir vektör düzenleme süitidir. Bu öğretici, sitedek..

Güzel bir suluboya manzara boyama nasıl oluşturulur

Nasıl Yapılır Sep 10, 2025

Benimki bir suluboya, oldukça etkileyici bir tarzdır. boyama tekniği , detaylar bir ses kompozisyonundan daha a..

Kategoriler