Cum să topiți un obiect 3D cu trei.js

Sep 11, 2025
să

Web-ul pe care îl cunoaștem, se schimbă în mod constant și evoluează. Ceea ce ne putem aminti în continuare ca un mediu simplu și simplu a câștigat o altă dimensiune cu câțiva ani în urmă și nu arată ca și cum o va opri și acolo. Pentru o Builder de site-uri web , ceea ce a fost odată parte a filmului științific-ficțiune efectele vizuale este acum posibil pe o tabletă situată pe canapea dvs. și există clădiri acoperite în instalații interactive la scară largă, care sunt de fapt doar ferestre Google Chrome Google.

Urmați pașii de mai jos pentru a afla cum să creați un efect de topire realist cu trei.

01. Configurați scena trei.js

Continuați și luați biblioteca Three.js și includeți-o în site-ul dvs. Va trebui să instanțeze webglrenderer, scena și perspectivacamera. După acestea, sunt instanțiate, va trebui să faceți scena CerereanimațieFrame .

02. Adăugați iluminat la scenă

Apoi, luminile trebuie adăugate la scena 3D. În acest exemplu, vor fi utilizate două lumini: o lumină ambientală și o lumină punct. Lumina ambientală servește ca o culoare globală globală pentru scenă, în timp ce lumina punctului va emite lumină care diminuează distanța. Acest lucru va da scena un contrast. 

 var ambientlight = noul trei.Ambient (0xccccccc);
scena.add (ambientlight);
Var Soorlight = Noua 3 Indicație (0xffffff, 1);
litelight.position.set (10, 5, 0);

03. Încărcați modelul 3D

Acum că scena a fost înființată, modelul 3D trebuie să fie încărcat. Modelul poate fi încărcat utilizând orice format acceptat (JSON, OBSJ, DAE etc.). Mai jos este un exemplu de încărcare a unui model DAE. În acest exemplu, este foarte important ca modelul să aibă suficiente poligoane pentru a efectua modificări de vârf.

Cuibul de cerb care este utilizat în acest exemplu are 3.500 de poli. Dacă numărul poliței este prea scăzut, animațiile de vârf vor fi prea explicite și distorsionate. 

 încărcător = New Three.Colladaloader ();
încărcător.load ('dae / deer_skull / deer_skull.dae', OnloadCompleteHandler);

04. Adăugați o hartă bump

Hărțile Bump sunt perfecte pentru adăugarea de adâncime a textului dvs. la un cost redus. Odată ce ați creat imaginea hărții bump, îl puteți implementa pur și simplu aplicându-l la materialul ca mai jos. De asemenea, va trebui să ajustați amplasamentul hărții bump pentru a se potrivi scalei modelului dvs. 

 Material.Bumpmap = 'img / Deer_skull / Deer-Bump.jpg';
material.bumpscale = .008;

05. Utilizați animatorul de vârf

De-a lungul site-ului său, Johnny utilizează o extensie de joc de către Jerome Etienne pentru trei.js care facilitează animațiile de vârf. Această extensie permite accesul ușor la fiecare vârf al unui model la rata cadrelor, făcându-l simplu pentru manipularea vârfurilor utilizând forme de undă.

Extensia de animație vertex este disponibil prin GitHub-ul Etienne. Vom merge mai departe în modul în care este folosit în pașii următori.

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

Utilizatorii pot interacționa cu modelul 3D și pot vedea din mai multe unghiuri

06. Începeți topirea

Topirea unei piese de geometrie implică câțiva pași totali. În primul rând, fiecare punct este împins în mod continuu în jos. Când un punct ajunge la sol, este împins spre exterior folosind ceea ce vom numi un "vector de împingere".

Apoi, vom da punctele care adună de-a lungul fundului o grosime, astfel încât geometria topită nu este complet plată. Pentru a realiza acest lucru, Johnny a portat codul de la Skel Skeel Lee's VFX Shader din Houdini și a modificat-o.

07. Începeți să mutați vârfurile în jos

