Kendi WebGL fiziğinizi oluşturun

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

Bu proje farklı parçalara ayrılacak. Heroku'ya kısa bir giriş yapacağız, Physij'lerin üç.j'le nasıl kullanılacağını göstereceğiz, node.js üzerindeki soket olaylarını nasıl kullanacağınızı ve ayrıca gönderilen verileri nasıl ele aldığımızı açıklayacağız.

  • 20 İnanılmaz WebGL örneği

01. Heroku

Heroku is an easy to use and free to trial node.js web server

Heroku, kullanımı kolay ve deneme için ücretsizdir NODE.JS Web Sunucusu

Bu proje barındırılacak Heroku , bu, uygulamalarınızı barındıracak bir bulut platformu. Ruby, Java, PHP ve Python gibi çok çeşitli desteklenen dillere sahiptir. Node.js. kullanacağız.

Bir hesap için kaydolun ve node.js. Bu proje için ücretsiz olan Temel Sunucuyu kullanabiliriz. Kayıt yaptıktan sonra, uygulamanızı oluşturabileceğiniz gösterge panelinize geleceksiniz. Bu, Herokuapp.com'da bir alt etki alanı oluşturacaktır.

Bir dağıtım yöntemi olarak, Git deposunu kullanarak dağıtmak için Heroku komut satırı arayüzünü (CLI) kullanmayı veya GitHub veya Dropbox'a ayarlanmış bir bağlantıyı kullanmayı seçebilirsiniz. Cli ile gitmeyi seçtim; Bu bir kurulum gerektirecektir. Ancak karşılığında, çeşitli yeni yararlı araçlar elde edersiniz, bunlardan biri terminalinizde canlı hata ayıklama.

Sunucunuzu ayarlamak için adımları izlemenizi tavsiye ederim. burada açıklandığı gibi .

Dağıtmak için varsayılan GIT komutlarını kullanın. Kullandığınız her biri, derleme sunucusunu tetikler ve uygulamanız Heroku sunucusuna dağıtılır ve ardından alt etki alanınızdan görüntülenebilir.

Kod dağıtıldıktan sonra, projenizi [YourProject] .Herokuapp.com adresinden görüntüleyebilirsiniz. Günlükleri görüntülemek için, terminalinizdeki 'Heroku Günlükleri - Kuyruk' komutunu kullanın. Gösterilen şeylerden bazıları, müşteriye sunulan şeydir - soket bağlantılarını gösterir ve kodunuzu hata ayıklamak istiyorsanız, terminale çıkarmak için konsol.log'u da kullanabilirsiniz.

02. Fizik Sahnesini Yapın

Tap your screen or hit the spacebar to bounce the table up

Ekranınıza dokunun veya tabloyu yükseltmek için boşluk çubuğuna basın

En popüler kullanacağız Webgl çerçeve, üç.js , fizik ekleyeceğimiz bir nesneyi içeren bir 3d sahne oluşturmak için. Seçim Fizik Kütüphanesi Physijs , üç.j için bir eklenti. Üç.JS'ye bir uzantı olarak, Physijs aynı kodlama sözleşmesini kullanıyor, üç.js ile zaten aşinassanız kullanmayı kolaylaştırır.

İlk şey bilardo masası. Physijs kullanıyoruz Heightfieldmesh , çünkü bu örgü, uçaktaki yüksekliği okuyacaktır. Bu yüzden temelde kendisini üç.js nesnesinin etrafına saracak. 

 Var steaseometrisi = yeni üç.panjometri (650, 500, 10, 10);
var tablatı = phyjs.creatatı (
  yeni three.MeshphongMaterial ({
    Parlaklık: 1,
    Renk: 0xB00000,
    Emvissive: 0x111111,
    Yan: üç.Doubleide
  }),
  .8, // sürtünme
  .4 // iadesi
);
Tablo = yeni physijs.heightfieldmesh (steaseometri, tablatı, 0);

