Buat visual 3D interaktif dengan three.js

Tutorial WebGL ini menunjukkan cara membuat simulasi lingkungan 3D yang menunjukkan apa yang terjadi pada dunia sebagai perubahan kadar CO2. (Anda dapat melihat lebih banyak Eksperimen WebGL sini.)

Pengguna mengontrol level menggunakan slider rentang input HTML. Ketika pengguna menambahkan lebih banyak CO2, lebih banyak kabut nakal akan muncul di tempat kejadian, ketinggian air akan naik karena peningkatan suhu meleleh lebih banyak topi es kutub, maka pohon akan menghilang saat mereka terbenam dalam air.

Elemen-elemen animasi masuk dan keluar menggunakan pustaka tween dan menyeret slider ke arah yang berlawanan akan membalikkan efek. Kalau saja itu mudah dalam kehidupan nyata!

01. Menampilkan elemen.

Untuk memulai proyek, buka folder 'Mulai' di IDE Kode Anda. Buka index.html Dan Anda akan melihat ada perancah halaman dasar di sana dengan beberapa kode. Di bagian Tubuh, tambahkan elemen tampilan di sini yang akan digunakan sebagai antarmuka ke konten 3D.

 & lt; div id = "header" & gt;
  & lt; img src = "img / co2.png" id = "badge" & gt;
  & lt; / div & gt;
  & lt; div id = "batin" & gt;
  & lt; input class = "slide" type = "rentang" min = "0" max = "7" langkah = "1" nilai = "0" onInput = "showval (ini.value)" & gt;
  & lt; p & gt; seret slider untuk mengubah level CO2 & lt; / p & gt;
  & lt; / div & gt; 

02. Menghubungkan perpustakaan

Konten 3D sedang ditampilkan melalui Tiga.js, yang disertakan di sini. Model Collada akan ditambahkan ke tempat kejadian nanti. Perpustakaan ekstra untuk memuat ini disertakan, bersama dengan pustaka dasar tween. Baris selanjutnya semua menautkan untuk memposting efek pemrosesan yang akan menambah cat finishing.

 & lt; script src = "js / threen.min.js" & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "js / tween.min.js" & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / effectompose.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / renderpass.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / shaderpass.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / maskpass.js' & gt; & lt; / script & gt; 

03. shader pemrosesan pos

Setelah adegan telah membuat setiap bingkai, sejumlah efek proses pasca akan ditambahkan. Ini adalah perpustakaan yang memberdayakan efek butir film, blur tilt shift di bagian atas dan bawah layar, maka akhirnya sketsa untuk memudar ke tepi layar.

04. Menambahkan variabel

Beberapa kode telah selesai untuk Anda. Anda akan melihat komentar di mana untuk menambahkan sisa kode tutorial. Sejumlah variabel digunakan dalam adegan 3D ini, yang melihat resolusi layar, berbagai model 3D dan pemrosesan pos. Dua variabel penting adalah Waterht. untuk ketinggian air dan lastval. , yang mengingat posisi terakhir dari slider.

 var screen_width = window.innerwidth, screen_height = window.inneright,
 mousex = 0, mousey = 0, windowhalfx = window.innerwidth / 2, windowhalfy = window.innerheight / 2, kamera, adegan, renderer, air, waterht = 1;
var textureloader = New threen.textureadoader ();
var composer, shadertime = 0, filmpass, renderpass, copypass, efekvignette, group, lastval = 0; 

05. Inisialisasi adegan

