Come sciogliere un oggetto 3D con tre.js

Sep 11, 2025
Come si fa

Il web come lo conosciamo, cambia e in evoluzione costantemente. Ciò che possiamo ancora ricordare come un mezzo semplice e diretto, ha guadagnato un'altra dimensione alcuni anni fa, e non sembra che ci fermerà nemmeno lì. Per un Builder del sito web , Quello che una volta era parte degli effetti visivi del film di fantascienza è ora possibile su un tablet sdraiato sul tuo divano, e ci sono edifici coperti da installazioni interattive su larga scala che sono in realtà solo finestre di Google cromato a schermo intero.

Seguire i passaggi seguenti per scoprire come creare un effetto di fusione realistico con tre.js.

01. Impostare la scena Three.js

Vai avanti e prendi la biblioteca dei tre.js e includilo nel tuo sito. Dovrai istanziare il webglrendarer, la scena e la prospectivecamera. Dopo che questi sono istanziati, dovrai rendering della scena RichiestaNiMationFrame. .

02. Aggiungi l'illuminazione alla scena

Successivamente, le luci devono essere aggiunte alla scena 3D. In questo esempio, verranno utilizzate due luci: una luce ambientale e una luce del punto. La luce ambientale serve come un colore globale generale per la scena, mentre la luce del punto emetterà luce che diminuisce con la distanza. Questo darà alla scena un certo contrasto. 

 VAR AMBIENTLICK = NUOVO TRE THRE.AmbENTHLIGHT (0XCCCCCCC);
scena.add (ambientlight);
Var Pointlight = nuovo tre.Pozzo (0xFFFFFFF, 1);
Pointlight.position.set (10, 5, 0);

03. Carica il modello 3D

Ora che la scena è stata impostata, il modello 3D deve essere caricato. Il modello può essere caricato utilizzando qualsiasi formato supportato (JSON, OBJ, DAE, ecc.). Di seguito è riportato un esempio di caricamento di un modello DAE. In questo esempio, è molto importante che il modello abbia abbastanza poligoni per eseguire modifiche vertice.

Il cranio dei cervi che viene utilizzato in questo esempio ha 3.500 Polys. Se il conteggio poli è troppo basso, le animazioni Vertex saranno troppo esplicite e distorte. 

 caricatore = nuovo tre.colladaloader ();
caricatore.load ('daae / deer_skull / deer_skull.dae', onloadcompletehandler);

04. Aggiungi una mappa Bump

Bump Maps sono perfetti per aggiungere profondità alle tue trame a basso costo. Una volta creata l'immagine della mappa Bump, puoi implementarlo semplicemente applicandolo al materiale come di seguito. Inoltre, dovrai regolare la scala della tua bump map per adattarsi alla scala del tuo modello. 

 materiale.bumpmap = 'img / deer_skull / deer-bump.jpg';
materiale.bumpscale = .008;

05. Utilizzare il vertice animatore

Durante il suo sito, Johnny utilizza un'estensione di gioco di Jerometienne per tre.js che rende più facile fare animazioni di vertice. Questa estensione consente un facile accesso a ciascun vertice di un modello al frame rate, rendendolo semplice per manipolare i vertici usando forme d'onda.

Il Estensione dell'animazione vertice. è disponibile tramite GitHub di Etienne. Andremo più di come è usato nei prossimi passi.

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

Gli utenti possono interagire con il modello 3D e visualizzare da più angoli

06. Inizia a fusione

Sciogliere un pezzo di geometria coinvolge alcuni passaggi generali. Innanzitutto, ogni punto viene continuamente spinto verso il basso. Quando un punto raggiunge il terreno, viene spinto verso l'esterno usando ciò che chiameremo un "vettore di spinta".

Successivamente, daremo i punti che si riuniscono lungo il fondo uno spessore in modo che la geometria fusa non sia completamente piatta. Per raggiungere questo obiettivo, Johnny ha portato il codice da Skeel Lee's VFX Shader a Houdini e lo ha modificato.

07. Inizia a spostare i vertici verso il basso

