Inhalt
- 01. Setzt d'dräi.js Szen op
- 02. Füügt Beleidegung an d'Zeen bäi
- 03. Luet den 3D Modell
- 04. Füügt eng Bumpekaart bäi
- 05. Benotzt de vertex Animateur
- 06. Fänkt un ze schmëlzen
- 07. Fänkt d'Wirbelen no ënnen ze bewegen
- 08. Bestëmmt de Pushvektor
- 09. Maacht de Schmelz natierlech
- 10. Gitt d'geschmolzene Pooldicke
- 11. Probéiert et op aner Modeller aus
De Web wéi mir et kennen, ännert sech permanent an entwéckelt sech. Wat mir eis ëmmer nach als einfach an direkt Medium erënnere kënnen, krut virun e puer Joer eng aner Dimensioun, an et gesäit net aus wéi wann et och do géif ophalen. Fir e Websäit Builder, wat eemol Deel vun de Science-Fiction Film visuellen Effekter war, ass elo méiglech op enger Tablet, déi op Ärem Canapé läit, an et gi Gebaier, déi a grouss-Skala interaktiven Installatiounen bedeckt sinn, déi tatsächlech just Vollscreen Google Chrome Windows sinn.
Follegt d'Schrëtt hei ënnendrënner fir erauszefannen wéi ee realistesche Schmelzeffekt mat three.js erstellt. Braucht Dir Info fir en neie Site? Kuckt eise Webhosting Guide, an dës Top Cloud Späicheroptiounen.
01. Setzt d'dräi.js Szen op
Gitt vir a gräift déi three.js Bibliothéik an enthält se op Ärem Site. Dir musst de WebGLRenderer, d'Zeen an d'PerspektivKamera instantiéieren. Nodeems dës instantéiert sinn, musst Dir d'Zeen weider maachen RequestAnimationFrame.
02. Füügt Beleidegung an d'Zeen bäi
Als nächst musse Luuchten an d'3D Zeen bäigefüügt ginn. An dësem Beispill ginn zwou Luuchten benotzt: en Ambient Liicht an e Punkt Liicht. D'Ëmfeldliicht déngt als allgemeng global Faarf fir d'Zeen, wärend d'Punktliicht Liicht emitt, dat mat der Distanz erofgeet. Dëst wäert der Zeen e bësse Kontrast ginn.
var ambientLight = nei THREE.AmbientLight (0xccccccc); scene.add (ambientLight); var pointLight = nei THREE.PointLight (0xffffff, 1); pointLight.position.set (10, 5, 0);
03. Luet den 3D Modell
Elo wou d'Szen opgestallt ass, muss den 3D Modell eropgeluede ginn. De Modell kann iwwer all ënnerstëtzt Format (JSON, OBJ, DAE, etc) gelueden ginn. Hei drënner ass e Beispill fir en DAE Modell ze lueden. An dësem Beispill ass et ganz wichteg datt de Modell genuch Polygonen huet fir Wirbelsmodifikatiounen ze maachen.
Den Hirschschädel deen an dësem Beispill benotzt gëtt huet 3.500 Polys. Wann de Polyzuel ze niddreg ass, sinn d'Wirbelsanimatiounen ze explizit a verzerrt.
loader = nei THREE.ColladaLoader (); loader.load ('dae / deer_skull / deer_skull.dae', onLoadCompleteHandler);
04. Füügt eng Bumpekaart bäi
Bump Kaarten si perfekt fir Tiefe fir Är Texturen zu niddrege Käschten derbäizefügen. Wann Dir Äert Bump Map Bild erstallt hutt, kënnt Dir et implementéieren andeems Dir et einfach op d'Material wéi hei ënnen applizéiert. Och musst Dir d'Skala vun Ärer Bumpkaart upassen fir d'Skala vun Ärem Modell ze passen.
material.bumpMap = ’img / deer_skull / deer-bump.webp’; material.bumpScale = .008;
05. Benotzt de vertex Animateur
Op sengem ganze Site benotzt den Johnny eng Spillverlängerung vum Jerome Etienne fir three.js déi et méi einfach mécht Wirbelsanimatiounen ze maachen. Dës Extensioun erlaabt einfachen Zougang zu all Spëtzepunkt vun engem Modell mat der Framequote, sou datt et einfach ass Wirbelen mat Wellenformen ze manipuléieren.
D'Vertex Animatioun Extensioun ass verfügbar iwwer dem Etienne säi GitHub. Mir wäerte weider goen wéi et an den nächste Schrëtt benotzt gëtt.
06. Fänkt un ze schmëlzen
E Stéck Geometrie ze schmëlzen ëmfaasst e puer allgemeng Schrëtt. Als éischt gëtt all Punkt kontinuéierlech no ënnen gedréckt. Wann e Punkt de Buedem erreecht, gëtt en no bausse gedréckt mat Hëllef vu wat mir e 'Push Vector' nennen.
Als nächst wäerte mir d'Punkte ginn, déi laanscht de Buedem eng Déck sammelen, sou datt d'geschmolzene Geometrie net ganz flaach ass. Fir dëst z'erreechen, huet den Johnny de Code vum Skeel Lee's VFX Shader zu Houdini portéiert a geännert.
07. Fänkt d'Wirbelen no ënnen ze bewegen
Hei drënner ass e Beispill Benotzung vum Vertex Animateur fir d'Geometrie vun engem Modell kontinuéierlech op de Buedem ze drécken.
var vertexAnimation = nei THREEx.VertexAnimation (Geometrie, Funktioun (Urspronk, Positioun, Delta, elo) {position.y - = meltAmount * modelHeight;}
Dëst wäert Punkten erofdrécken mat dem Taux definéiert vun der meltAmount. Denkt drun och "Update" op Är Wirbelenanimatioun am Renderzyklus ze nennen.
08. Bestëmmt de Pushvektor
Wann e Punkt de Buedem erreecht huet, muss e no bausse gedréckt ginn fir e Schmelzeffekt z'erreechen. De Code hei ënnendrënner bestëmmt wéi eng Richtung an den X- an Z-Achsen fir de Wirbels ze drécken sou datt Dir eng eenheetlech Verrécklung kritt. D'Bedingung suergt datt nëmme Punkten déi déi ënnescht Grenze vum Modell (de Buedem) erreecht hunn no bausse gedréckt ginn.
wann (position.y bbox.min.y) {var centroid = bbox.max.clone (). addéieren (bbox.min.clone ()). divideScalar (2.0); pushVector = position.clone (). sub (centroid); pushVector.y = 0; }
09. Maacht de Schmelz natierlech
De Code hei ënnendrënner benotzt Kaméidi fir Zoufall an der Bewegung ze schafen sou datt de Schmelz organesch fillt. D'Geräischvariabelen kënnen ugepasst ginn fir den gewënschten Effekt ze kréien. De Kaméidi gëtt dann op de Pushvektor applizéiert zesumme mat meltAmount an spreadAmount fir den Taux an d'Gréisst vum geschmolzene Pool ze kontrolléieren. Dëse baussenzege Vecteur gëtt schliisslech berechent an dann op de Spëtzepunkt selwer applizéiert.
var n = noiseAmplitude * generator.getVal ((position.x) * noiseFrequency + noiseOffset); var outwardVector = pushVector.multiplyScalar (((meltAmount * spreadAmount) + n) * outwardSpeed); Position.add (outwardVector);
10. Gitt d'geschmolzene Pooldicke
De Code erkläert bis elo wäert de Schmelzeffekt erreechen, awer zwou Saache si falsch domat. Als éischt wäert de Pool zimmlech flaach fillen, well all d'Punkte sinn an déiselwecht Y Positioun geschmëlzt. Zweetens, well se all déiselwecht Y deelen, ginn ze vill Punkte op der selwechter Héicht gestapelt, wat flimmert kann. Fir dëst ze vermeiden, gëtt eng Dicke mat der Schmelzgeschwindegkeet applizéiert:
position.y + = meltAmount * poolThickness;
11. Probéiert et op aner Modeller aus
Mat dem Code hei uewen kann all Modell mat genuch Polygonen geschmolt ginn. Luet eng Zip-Datei hei erof a wielt de Modell mat alles wat Dir gär hätt. Vill Spaass!
Dësen Artikel erschéngt ursprénglech amWeb DesignerAusgab 265. Kaaft ethei.
