Cara melelehkan objek 3D dengan three.js

Sep 12, 2025
Bagaimana caranya

Web seperti yang kita ketahui, terus-menerus berubah dan berkembang. Apa yang masih bisa kita ingat sebagai media sederhana dan langsung mendapatkan dimensi lain beberapa tahun yang lalu, dan sepertinya tidak akan berhenti di sana. Untuk sebuah Pembangun Situs Web , Apa yang dulu merupakan bagian dari film fiksi-fiksi efek visual sekarang dimungkinkan pada tablet yang berbaring di sofa Anda, dan ada bangunan yang tercakup dalam instalasi interaktif skala besar yang sebenarnya hanya Jendela Fullscreen Google Chrome.

Ikuti langkah-langkah di bawah ini untuk mencari tahu cara membuat efek peleburan yang realistis dengan three.js.

01. Siapkan adegan three.js

Silakan dan ambil perpustakaan threen.js dan sertakan di situs Anda. Anda harus instantiate the Webglrenderer, adegan dan perspektif. Setelah ini dipakai, Anda perlu membuat adegan PermintaanMasiFrame. .

02. Tambahkan pencahayaan ke tempat kejadian

Selanjutnya, lampu perlu ditambahkan ke adegan 3D. Dalam contoh ini, dua lampu akan digunakan: lampu ambient dan lampu titik. Lampu ambient berfungsi sebagai warna global secara keseluruhan untuk adegan, sedangkan titik cahaya akan memancarkan cahaya yang berkurang dengan jarak. Ini akan memberikan perbedaan yang berbeda. 

 var ambientlight = New three.ambarlight (0xccccccc);
adegan.add (ambientasilight);
var pointlight = baru tiga.pointlight (0xffffff, 1);
pointlight.position.set (10, 5, 0);

03. Muat model 3D

Sekarang adegan telah diatur, model 3D perlu dimuat. Model dapat dimuat menggunakan format yang didukung (JSON, OBJ, DAE, dll). Di bawah ini adalah contoh memuat model DAE. Dalam contoh ini, sangat penting bahwa model memiliki poligon yang cukup untuk melakukan modifikasi vertex.

Tengkorak rusa yang digunakan dalam contoh ini memiliki 3.500 polis. Jika jumlah poli terlalu rendah, animasi vertex akan terlalu eksplisit dan terdistorsi. 

 loader = new threen.colladaloader ();
loader.load ('dae / deer_skull / deer_skull.dae', onloadcompleteHandler);

04. Tambahkan Peta Bump

Bump Maps sangat cocok untuk menambah kedalaman pada tekstur Anda dengan biaya rendah. Setelah Anda membuat gambar Bump Map Anda, Anda dapat mengimplementasikannya hanya dengan menerapkannya pada bahan seperti di bawah ini. Juga, Anda harus menyesuaikan skala peta benjolan Anda agar sesuai dengan skala model Anda. 

 Bahan.bumpmap = 'img / deer_skull / deer-benjol.jpg';
material.bumpscale = 0,008;

05. Gunakan animator vertex

Di seluruh situsnya, Johnny menggunakan ekstensi permainan oleh Jerome Etienne untuk tiga.js yang membuatnya lebih mudah untuk melakukan animasi vertex. Ekstensi ini memungkinkan akses mudah ke setiap simpul model pada frame rate, membuatnya mudah untuk memanipulasi simpul menggunakan bentuk gelombang.

Itu Ekstensi animasi vertex. tersedia melalui Github Etienne. Kami akan melangkah lebih jauh ke dalam bagaimana itu digunakan dalam langkah selanjutnya.

Users can interact with the 3D model and view from multiple angles

Pengguna dapat berinteraksi dengan model 3D dan melihat dari beberapa sudut

06. Mulai Melting.

Melelehkan geometri melibatkan beberapa langkah keseluruhan. Pertama, setiap titik terus didorong ke bawah. Ketika suatu titik mencapai tanah, itu didorong ke luar menggunakan apa yang akan kita sebut 'push vector'.

Selanjutnya, kami akan memberikan poin yang berkumpul di sepanjang bagian bawah ketebalan sehingga geometri yang meleleh tidak sepenuhnya datar. Untuk mencapai ini, Johnny memiliki kode porting dari Skeel Lee VFX Shader di Houdini dan memodifikasinya.

07. Mulai gerakkan simpul ke bawah

