Üç.j içeren etkileşimli 3D görseller oluşturun

Bu WebGL eğitimi, CO2 seviyeleri değiştikçe dünyaya ne olduğunu gösteren bir 3D çevre simülasyonunun nasıl oluşturulacağını göstermektedir. (Daha fazla görebilirsiniz WebGL Deneyleri İşte.)

Kullanıcı, bir HTML giriş aralığı kaydırıcısını kullanarak seviyeleri kontrol eder. Kullanıcı daha fazla CO2 eklerken, sahnede daha fazla smog görünecektir, su seviyeleri sıcaklıktaki artış daha polar buz kapağı eritir, sonra ağaçlar suya batırıldıkları için kaybolur.

Öğeler, bir ara kütüphane kullanarak ve dışarıda animasyonludur ve kaydırıcıyı ters yönde sürükleyerek etkileri tersine çevirir. Keşke gerçek hayatta bu kadar kolay olsaydı!

01. Ekran Elemanları

Projeyi başlatmak için, kod IDE'nizdeki 'Başlat' klasörünü açın. Açmak index.html Ve orada zaten bazı kodlarla bir temel sayfa iskele olduğunu göreceksiniz. Gövde bölümünde, burada 3B içeriğe arabirim olarak kullanılacak olan ekran elemanlarını ekleyin.

 & lt; div id = "başlık" & gt;
  & lt; img src = "img / co2.png" id = "rozeti" & gt;
  & lt; / div & gt;
  & lt; div id = "iç" ve gt;
  & lt; giriş sınıfı = "slayt" türü = "aralığı" min = "0" max = "7" Adım = "1" değeri = "0" ONINPUT = "Showval (this.value)" & gt;
  P & GT; CO2 seviyesini değiştirmek için kaydırıcıyı sürükleyin; / P & GT;
  & lt; / div & gt; 

02. Kütüphaneleri bağlama

3B içerik, buraya dahil olan üç.js ile görüntüleniyor. Sahneye daha sonra bir Collada modeli eklenecek. Bunu yüklemek için ekstra kütüphane, temel bir ara kütüphane ile birlikte dahil edilmiştir. Bir sonraki satırlar, sonlandırma cilasını ekleyecek işleme efektlerine bağlanır.

 & lt; script src = "js / three.min.js" & gt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; / script & gt;
& lt; script src = "js / tween.min.js" & gt; / script & gt;
& lt; script src = 'JS / PostProcessing / EffortCOPSOPSER.JS' & GT; & lt; / script;
& lt; script src = 'JS / PostProcessing / renderpass.js' & gt; & lt; / script;
& lt; script src = 'JS / PostProcessing / ShaderPass.js' & gt; & lt; / script;
& lt; script src = 'JS / PostProcessing / Maskpass.js' & gt; 

03. İşleme sonrası gölgelendiriciler

Sahne her kareyi oluşturduktan sonra, bir dizi post işlem efekti eklenecektir. Bunlar, film tahıl etkisini güçlendiren kütüphanelerdir, ekranın üstünde ve altında bir eğim kayması bulanıklığı, daha sonra ekranın kenarlarına kaybolacak bir vignette.

04. Değişkenleri eklemek

Kodun bazıları sizin için tamamlandı. Öğreticinin Kodunun geri kalanını nereye ekleyeceğiniz bir yorum göreceksiniz. Bu 3B sahnede, ekran çözünürlüğüne, çeşitli 3B modellere ve sonrası işlemeye bakan bir dizi değişken kullanılır. İki önemli değişken suyolu su yüksekliği ve lastval , kaydırıcının son konumunu hatırlar.

 Var screen_width = window.innerwidth, screen_height = window.innerheight,
 mousex = 0, mousey = 0, windowhalfx = window.innerwidth / 2, windowhalfy = window.innerheight / 2, kamera, sahne, oluşturucu, su, su şoförü = 1;
var textureloader = yeni three.textureloader ();
var besteci, shadertime = 0, film geçidi, renderpass, copypass, effectVignette, grup, lastval = 0; 

05. Sahneyi Başlatma