Yani Heightfieldmesh Bir geometri, aynı zamanda bir phyji malzemesi gerektirir. Üç.js malzemesine iki yeni özellik ekliyoruz. Bunlar sürtünme ve iade değişkenler. Sürtünme, nesnenin yaptığı dirençtir ve restitüsyonun 'sıçrılık' anlamına gelir. Bu iki değişken, fiziğin sahnede nasıl hisseteceğini tanımlayacaktır.

Oluşturulan havuz topları için onları çok kabarık yapmak istemiyoruz, bu yüzden sayıyı düşük tutun. Üç.js gibi, Physijs ayrıca orijinal mesh etrafında dolaşmak için bir dizi temel şekil vardır. Spheremesh sarma Küreometri top fiziğini verecek. Sahneyi başlatırken, biz diyoruz. Buildball (8) , aşağıdaki işlevi tetikleyecek ... 

 Var Buildball = Function (Numberball) {
 var BallTexture = yeni üç.Texture ();
 var balindex = top. Uzunluğu;

Doku ekleyin: 

 BallTexture = three.ImageUtils.loadTexture ('Dokular /' + '+ Numberball +' _ball.jpg ', İşlev (Resim) {
     baltaxture.Image = görüntü;
  });

Bazı terbiyeli sürtünme ve sıçrama özellikleri ile Phyjijs özellikli malzemeyi oluşturun: 

var BallMaterial = Physijs.Creatalial (
    yeni üç.MeshlambertMaterial ({
      Harita: BallTexture,
      Parlaklık: 10,
      Renk: 0xdddddd,
      Emvissive: 0x111111,
      Side: üç.frontside
    }),
    .6, // sürtünme
    .5 // iadesi
  );

Doku Haritalama: 

 ballmaterial.map.wraps = ballmaterial.map.wrapt = three.Repeatwrapping;
  ballmaterial.map.Repeat.set (1, 1);
 Fizik etkinleştirilmiş Spheremesh'i oluşturun ve havada başlayın:

  Ball [BallIndex] = Yeni Physijs.Spheremesh (
    Yeni üç.Sphereometri (25, 25, 25),
    Biler,
    100
  );
  // y tuvalin tepesine ofset
  top [ballindex] .position.y = 500;
  // gölgeler
  top [ballindex] .Receiveshadow = true;
  top [ballindex] .castshadow = true;
  // topu tuvalinize ekleyin
  sahne.add (top [balleks]);
};

.Jpg dosyasından doku ekliyoruz. Malzemeyi oluşturun ve Spheremesh Nesneyi dikey olarak üste yerleştireceğimiz nesneyi oluşturmak için ekrana düşer.

03. SOCKETS bağlantısı

The key goal of our game is emulating the physical movements to the screen

Oyunumuzun temel amacı, fiziksel hareketlerin ekrana taklit ediyor

Sunucu ile müşteri arasındaki iletişim için kullanacağız socket.io . Bu, node.js. için mevcut en güvenilir kütüphanelerden biridir. Web Okuyucular API'sinin üstüne inşa edilmiştir.

ŞİMDİ Fizik ağlar için etkindir. Oyunu etkileşimli hale getirmek için kullanıcı girişine ihtiyacımız var. Kullandığımız giriş aygıtı mobil cihazdır. Mobil tarayıcı veri sağlayacak denetleyicidir. ivmeölçer ve jiroskoptan Oyunu göreceğiniz masaüstüne.

Öncelikle, mobil tarayıcı ile masaüstü tarayıcısının arasındaki bağlantı yapılmalıdır. Bir tarayıcı NODE.JS uygulamamızla bağlantı kurduğunda, yeni bir bağlantı yapmamız gerekiyor. Aşağıdakileri kullanarak bir istemci tarafı bağlantısı ayarlanır: 

 var soketi = io.connect ();

Mesajları gönderdiğiniz için yaymak İşlev: 

 Socket.emit ('olay adı', veriler);

Ve kullandığınız için .On () İşlev: 

 soket. ('Olay adı', işlev () {});

03.1. Masaüstü Oyunu Ayarlama

Eğer bir masaüstüysek, sunucumuza bir cihaza bir cihaz göndereceğiz. Masaüstün aşağıdaki kod satırını kullanarak oyundur. 

 var soketi = io.connect ();
