Як розплавити 3D-об'єкт з трьома.JS

Sep 15, 2025

Як

Інтернет, як ми це знаємо, постійно змінюються та розвиваються. Те, що ми ще можемо пам'ятати, як простий і прямий носій, отриманий ще кілька років тому, і він не схожий на те, що він буде зупинятися там. Для Веб-будівельник , що колись було частиною науково-фантастичних фільмів, тепер можливе на таблетці, що лежить на вашому дивані, і є будівлі, що охоплюються великомасштабними інтерактивними установками, які насправді просто повноекранні вікна Google Chrome.

Виконайте наведені нижче дії, щоб дізнатись, як створити реалістичний ефект плавлення з трьома.JS.

01. Налаштуйте сцену Three.js

Ідіть вперед і захопити бібліотеку Three.js і включіть його на свій сайт. Вам потрібно буде встановити веб-годинник, сцену та перспективу. Після того, як це миттєво, вам доведеться зробити сцену Requestanimationframe .

02. Додайте освітлення на сцену

Далі вогні потрібно додати до 3D-сцени. У цьому прикладі будуть використані два вогні: навколишнє світло і точковий світло. Ам навколишнього світла служить загальним глобальним кольором для сцени, тоді як точка світла випускає світло, що зменшується з відстані. Це дасть сцену певний контраст.

 Var Ambientlight = Новий три. Амбієнтний (0xcccccc);
scene.add (Ambientlight);
var pointlight = нові три.Pointlight (0xffffff, 1);
pointlight.position.set (10, 5, 0);

03. Завантажте 3D-модель

Тепер, коли сцена була створена, 3D-модель повинна бути завантажена. Модель може бути завантажена за допомогою будь-якого підтримуваного формату (JSON, OBJ, DAE та ін.). Нижче наведено приклад завантаження моделі DAE. У цьому прикладі дуже важливо, щоб модель має достатньо полігонів для виконання модифікацій вершин.

Череп оленя, який використовується у цьому прикладі, має 3500 полісів. Якщо політ є занадто низьким, анімація вершин буде надто явним і спотвореним.

 Навантажувач = Новий три.ColladaLoader ();
loader.load ('dae / deer_skull / deer_skull.dae', onloadcompletehandler);

04. Додайте карту Bump

Bump Maps ідеально підходять для додавання глибини до текстур за низькою вартістю. Після того, як ви створите зображення Bump карта, ви можете реалізувати його, просто застосувавши його до матеріалу, як нижче. Також вам потрібно буде налаштувати масштаб вашої карти bump, щоб відповідати шкалі вашої моделі.

 матеріал.bumpmap = 'img / deer_skull / deer-bump.jpg';
material.bumpscale = .008;

05. Використовуйте аніматор вершини

На своєму сайті Johnny використовує розширення гри Jerome Etienne за три.JS, що полегшує виконання вершин. Це розширення дозволяє легко доступу до кожної вершини моделі на частоті кадрів, що робить його простим для маніпулювання вершинами за допомогою сигналів.

Точний Подовження анімації вершини доступний за допомогою Github Etienne. Ми будемо йти далі, як це використовується на наступних кроках.

Users can interact with the 3D model and view from multiple angles — Користувачі можуть взаємодіяти з 3D-моделлю та видом з декількох кутів

06. Початок танення

Танення частина геометрії включає в себе кілька загальних кроків. По-перше, кожен момент постійно підштовхує вниз. Коли точка досягає землі, вона виштовхується назовні, використовуючи те, що ми називатимемо "push vector".

Далі ми дамо точки, які збираються вздовж нижньої товщини, тому розплавлена геометрія не повністю плоска. Для того, щоб досягти цього, Джонні перенесений код від Skeel Lee's VFX Shader в Houdini і модифікував його.

07. Почніть переміщення вершин вниз

Нижче наведено приклад використання використання вершини аніматора, щоб постійно натиснути геометрію моделі до землі.

 ВАР ВЕРТЕКСАНІМАЦІЯ = Нова трикси. Ектексанімація (геометрія, функція (походження, положення, дельта, зараз) {position.y - = meltamount * modelheight;}

Це буде проштовхувати точки за курсом, визначеною розлюд . Не забудьте також зателефонувати "Оновити" у вашій вершинній анімації у циклі рендерингу.

08. Визначте вектор

Коли точка досягла землі, вона повинна бути висунута назовні, щоб досягти ефекту розплаву. Код нижче визначає, який напрямок у осей X та Z, щоб натиснути вершину, щоб ви отримали рівномірне переміщення. Умовні гарантують, що лише точки, які досягли найнижчих меж моделі (земля), висунуті назовні.

if (position.y & lt; bboppom.min.y) {
  var centroid = bboppom.max.clone (). Додати (bbox.min.clone ()). dividescalar (2.0);
pushvector = postion.clone (). Sub (Centroid);
pushvector.y = 0; }

09. Зробити розплав відчувати себе природним

Код нижче використовує шум, щоб створити випадковість у русі, тому розплав відчуває органічно. Змінні шуму можна налаштувати, щоб отримати бажаний ефект. Потім шум застосовується до натискання розлюд і розпусний контролювати швидкість і розмір розплавленого басейну. Цей зовнішній вектор нарешті обчислюється, а потім застосовується до вершини.

 var n = noiseamplitude * generator.getval ((position.x) * шум для шуму + шум);
var OutwardVector = pushvector.multiplyscalar (((meltamount * Розповсюдження) + n) *
Позиція.

10. Дайте товщину розплавленого басейну

Цей код пояснюється до цих пір, щоб досягти ефекту розплаву, але з ним не так. По-перше, басейн відчуватиметься досить рівною, тому що всі точки розплавлялися до однієї позиції Y. По-друге, оскільки всі вони поділяють той самий Y, занадто багато точок буде складатися на тій же висоті, що може викликати мерехтіння. Щоб уникнути цього, при застосуванні товщини застосовується при розплаві:

 position.y + = meltamount * poolthickness;

11. Спробуйте на інших моделях

З кодом вище, будь-яка модель з достатньою кількістю полігонів може бути розплавлена. Завантажте поштовий файл з коду тут і поміняти модель з усіма ви хочете. Весело!

Ця стаття спочатку з'явилася Веб-дизайнер випуск 265. Купити його тут .

Пов'язані статті:

Створіть інтерактивні 3D-візуальні матеріали з трьома.JS
Кращі кольорові інструменти для веб-дизайнерів
Остерігайтеся ріжучого краю веб-дизайну

Як розплавити 3D-об'єкт з трьома.JS

01. Налаштуйте сцену Three.js

02. Додайте освітлення на сцену

03. Завантажте 3D-модель

04. Додайте карту Bump

05. Використовуйте аніматор вершини

06. Початок танення

07. Почніть переміщення вершин вниз

08. Визначте вектор

09. Зробити розплав відчувати себе природним

10. Дайте товщину розплавленого басейну

11. Спробуйте на інших моделях

Як - Найпопулярніші статті

Як вибрати назву веб-сайту

Створіть вітальний інтер'єр за допомогою лінійного мистецтва

Намалюйте пустотливий заєць у акварелі

5 Речі, які вам потрібно для масляного живопису

Створити реалістичний фантастичний лицар

Як малювати фантастичні звірі

Як підготувати графіку Illustrator для наслідків

Як спроектувати промо для уявного бренду

Категорії