Di bawah ini adalah contoh penggunaan penggunaan vertex animator untuk terus mendorong geometri model ke arah tanah. 

 var vertexanimation = New threex.vertexanimation (geometri, fungsi (asal, posisi, delta, sekarang) {posisi.y - = meltamount * modelyight;}

Ini akan mendorong poin pada tingkat yang ditentukan oleh meltamount. . Ingatlah untuk juga memanggil 'pembaruan' pada animasi titik Anda dalam siklus render.

08. Tentukan vektor push

Ketika suatu titik telah mencapai tanah, perlu didorong ke luar untuk mencapai efek meleleh. Kode di bawah ini menentukan arah mana dalam sumbu X dan Z untuk mendorong vertex sehingga Anda mendapatkan perpindahan yang seragam. Bersyarat memastikan bahwa hanya poin yang telah mencapai batas terendah dari model (tanah) didorong ke luar. 

if (posisi.y & lt; bbox.min.y) {
  var centroid = bbox.max.clone (). Tambahkan (Bbox.min.Clone ()). Dividescalar (2.0);
pushvector = posisi.clone (). sub (centroid);
pushvector.y = 0; }

09. Buat meleleh terasa alami

Kode di bawah ini menggunakan noise untuk membuat keacakan dalam gerakan sehingga meleleh terasa organik. Variabel kebisingan dapat di-tweak untuk mendapatkan efek yang diinginkan. Kebisingan kemudian diterapkan pada vektor dorong bersama dengan meltamount. dan Spreadamount. untuk mengontrol laju dan ukuran kolam yang meleleh. Vektor luar ini akhirnya dihitung dan kemudian diterapkan pada vertex itu sendiri. 

 var n = noiseameplitude * generator.getval ((posisi.x) * noisefrequency + noiseoffset);
var outwardvector = pushvector.multiplyscalar (((melltamount * spreadamount) + n) * Wirstwardspeed);
posisi.add (outwardvector);

10. Berikan ketebalan kolam yang meleleh

Kode yang dijelaskan sejauh ini akan mencapai efek meleleh, tetapi dua hal salah dengannya. Pertama, kolam akan terasa cukup datar, karena semua poin telah meleleh ke posisi y yang sama. Kedua, karena mereka semua berbagi y yang sama, terlalu banyak poin akan ditumpuk pada ketinggian yang sama, yang dapat menyebabkan berkedip. Untuk menghindari ini, ketebalan diterapkan pada tingkat meleleh: 

 Posisi. + = Meltamount * poolthickness;

11. Cobalah pada model lain

Dengan kode di atas, model apa pun dengan poligon yang cukup dapat dilebur. Unduh file zip out kode sini dan bertukar model dengan apa pun yang Anda inginkan. Selamat bersenang-senang!

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

Artikel terkait:

  • Buat visual 3D interaktif dengan three.js
  • Alat warna terbaik untuk desainer web
  • Waspadai ujung tombak desain web

Bagaimana caranya - Artikel Terpopuler

4 langkah untuk menggunakan font variabel

Bagaimana caranya Sep 12, 2025

(Kredit Gambar: Masa Depan) Font variabel memungkinkan perancang font untuk menentukan variasi jenis dalam font itu s..

10 cara untuk menciptakan animasi karakter yang lebih baik

Bagaimana caranya Sep 12, 2025

Dengan ukuran industri 3D yang tumbuh tahun ke tahun, ini lebih penting daripada sebelumnya untuk memastikan pekerjaan Anda menonjol dari kerumunan. Apa pun tingkat keahlian Anda sebagai arti..

8 Aturan Emas Desain Seluler

Bagaimana caranya Sep 12, 2025

Desain seluler adalah pertimbangan yang relatif baru tetapi vital. Hanya satu dekade yang lalu, merancang untuk web yang berarti ..

mulai dengan express.js

Bagaimana caranya Sep 12, 2025

Membuat aplikasi yang menghadap browser dengan node.js menjadi membosankan. Express.js. adalah Kerangka Ja..

Cara melukis adegan desa Inggris tradisional

Bagaimana caranya Sep 12, 2025

Gereja-gereja abad pertengahan, padang rumput hijau dan rumah-rumah pertanian batu tulis identik dengan desa-desa yang mengotori ..

Desain grafis SVG di browser Anda

Bagaimana caranya Sep 12, 2025

Itu Editor Veceezy adalah suite pengeditan vektor gratis yang berjalan tepat di browser Anda. Tutorial ini mencaku..

Bagaimana cara menguasai naungan kulit dalam 3D

Bagaimana caranya Sep 12, 2025

Untuk waktu yang lama sekarang saya terjebak dalam kebiasaan dengan saya Seni 3d. . Bukan dengan membuat model ata..

Buat karakter 3D Furry dari awal

Bagaimana caranya Sep 12, 2025

Menciptakan karakter bulu bisa mudah, tetapi jika Anda ingin membuat buah berbulu yang benar-benar menarik Seni 3d. ..

Kategori