Mai jos este un exemplu de utilizare a utilizării Animatorului Vertex pentru a împinge în mod continuu geometria modelului spre pământ. 

 Var Vertexanimare = New Threx.vertexanimare (geometria, funcția (originea, poziția, Delta, acum) {poziția.y - = Meltamount * ModelHeight;}

Acest lucru va împinge puncte în jos la rata definită de Meltamount. . Amintiți-vă să apelați și "Actualizare" pe animația dvs. de vârf în ciclul de redare.

08. Determinați vectorul de împingere

Când un punct a ajuns la sol, trebuie să fie împins spre exterior pentru a atinge un efect de topire. Codul de mai jos determină ce direcție din axele X și Z pentru a împinge vârful astfel încât să obțineți o deplasare uniformă. Condiționarea asigură că numai punctele care au atins limitele cele mai mici ale modelului (solul) sunt împinse spre exterior. 

dacă (poziția.y & lt; bbox.min.y) {
  var centroid = bbox.max.clone (). Adăugați (bbox.min.clone ()). Dividence (2.0);
pushvector = poziție.clone (). sub (centroid);
pushvector.y = 0; }

09. Faceți topirea se simte naturală

Codul de mai jos utilizează zgomot pentru a crea randomie în mișcare, astfel încât topitura să se simtă organică. Variabilele de zgomot pot fi modificate pentru a obține efectul dorit. Zgomotul este apoi aplicat la vectorul de împingere împreună cu Meltamount. și răspândire pentru a controla rata și dimensiunea bazei topite. Acest vector exterior este calculat în cele din urmă și apoi aplicat pe vertexul în sine. 

 var n = noisemplitudit * generator.Getval ((pozition.x) * zgomotFrequenty + zgomotoffset);
Var Outwardvector = pushvector.multiplyscalar ((((Meltamount * Spreadamount) + n) * Outwardspeed);
poziția.add (exteriorvector);

10. Dați grosimea bazinului topit

Codul a explicat până acum va atinge efectul de topire, dar două lucruri sunt în neregulă cu ea. În primul rând, piscina se va simți destul de plată, deoarece toate punctele s-au topit la aceeași poziție a Y. În al doilea rând, deoarece toți împărtășesc același lucru, prea multe puncte vor fi stivuite la aceeași înălțime, ceea ce poate provoca pâlpâirea. Pentru a evita acest lucru, se aplică o grosime la rata de topire: 

 poziția.Y + = Meltamount * Poolhickeshickness;

11. Încercați-l pe alte modele

Cu codul de mai sus, orice model cu poligoane suficiente poate fi topit. Descărcați un fișier ZIP din cod Aici și schimbați modelul cu orice doriți. A se distra!

Acest articol a apărut inițial în Web designer Numărul 265. Cumpărați-l Aici .

Articole similare:

  • Creați vizuale 3D interactive cu trei.js
  • Cele mai bune instrumente de culoare pentru designerii web
  • Feriți-vă marginea de tăiere a designului web

să - Cele mai populare articole

Creați un efect de aberație cromatică

să Sep 11, 2025

Aberarea cromatică (distorsionare), cunoscută și sub numele de "fringing de culoare" este o problemă optică comună. Apare a..

Cum se utilizează fonturile web

să Sep 11, 2025

Următorul este un extras obținut din manualul Webfont al lui Bram Stein. Cumpărați-l aici ..

Creați cantități specifice CSS specifice și layout-uri

să Sep 11, 2025

În acest tutorial vom arunca o privire la modalitățile de schimbare a stilurilor CSS ale elementelor, precum și de styling ap..

Ce este o linie de terminare?

să Sep 11, 2025

Există multe aspecte ale iluminării pe care trebuie să le luați în considerare pentru a transmite formularul. Un fundamental..

Creați un aspect receptiv cu grila CSS

să Sep 11, 2025

CSS Grid Layout. este în creștere în suportul browserului în fiecare zi și putem trimite grilă CSS la producți..

Trei pași până la un cer de noapte spumant în acuarelă

să Sep 11, 2025

Acuarelă este un mediu incredibil care, cu partea dreaptă Tehnici de artă pot fi folosite pentru a face cele ma..

Cum se creează active digitale

să Sep 11, 2025

Pregătirea activelor pentru uz digital este o sarcină de bază pentru Junior designeri astăzi - și distinct de..

Cum să transmiteți sunetul într-o pictură

să Sep 11, 2025

Deși nu este posibil să se afișeze sunetul într-o imagine convențională, în continuare (interactivitate multimedia deopart..

Categorii