Задаволены
- 01. Наладзьце сцэну three.js
- 02. Дадайце асвятленне сцэне
- 03. Загрузіце 3D-мадэль
- 04. Дадайце грудную карту
- 05. Выкарыстоўвайце вершальны аніматар
- 06. Пачніце плавіць
- 07. Пачніце рухаць вяршыні ўніз
- 08. Вызначце вектар штуршка
- 09. Зрабіце расплаў натуральным
- 10. Дайце таўшчыню плаўленага басейна
- 11. Паспрабуйце на іншых мадэлях
Мы ведаем, што Інтэрнэт пастаянна змяняецца і развіваецца. Тое, што мы ўсё яшчэ памятаем як просты і зразумелы сродак, набыло яшчэ адно вымярэнне некалькі гадоў таму, і, падобна, гэта таксама не спыніцца. Для распрацоўшчыка сайтаў тое, што калісьці было часткай візуальных эфектаў навукова-фантастычнага кіно, зараз магчыма на планшэце, які ляжыць на вашым канапе, і ёсць будынкі, пакрытыя буйнамаштабнымі інтэрактыўнымі ўстаноўкамі, якія на самай справе з'яўляюцца проста поўнаэкраннымі вокнамі Google Chrome.
Выканайце наступныя крокі, каб даведацца, як стварыць рэалістычны эфект плаўлення з дапамогай three.js. Вам патрэбна інфармацыя для новага сайта? Глядзіце наш гід па хостынгу і гэтыя галоўныя варыянты захоўвання ў воблаку.
01. Наладзьце сцэну three.js
Ідзіце наперад, захапіце бібліятэку three.js і ўключыце яе на свой сайт. Вам трэба будзе стварыць асобнік WebGLRenderer, Scene і PerspectiveCamera. Пасля таго, як яны будуць зроблены, вам трэба будзе адлюстраваць сцэну RequestAnimationFrame.
02. Дадайце асвятленне сцэне
Далей у 3D-сцэну трэба дадаць агні. У гэтым прыкладзе будуць выкарыстаны два агні: навакольнае і кропкавае. Навакольнае святло служыць агульным колерам для сцэны, а кропкавае святло будзе выпраменьваць святло, якое памяншаецца з адлегласцю. Гэта надасць сцэне пэўны кантраст.
var ambientLight = новы THREE.AmbientLight (0xccccccc); scene.add (ambientLight); var pointLight = новы THREE.PointLight (0xffffff, 1); pointLight.position.set (10, 5, 0);
03. Загрузіце 3D-мадэль
Цяпер, калі сцэна створана, трэба загрузіць 3D-мадэль. Мадэль можна загрузіць у любым фармаце, які падтрымліваецца (JSON, OBJ, DAE і г.д.). Ніжэй прыведзены прыклад загрузкі мадэлі DAE. У гэтым прыкладзе вельмі важна, каб мадэль мела дастатковую колькасць шматкутнікаў для мадыфікацыі вяршынь.
Чэрап аленя, які выкарыстоўваецца ў гэтым прыкладзе, мае 3500 полісаў. Калі палі-лічыльнік занадта нізкі, анімацыя вяршыні будзе занадта відавочнай і скажонай.
загрузчык = новы THREE.ColladaLoader (); loader.load (’dae / deer_skull / deer_skull.dae’, onLoadCompleteHandler);
04. Дадайце грудную карту
Карты Bump ідэальна падыходзяць для дадання глыбіні тэкстуры пры нізкай цане. Пасля таго, як вы стварылі свой малюнак карты, вы можаце рэалізаваць яго, проста ужыўшы яго да матэрыялу, як паказана ніжэй. Акрамя таго, вам трэба будзе адрэгуляваць маштаб вашай карты ўдараў у адпаведнасці з маштабам вашай мадэлі.
material.bumpMap = ’img / deer_skull / deer-bump.webp’; material.bumpScale = .008;
05. Выкарыстоўвайце вершальны аніматар
На ўсім сваім сайце Джоні выкарыстоўвае гульнявое пашырэнне Джэрома Эцьена для three.js, якое палягчае выкананне вершаванай анімацыі. Гэта пашырэнне дазваляе лёгка атрымаць доступ да кожнай вяршыні мадэлі з частатой кадраў, робячы простым маніпуляванне вяршынямі з выкарыстаннем сігналаў.
Пашырэнне Vertex Animation даступна праз GitHub Эцьена. На наступных этапах мы разбярэмся далей.
06. Пачніце плавіць
Плаўленне часткі геаметрыі прадугледжвае некалькі агульных этапаў. Спачатку кожная кропка бесперапынна прасоўваецца ўніз. Калі кропка даходзіць да зямлі, яна прасоўваецца вонкі, выкарыстоўваючы тое, што мы будзем называць "вектар штуршка".
Далей мы дамо таўшчыню кропак, якія збіраюцца ўздоўж дна, каб геаметрыя расплаву не была цалкам роўнай. Каб дасягнуць гэтага, Джоні перавёз код з VFX-шэйдэра Skeel Lee у Houdini і змяніў яго.
07. Пачніце рухаць вяршыні ўніз
Ніжэй прыведзены прыклад выкарыстання верхавога аніматара для бесперапыннага прасоўвання геаметрыі мадэлі да зямлі.
var vertexAnimation = new THREEx.VertexAnimation (геаметрыя, функцыя (пачатак, пазіцыя, дэльта, зараз) {position.y - = meltAmount * modelHeight;}
Гэта падштурхне кропкі ўніз па хуткасці, вызначанай значком meltAmount. Не забудзьцеся таксама выклікаць "абнаўленне" на вашай анімацыі вяршыні ў цыкле рэндэрынгу.
08. Вызначце вектар штуршка
Калі кропка дасягнула зямлі, яе трэба высунуць вонкі, каб дасягнуць эфекту расплаўлення. Прыведзены ніжэй код вызначае, у якім кірунку па восях X і Z націснуць вяршыню, каб атрымаць раўнамернае зрушэнне. Умоўны гарантуе, што толькі кропкі, якія дасягнулі самых нізкіх межаў мадэлі (зямлі), выцясняюцца вонкі.
калі (position.y bbox.min.y) {var centroid = bbox.max.clone (). add (bbox.min.clone ()). divideScalar (2.0); pushVector = position.clone (). sub (centroid); pushVector.y = 0; }
09. Зрабіце расплаў натуральным
Прыведзены ніжэй код выкарыстоўвае шум для стварэння выпадковасці руху, каб расплаў адчуваўся арганічна. Шумныя зменныя можна наладзіць, каб атрымаць жаданы эфект. Затым шум наносіцца на вектар штуршка разам з meltAmount і распаўсюджваннеСума кантраляваць хуткасць і памер плаўленага басейна. Гэты вонкавы вектар канчаткова вылічваецца, а затым прымяняецца да самой вяршыні.
var n = noiseAmplitude * generator.getVal ((position.x) * noiseFrequency + noiseOffset); var outwardVector = pushVector.multiplyScalar ((((meltAmount * spreadAmount) + n) * outwardSpeed); position.add (outwardVector);
10. Дайце таўшчыню плаўленага басейна
Растлумачаны да гэтага часу код дасягне эфекту расплаву, але дзве рэчы ў ім няправільныя. Па-першае, басейн будзе адчуваць сябе даволі роўна, таму што ўсе кропкі расплавіліся да аднолькавага становішча Y. Па-другое, паколькі ўсе яны маюць аднолькавы Y, занадта шмат кропак будзе складзена на адной вышыні, што можа выклікаць мігаценне. Каб пазбегнуць гэтага, наносіцца таўшчыня з хуткасцю плаўлення:
position.y + = meltAmount * poolThickness;
11. Паспрабуйце на іншых мадэлях
З прыведзеным кодам можна расплавіць любую мадэль з дастатковай колькасцю шматкутнікаў. Загрузіце паштовы файл з кода сюды і заменіце мадэль чым заўгодна. Весяліцца!
Гэты артыкул першапачаткова з'явіўся ўВэб-дызайнервыпуск 265. Купітут.