Fungsi init adalah bagian besar dari kode, memastikan adegan diatur dengan tampilan yang tepat di awal. Wadah ditambahkan ke halaman, dan di sinilah adegan 3D akan ditampilkan. Kamera ditambahkan dan beberapa kabut latar belakang untuk memudar jarak.

 Fungsi init () {
  var wadah = dokumen.createteelement ('div');
  dokumen.body.appendchild (wadah);
  kamera = baru tiga.perpotongpiveecamera (75, screen_width / screen_height, 1, 10000);
  camera.position.set (2000, 100, 0);
  adegan = tiga baru.Scene ();
  adegan.fog = baru tiga.fogexp2 (0xb6d9e6, 0,0025);
  Renderer = New Three.webglrenderer ({
  Antialias: Benar.
  }); 

06. Mengatur Renderer

Renderer diberikan warna latar belakang dan resolusinya diatur ke ukuran yang sama dengan rasio piksel layar. Bayangan diaktifkan dalam adegan, dan ditempatkan pada halaman dalam elemen kontainer. Lampu belahan ditambahkan, yang memiliki langit dan warna tanah.

renderer.setclearcolor (0xadc9d4);
renderer.setpixelratio (window.devicepixelratio);
Renderer.Setsize (Screen_Width, Screen_Height);
renderer.shadowmap.Enabled = Benar;
renderer.shadowmap.type = three.pcfsoftshadowmap;
wadah.appendchild (renderer.domelement);
var light = new threen.hemispherelight (0xA1E2F5, 0x6F4D25, 0.5);
adegan.add (cahaya); 

07. Variabel Shader.

Variabel yang akan mengontrol efek proses pasca shader diberikan nilai-nilai mereka di sini. Variabel-variabel ini akan digunakan nanti untuk menambah nilai yang akan mengontrol tampilan. Jika Anda melihat dalam fungsi params Anda akan melihat ini sudah selesai untuk Anda.

 RenderPass = New Three.RenderPass (Scene, Camera);
hblur = new threen.shaderpass (tiga.horizontaltiltshiftshader);
vblur = new threen.shaderpass (tiga.BrealtiltShiftshader);
Filmpass = New Three.Shaderpass (Three.filmshader);
EffectVignette = New Three.Shaderpass (three.vignetteshader);
copypass = new threen.shaderpass (threen.copyshader); 

08. Menulis efeknya

Efeknya harus ditumpuk dalam sesuatu yang disebut komposer efek. Ini mengambil setiap efek dan menerapkan gaya untuk itu. Maka semuanya ditampilkan sebagai adegan terakhir di layar, yang akan Anda lihat ketika fungsi render ditambahkan nanti.

09. Memuat gambar cloud

Itu params. Fungsi dipanggil dan ini menetapkan parameter individu untuk efek posting. Grup baru dibuat dan ini akan menampung semua konten adegan di dalamnya, untuk membuatnya mudah untuk memutar grup objek. Gambar PNG transparan dimuat sebagai bahan cloud untuk digunakan sebagai sprite dalam adegan.

 params ();
  grup = baru tiga. grup ();
  adegan.add (grup);
  var cloud = textureloader.load ("img / cloud.png");
  bahan = tiga baru.Sepritematerial ({
  Peta: Cloud, Opacity: 0.6, Warna: 0x888888, Fog: True
}); 

10. Ganda untuk loop

Delapan kelompok dibuat di dalam yang pertama untuk loop. Delapan kelompok ini semua mendapatkan 35 awan ditambahkan ke dalam kedua untuk loop. Setiap awan ditempatkan di lokasi acak di atas adegan. Grup akan dihidupkan dan dimatikan dengan slider oleh pengguna untuk menunjukkan kabut asap ditambahkan dan dihapus dalam visualisasi.

 untuk (j = 0; j & lt; 8; j ++) {
  var g = new thread.group ();
  untuk (i = 0; i & lt; 35; i ++) {
  var x = 400 * math.random () - 200;
  var y = 60 * math.random () + 60;
  var z = 400 * math.random () - 200;
  sprite = new thread.sprite (bahan);
  sprite.position.set (x, y, z); 

11. Mensyalakan awan

Cloud ditingkatkan ke ukuran yang memungkinkannya terlihat di tempat kejadian. Setiap kelompok awan setelah kelompok pertama ditingkatkan sehingga mereka hampir tidak terlihat oleh renderer. Ini adalah bagaimana mereka akan dibuat terlihat kemudian dengan meningkatkannya kembali ke ukuran penuh mereka, karena ini akan memberikan efek tween yang baik.

12. Memuat model

Sekarang collada loader diatur untuk memuat adegan.dae model. Ketika selesai memuat, model ini dipindai dan objek apa pun yang merupakan mesh dibuat untuk mengajukan bayangan dan menerima bayangan untuk memberikan beberapa kedalaman ekstra untuk adegan.

 var loader = new threen.colladaloader ();
loader.Options.convertUpAxis = Benar;
loader.load ('adegan.dae', fungsi (collada) {
  var dae = collada.scene;
  dae.traverse (fungsi (anak) {
  Jika (instance anak tiga.mesh) {
  child.castshadow = true;
  child.receiveshadow = true;
  }
}); 

13. Menemukan spesifik dalam adegan

Ketika model sekarang siap untuk ditampilkan, diatur ke ukuran yang tepat agar sesuai dengan pemandangan. Kode ini perlu secara khusus mengontrol ketinggian air sehingga model air ditemukan dalam adegan dan diteruskan ke variabel global. Demikian pula cahaya utama perlu ditemukan sehingga dapat diatur ke bayangan proyek.

 dae.scale.x = dae.scale.y = dae.scale.z = 0,5;
dae.updatematrix ();
group.add (dae);
air = adegan.getobjectbyname ("air", benar);
air = air.Children 
;
cahaya = adegan.getobjectbyname ("ramplight", benar);
Light = Light.Children 
; 

14. Pengaturan cahaya

Sekarang sebagai sorotan ditemukan spesifik yang membuatnya melemparkan bayangan ke dalam adegan diatur. Memudar cahaya di tepi tempat juga diatur di sini. Akhirnya, seperti model adalah elemen terbesar untuk dimuat, sisa adegan akan diatur sebelum kode ini dijalankan, oleh karena itu fungsi render dapat disebut setiap frame.

 light.target.position.set (0, 0, 0);
  Light.castShadow = Benar;
   Light.Shadow = New Three.LightShadow (New Three.pertectiveVeCamera (90, 1, 90, 5000));
  Light.Shadow.bias = 0,0008;
  cahaya.shadow.mapsize.width = 1024;
  cahaya.shadow.mapsize.height = 1024;
  cahaya.penumbra = 1;
  cahaya.decay = 5;
  memberikan();
}); 

15. Kode inisialisasi terakhir

Bagian terakhir dari fungsi init mengatur berbagai input mouse dan sentuh yang akan menggerakkan kamera berdasarkan posisi mereka. Acara juga terdaftar untuk mendengarkan jika layar diubah ukurannya dan ini akan memperbarui tampilan yang diberikan.

 Document.AddEventListener ('Mousemove', OnDocumentMousemove, FALSE);
  Document.AddEventListener ('TouchStart', OnDocumentTouchStart, false);
  document.addeventlistener ('touchmove', ondocumenttouchmove, false);
  window.addeventlistener ('Ubah ukuran', OnWindowResize, FALSE);
} 

16. Rendering setiap bingkai

Fungsi render diatur untuk disebut mendekati 60 frame per detik karena browser dapat mengelola. Grup, yang berisi semua model, diatur untuk memutar dengan jumlah kecil setiap bingkai. Posisi kamera diperbarui dari mouse atau input sentuh dan terus melihat pusat adegan.

17. Memperbarui tampilan

Waktu shader adalah variabel yang baru saja naik 0,1 setiap frame dan ini diteruskan ke Filmpass. Sehingga gandum film noise dapat diperbarui. Komposer efek diperbarui dan diterjemahkan ke layar. Akhirnya Mesin Tween juga diperbarui.

 Shadertime + = 0,1;
  Filmpass.uniforms ['waktu']. Nilai = shadertime;
  komposer.render (0,1);
  Tween.update ();
} 

18. Mendapatkan input pengguna

Slider rentang input, ditambahkan pada langkah 1, memanggil Showval. fungsi, yang didefinisikan di sini. Ketika pengguna mengklik ini, itu hanya memeriksa bahwa slider telah dipindahkan. Jika sudah naik maka kelompok cloud berikutnya ditingkatkan dengan tween lebih dari 0,8 detik. Tinggi air diperbarui dan ini juga tweened hingga ketinggian baru.

 Fungsi showval (val) {
  Jika (val! = lastval) {
  Jika (Val & gt; lastval) {
  New tween.tween (group.children [val] .to ({x: 1, y: 1, Z: 1}, 800) .easing (tween.easing.quadratic.inout). Mulai ();
  WaterHT + = 0,07;
  New Tween.Tween (Water.Scale) .to ({y: waterht}, 800) .easing (tween.easing.quadratic.inout). 

19. Meraih Pohon

Variabel TEMP menemukan kelompok pohon saat ini yang harus dihilangkan dari tempat kejadian dan di sini membayangkannya dengan tween pada sumbu Y saja. Pelonggaran elastis digunakan sehingga mata air ini tidak terlihat di layar untuk efek yang menyenangkan. Karena lebih banyak air dan awan berada di tempat kejadian, pohon-pohon menghilang.

20. Input berlawanan

Konten pertama memeriksa apakah slider meluncur ke atas, atau ke kanan. Sekarang kode mendeteksi pengguna meluncur ke kiri. Awan ditingkatkan dengan tween dan begitu juga air untuk menunjukkan efek pendinginan di bumi.

 New Tween.Tween (Group.Children [Lastval] .to ({x: 0,001, Y: 0,001, Z: 0,001}, 800) .easing (tween. );
WaterHT - = 0,07;
New Tween.Tween (Water.Scale) .to ({y: waterht}, 800) .easing (tween.easing.quadratic.inout). 

21. Finishing Up

Langkah terakhir adalah mengembalikan pepohonan, sehingga mereka diperkecil kembali ke ukuran aslinya dengan tween elastis. Simpan adegan dan lihat halaman web dari server yang dihosting secara lokal di komputer Anda sendiri atau di server web. Anda akan dapat berinteraksi dengan gerakan mouse dan slider untuk mengubah tampilan adegan.

Artikel ini awalnya muncul di Desainer web masalah 265. Beli sini .

Artikel terkait:

• Cara Kode Marker Augmented Reality
• 20 contoh luar biasa dari WebGL beraksi
• 9 Penggunaan brilian dari 3D dalam desain web