// İlk karşılama mesajı olduğunda, 'Game' cihaz türü ile cevap verin
soket.on ('Hoşgeldiniz', İşlev (Veri) {
  socket.emit ("Cihaz", {"Tipi": "Game"});
});

Sunucu bize benzersiz bir anahtar / oyun kodu iade edecek kripto tarafından üretildi . Bu, masaüstüne görüntülenecektir. 

 // bir kod oluştur
var gamecode = crypto.randombytes (3) .Tostring ('hex'). Substring (0, 4) .TolowerCase ();
// benzersizliğini sağlamak
süre (gamecode in socketcode) {
  gamecode = crypto.randombytes (3) .Tostring ('hex'). Substring (0, 4) .TolowerCase ();
}
// Mağaza Oyun Kodu - & GT; Soket Derneği
SOCKCODES [GAMECODE] = iO.Sockets.Sockets [SOCKET.ID];
SOCKET.GAMECODE = GAMECODE

Oyun istemcisini, oyun kodunu kullanıcıya sıfırlamasını ve göstermesini söyleyin ... 

 soket. ("Başlat", gamecode);

03.2. Kontrol cihazını oyuna bağlayın

Mobil cihazı oyuna bağlamak için, oyun kodunu masaüstü ekranından göndermek için bir form kullanacağız. Gönderimde, oyun kodunu kimlik doğrulaması için sunucuya göndereceğiz. 

 soket. ("Cihaz", {"Tip": "Denetleyici", "GameCode": gamecode});

Sunucu, oyun kodunun geçerli olup olmadığını kontrol eder ve masaüstü oyunuyla bağlantıyı kurar 

 Eğer (socketcode'daki cihaz.gamecode) {
  // Denetleyici komutları için oyun kodunu kaydet
  SOCKET.GAMECODE = Cihaz.Gamecode
  // denetleyiciyi başlat
  soket. ("bağlı", {});
  // oyunu başlat
  SocketCodes [Cihaz.Gamecode] .EMIT ("bağlı", {});
}

Bağlantının hepsi ayarlandıktan sonra, 8 topa aşağıdaki komutla x ve z'den küçük bir itme vereceğiz ... 

 top 
 .SetlinearVelocity (yeni üç.Vektör3 (30, 0, 30));

04. Veri gönderme

Şimdi bağlantı kurulduğundan, gyro ve ivmeölçer değişkenlerini oyuna göndermek istiyoruz. Kullanarak pencere.ondivicemotion ve window.ondeviceorientation Etkinlikler, telefonumuzun aynı eğim hareketlerini havuza masasına taklit etmemiz gereken verilere sahibiz. Bu değerleri yaymak için 100ms aralığı kullanmayı seçtim. 

setinterval (işlev () {
  soket. ('Gyro gönder', [Math.Round (round), matematik. Yol (Rotx), AY, AX]);
}, aralıktım);

Müşteri tarafında, gelen değerleri sunucudan havuz tablosunun eğimine takılarak gecikmeyi çözeceğiz. Takviye için kullanıyoruz Tweenmax . 

 // Gelen GYRO verilerini işle
Socket.on ('Yeni Gyro', İşlev (Veri) {
  var degy = veri 
 & lt; 0? Matematik. (Veriler 
): -Data 
;
  Tweenmax.to (masa.Rotation, 0.3, {
    X: degtorad (Degy - 90),
    Y: degtorad (veri 
),
    Kolaylık: linear.easenone,
    OnUpdate: Function () {
        Tablo .__ DirtyRotation = True;
    }
  });
});

05. Ekstra etkinlikler

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile

Daha fazla top daha eğlenceye eşittir. Boşluk çubuğunu vurmayı veya cep telefonunuzun ekranına dokunmayı deneyin.

Biraz daha etkileşim vermek için, kullanıcının oynaması için birkaç ekstra etkinlik ekledim. Kullanıcıya, klavyedeki numaraları kullanarak 8 topun yanında ekstra top ekleme seçeneğini vereceğiz.