Init işlevi, sahnenin başlangıcına doğru bakmadan sağlanmasını sağlamak için kodun büyük bir parçasıdır. Sayfaya bir konteyner eklenir ve bu 3D sahnenin görüntüleneceğidir. Bir kamera eklenir ve bazı arka plan sisini uzaklaştırır.

 İşlev Init () {
  var konteyner = belge. CreateEnement ('div');
  belge.body.appendchild (konteyner);
  kamera = yeni üç.Perspectivecamera (75, screen_width / screen_height, 1, 10000);
  camera.position.set (2000, 100, 0);
  sahne = yeni üç.scene ();
  sahne.fog = yeni üç.fogexp2 (0xb6d9e6, 0.0025);
  renderer = yeni three.webglrenderer ({
  Antialias: Doğru
  }); 

06. Renderörü ayarlama

Renderer bir arka plan rengi verilir ve çözünürlük, ekranın piksel oranı ile aynı boyuta ayarlanır. Gölgeler olay yerinde etkindir ve konteyner öğesinde sayfaya yerleştirilir. Gökyüzü ve zemin rengine sahip bir yarım küre ışığı eklenir.

renderer.setCleardcolor (0xADC9D4);
renderer.setpixelratio (window.devicepixelratio);
renderer.Setsize (Screen_Width, Screen_Height);
renderer.shadowmap.Enabled = true;
renderer.shadowmap.type = three.pcfsoftshadowmap;
konteyner.appendchild (renderer.domelement);
var lambası = yeni üç.Hemispheright (0xa1e2f5, 0x6f4d25, 0.5);
sahne.add (ışık); 

07. Gölgelendirici değişkenleri

Gölgeyi sonrası işlem efektlerini kontrol edecek değişkenler burada değer verilir. Bu değişkenler, görünümü kontrol edecek değerler eklemek için daha sonra kullanılacaktır. Params işlevine bakarsanız, bunun sizin için zaten tamamlandığını göreceksiniz.

 renderpass = yeni üç.Renderpass (sahne, kamera);
hblur = yeni three.shaderpass (üç.horizontaltiltshiftshader);
vblur = yeni üç.shaderpass (üç.verticalTiltshiftshader);
filmpas = yeni üç.shaderpass (üç.filmshader);
EffectVignette = yeni üç.shaderpass (üç.Vignetteshader);
copypass = yeni üç.shaderpass (üç.copyshader); 

08. Etkileri Oluşturma

Etkiler, bir etki besteci olarak adlandırılan bir şeye istiflenmelidir. Bu her etkiyi alır ve stilini kendisine uygular. Ardından, ekranda, oluşturma işlevinin daha sonra ne zaman eklendiğini göreceğiniz son bir sahne olarak görüntülenir.

09. Bulut görüntüsünün yüklenmesi

parametreler İşlev denir ve bu, post efektleri için bireysel parametreleri ayarlar. Yeni bir grup oluşturulur ve bu, nesnelerin grubunu döndürmeyi kolaylaştırmak için içindeki tüm sahne içeriğini tutacaktır. Şeffaf bir PNG görüntüsü, sahne içindeki bir sprite olarak kullanılacak bir bulut materyali olarak yüklenir.

 Params ();
  Grup = yeni üç.grup ();
  sahne.add (grup);
  var cloud = textureloader.load ("img / cloud.png");
  malzeme = yeni three.spritemalial ({
  Harita: Bulut, Opaklık: 0.6, Renk: 0x888888, Sis: Doğru
}); 

10. Döngü için çift

İlk içinde sekiz grup oluşturulur için döngü. Bu sekiz grupların hepsi, ikinci döngü için onlara 35 bulut bulur. Her bulut sahnenin üzerinde rastgele bir yere yerleştirilir. Gruplar, smog eklenmesini ve görselleştirmede kaldırılmasını göstermek için kullanıcı tarafından açılıp kapatılacaktır.

 için (J = 0; J & lt; J ++) {
  var g = yeni üç.grup ();
  için (i = 0; i & less; i ++) {
  var x = 400 * math.random () - 200;
  var y = 60 * math.random () + 60;
  var z = 400 * math.random () - 200;
  sprite = yeni üç.sprite (malzeme);
  sprite.position.set (x, y, z); 

11. Bulutu ölçeklendirmek

Bulut, sahnede görünmesini sağlayan bir boyuta kadar ölçeklendirilir. Birinci gruptan sonra her bulut grubu düştü, böylece renderer için neredeyse görünmezler. Bu, daha sonra onları tam boyutlarına kadar geri alarak görülebilecekleri budur, çünkü bu iyi bir ara çekme efekti verecektir.

12. Modeli Yükleme

Şimdi Collada Yükleyici yüklenecek şekilde ayarlandı. sahne.dae model. Yüklemeyi tamamladığında, model taranır ve bir mesh olarak gerçekleşen herhangi bir nesnenin gölgeler atmak için yapılır ve sahneye fazladan derinlik vermek için gölgeler alırlar.

 Var yükleyici = yeni üç.colladaloader ();
loader.Options.Convertupaxis = true;
loader.load ('Scene.dae', Function (Collada) {
  var dae = collada.scene;
  dae.traverse (fonksiyon (çocuk) {
  eğer (child priceof three.mesh) {
  child.castshadow = true;
  child.receiveshadow = true;
  }
}); 

13. Sahnede özellikleri bulmak

Model şimdi ekrana hazır olduğundan, sahneye uyacak şekilde doğru boyuta ayarlanır. Kodun suyun yüksekliğini spesifik olarak kontrol etmesi gerekir, böylece su modeli sahnede bulunur ve küresel değişkene geçti. Benzer şekilde, ana ışığın, proje gölgelerine ayarlanabilmesi için bulunması gerekir.

 dae.scale.x = dae.scale.y = dae.scale.z = 0.5;
dae.updatematrix ();
Group.add (dae);
su = sahne.getObjectbyname ("su", doğru);
su = su.bildren 
;
Light = Scene.GetObjectbyName ("Splight", true);
Light = Light.Children 
; 

14. Işık Ayarları

Şimdi spot ışığı bulduğundan, gölgeleri sahneye sokan özellikler kurulur. Yerin kenarındaki ışığın solması da burada belirlenir. Son olarak, model yüklenecek en büyük unsur olduğu için, bu kod çalıştırılmadan önce sahnenin geri kalanı ayarlanacaktır, bu nedenle render işlevi her kare olarak adlandırılabilir.

 Light.Target.position.set (0, 0, 0);
  light.castshadow = true;
   Light.Shadow = Yeni Three.lightShadow (Yeni Three.Perspectivecamera (90, 1, 90, 5000));
  Light.Shadow.Bias = 0.0008;
  light.shadow.mapsi.width = 1024;
  light.shadow.mapsi.height = 1024;
  light.penumbra = 1;
  light.decay = 5;
  render ();
}); 

15. Son başlatma kodu

Init işlevinin son kısmı, kamerayı konumlarına göre hareket ettirecek çeşitli fare ve dokunma girişlerini belirler. Bir etkinlik ayrıca, ekran yeniden boyutlandırılmış olup olmadığını dinlemek için kayıtlıdır ve bu, oluşturulan ekranı güncelleyecektir.

 belge.addeventlistener ('Mousemove', OnDocumentMousemove, FALSE);
  belge.addeventListener ('TouchStart', OnDocumentTouchStart, FALSE);
  belge.addeventlistener ('TouchMove', OnDocumentTouchMove, FALSE);
  window.addeventlistener ('yeniden boyutlandır', onwindowresize, false);
} 

16. Her kareyi oluşturma

Render işlevi, tarayıcı yönetebileceği için saniyede 60 kareye yakın olarak adlandırılacak şekilde ayarlanmıştır. Tüm modelleri içeren grup, her bir kare az miktarda döndürmeye ayarlanır. Kameranın konumu fareden veya dokunma girişinden güncellenir ve sahnenin ortasına bakmaya devam eder.

17. Ekranı güncellemek

Gölgelendirici süresi, her kare 0.1 oranında yükselen bir değişkendir ve bu film geçidi Böylece gürültülü film tahıl güncellenebilir. Etkiler Besteci güncellenir ve ekrana verilir. Sonunda ara motor da güncellendi.

 ShaderTime + = 0.1;
  filmpass.Uniforms ['time']. Değer = Shadertime;
  besteci.render (0.1);
  Tween.update ();
} 

18. Kullanıcı girişi almak

1. adımda eklenen giriş aralığı kaydırıcısı, showval Burada tanımlanan işlev. Kullanıcı bunu üzerine tıkladığında, sadece kaydırıcının taşındığını kontrol eder. Eğer taşınırsa, bir sonraki bulut grubu 0,8 saniyenin üzerinde bir arayla ölçeklendirilir. Su yüksekliği güncellenir ve bu da yeni yüksekliğe kadar kaldırılır.

 Function Showval (Val) {
  eğer (Val! = lastval) {
  if (val & gt; lastval) {
  Yeni Tween.Tween (Group.Children [Val] .Scale). ({x: 1, y: 1, z: 1}, 800) .Art (tween.iness.quadratic.inut) .Start ();
  waterht + = 0.07;
  Yeni Tween.Tween (su sceti). ({y: waterht}, 800) .Art (tween.asease.quadratic.inut) .start (); 

19. Ağaçları kapma

Sıcaklık değişkeni, mevcut ağaç grubunu bulur. Sahneden yok etmesi gereken ve burada onları YS ekseni üzerinde bir ara ile düşürür. Elastik bir rahatlama, bu nedenle bu, ekranda hoş bir efekt için görüşten çıkacak şekilde kullanılır. Daha fazla su ve bulutlar olay yerindeyken, ağaçlar kaybolur.

20. Karşı giriş

İlk içerik, kaydırıcının yukarı doğru kaydırıldığı takdirde veya sağa kontrol edilir. Şimdi kod, kullanıcıyı sola kaydırır. Bulutlar bir ara ile aşağıya doğru ölçeklenir ve bu nedenle yeryüzünde bir soğutma etkisi gösterecek su seviyesidir.

 Yeni Tween.Tween (Group.Children [LastVal] .Scale). ({X: 0,001, Y: 0.001, Z: 0.001}, 800) .Art (tween.aseasing.quadratic.inut) .Start ( );
Waterht - = 0.07;
Yeni Tween.Tween (su sceti). ({y: waterht}, 800) .Art (tween.asease.quadratic.inut) .start (); 

21. bitirme

Son adım ağaçları geri getirmektir, bu nedenle elastik bir ara ile orijinal boyutlarına geri döndürülürler. Sahneyi kaydedin ve web sayfasını kendi bilgisayarınızda veya bir Web sunucusunda barındırılan bir sunucudan görüntüleyin. Sahne ekranını değiştirmek için fare hareketi ve kaydırıcı ile etkileşime girebileceksiniz.

Bu makale başlangıçta ortaya çıktı Web tasarımcısı Sayı 265. satın al İşte .

İlgili Makaleler:

• Artırılmış bir gerçeklik belirteci nasıl kodlanır?
• 20 İnanılmaz WebGL örneği
• Web Tasarımında 3D'nin 9 Parlak Kullanımı