Di seguito è riportato un esempio di utilizzo dell'uso del vertice animatore per spingere continuamente la geometria di un modello verso il terreno. 

 VertExanimation = nuovo Threex.vertexanimation (geometria, funzione (origine, posizione, delta, ora) {posizione.y - = meltamount * modelheight;}

Questo spingerà punti verso il basso alla tariffa definita dal meltamount. . Ricordati di chiamare anche "Aggiorna" sull'animazione del vertice nel ciclo di rendering.

08. Determina il vettore di spinta

Quando un punto ha raggiunto il terreno, deve essere spinto verso l'esterno per raggiungere un effetto fuso. Il codice qui sotto sta determinando quale direzione negli assi X e Z per spingere il vertice in modo da ottenere uno spostamento uniforme. Lo Conditional garantisce che solo i punti che hanno raggiunto i limiti più bassi del modello (il terreno) siano spinti verso l'esterno. 

if (posizione.y & lt; bbox.min.y) {
  VAR Centroid = bbox.max.clone (). ADD (BBOX.MIN.Clone ()). DividesCalar (2.0);
PushVector = Posizione.Clone (). Sub (Centroid);
pushvector.y = 0; }

09. Fai sentire il fuso naturale

Il codice seguente utilizza il rumore per creare casualità nel movimento in modo che il fuso si sente organico. Le variabili del rumore possono essere modificate per ottenere l'effetto desiderato. Il rumore viene quindi applicato al vettore push insieme a meltamount. e Spreadamount. per controllare la velocità e la dimensione del pool fuso. Questo vettore esteriore viene finalmente calcolato e poi applicato al vertice stesso. 

 VAR N = NOISEAMPLITUDE * Generator.Getval ((posizione.x) * NoiseFrequenza + rumoreoffset);
VAR EXTWWWWWREWRECTOR = Pushvector.multiplyscaLar ((((Meltamount * SpreadAmount) + N) * OutwardsPeed);
posizione.Aggiungere (EmwardVector);

10. Dare lo spessore dello stagno fuso

Il codice spiegato finora raggiungerà l'effetto fuso, ma due cose sono sbagliate in questo. Innanzitutto, la piscina si sentirà abbastanza piatta, perché tutti i punti si sono sciolti nella stessa posizione Y. In secondo luogo, dal momento che tutti condividono gli stessi y, troppi punti saranno impilati alla stessa altezza, che possono causare tremolare. Per evitare questo, uno spessore viene applicato al tasso di fusione: 

 Posizione.Y + = Meltamount * POOLTHICKNESS;

11. Provalo su altri modelli

Con il codice sopra, qualsiasi modello con abbastanza poligoni può essere fuso. Scarica un file ZIP fuori il codice Qui e scambia il modello con tutto ciò che vorresti. Divertiti!

Questo articolo è originariamente apparso in Web designer Numero 265. Compralo Qui .

Articoli Correlati:

  • Creare immagini 3D interattive con tre.js
  • I migliori strumenti di colore per i web designer
  • Attenzione al tagliente del web design

Come si fa - Articoli più popolari

Come storyboard in Photoshop

Come si fa Sep 11, 2025

(Credito immagine: Mark Evan Lim) Storyboarding in Photoshop può essere un ottimo modo per far uscire le tue idee. I..

Come aggiungere font in Photoshop

Come si fa Sep 11, 2025

(Immagine di immagine: Adobe) Caratteri in Photoshop: collegamenti rapidi - Aggiun..

Come disegnare la prospettiva

Come si fa Sep 11, 2025

Imparare a disegnare correttamente la prospettiva potrebbe cambiare il tuo intero processo di disegno. Sia che si disegna tradizionalmente con la matita e la carta, o utilizzando digitalmente..

7 migliori consigli per iniziare la propria attività

Come si fa Sep 11, 2025

Se ti sei sentito bloccato in una solia creativa, potrebbe valere la pena di avere un momento per fare il punto della tua carrier..

21 modi per ottimizzare il tuo CSS e accelerare il tuo sito

Come si fa Sep 11, 2025

CSS deve passare attraverso una pipeline relativamente complessa, proprio come HTML e JavaScript. Il browser deve scaricare i fil..

Come dipingere una fanciulla Elfa

Come si fa Sep 11, 2025

In questo tutorial, ti guiderò attraverso il mio processo per creare un accattivante ritratto fantastico di una fanciulla Elven...

Dipingi una lepre maliziosa in acquerello

Come si fa Sep 11, 2025

Avendo studiato zoologia, animali e fauna selvatica sono sempre stata una grande passione per me e non mi stanco mai di diparlarli. Siamo abbastanza fortunati da vivere nella campagna del Lin..

Costruisci un sito di e-commerce da zero

Come si fa Sep 11, 2025

Ecommerce è diventato così popolare negli ultimi anni è ora difficile immaginare un futuro senza di esso. Il potere di Interne..

Categorie