Başka biri masayı yukarı doğru sıçratmak. Bunun için boşluk çubuğuna çarpabilirsiniz. Ancak biz de denetleyici cihazında bir musluk etkinliği ekliyoruz. Bu, bilardo masasına bir etkinlik gönderir, bu da masayı yükseltir ve topları gönderir.

İlk önce klavye olaylarını yakalamamız gerekiyor ... 

 // Boşluk Çubuğu'ndaki Topları / Slam Masası Oluşturun
belge.addeventListener ('KeyDown', Function (E) {
  if (e.keycode == 49) {// tuşu: 1
    buildball (1);
  } Diğer ise (e.keycode == 50) {// tuşu: 1
    Buildball (2);
  } Diğer ise (e.keycode == 51) {// tuşu: 1
    buildball (3);
  } Diğer ise (e.keycode == 32) {// tuşu: Ara Çubuğu
    bouncetable ();
  }
});

iniltiball Fonksiyon, Küre 8 topunu oluşturmak için kullandığımız işlevdir. Sadece küreyi saracak farklı dokular kullanıyoruz. Tablayı yukarı iterek, tabloya bu kodla Y ekseni boyunca yukarı doğru bir hareket veriyoruz ... 

 Tablo.SetlinearVelocity (yeni üç.Vektör3 (0, 500, 0));

Sonuç

Add more balls and see how much your browser can handle

Daha fazla top ekleyin ve tarayıcınızın ne kadar idare edebileceğini görün

Bir oyun ya da başka bir şey için bir konseptiniz olduğunda, orada hayatınızı kolaylaştırabilecek kütüphaneler olması muhtemeldir. Bu, bunun nasıl çalışabileceğini gösteren bir demodur. Umarım bu, bazı yaratıcı fikirlerin kıvılcımlarına veya mevcut projenizde size yardımcı olacağını umuyoruz. Oyunun canlı bir örneğini görün İşte ya da üzerinde bul Github .

Bu makale başlangıçta 300 sayısında yayınlandı. ağ , dünyanın profesyonel web tasarımcıları ve geliştiricileri için en iyi dergisi. Sayı satın al 300 veya abone olun .

İlgili Makaleler:

  • Üç.js kullanarak webgl ile başlayın
  • 20 JavaScript Aklınızı Berelemek İçin Araçlar
  • Üç.js ile etkileşimli 3D görseller oluşturun

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

UserLook ile ücretsiz ve hızlı kullanıcı testleri yapın

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

Image: Getty Images Varsayımlar iş için kötüdür. Kötüler çünkü doğası gereği, dünyayı ve önyargılar..

Photoshop'ta bir logo nasıl yapılır

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

Photoshop'ta bir logoyu nasıl yapacağınızdan önce, odadaki filleri ele almalıyız - Photoshop CC akılda log..

Bir Elf Maide Boya Nasıl Boyayın

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

Bu eğitimde, bir Elf Maiden'ın büyüleyici bir fantezi portresi oluşturma sürecinde sizi yönlendireceğim. Hikayesi, bazı ..

Mandelbulb nasıl yapılır

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

Bir mandelbulb, giderek daha popüler hale gelen üç boyutlu bir fraktaldır. 3d sanat ve vfx. Bu yazıda, bir ma..

Kötü bir eşek GEISHA çizin

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

Bu Geisha illüstrasyonunda, zarif geleneksel Japon elemanları ile bağlanmış aşınmış, karanlık, kentsel bir vibe yakalam..

Animasyonlu bir bölünmüş ekran açılış sayfası oluşturun

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

Açılış sayfanızda çok önemli bir unsurdur. Web Sitesi Düzeni . İşinizi veya sattığınız ürünü tan�..

Yağlarda enerjik bir deniz manzarası boya

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

Malzemeler Sarah 50x50cm p..

Kroki tasarımlarınıza veri eklenir

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

Ekran tasarımı son birkaç yılda uzun bir yol kat etti. Heck, birkaç yıl önce 'ekran tasarımı' bile söylemedik. Grafik t..

Kategoriler