#3/5 ThreeJS «overflow: hidden» и «гиперпрыжок» внутри шлема | PRO, BRO | БЕЗ ОПЛАТЫ!

#threejs #webgl #glb #js #three Подписывайтесь, ставьте пальцы вверх, жмите на колокольчик, порадуйте старика! Source code: https://github.com/inverser-pro/threejs-mandalorian-helmet CODE: https://three.inverser.pro/3-5-hyperjump/ CodePen: https://codepen.io/inverser/pen/poQEWrV LAST EPISODE: https://codepen.io/inverser/full/WNLqQqm LIFE DEMO (prod version): https://inverser.pro/_mando/ FULL COURSE: https://www.youtube.com/watch?v=Xn-FKVAvYmA&list=PL0XYm8bdyeFDGJmFeHDiEXsmLfq3vWBaj&index=20 Инф. по плавности анимации в animejs https://codepen.io/kcjpop/pen/GvdQdX Откуда брал пример кода прогресса прокрутки https://sbcode.net/threejs/animate-on-scroll/ Список воспроизведения по Three.JS: https://www.youtube.com/watch?v=UNvoDucprRE&list=PL0XYm8bdyeFDGJmFeHDiEXsmLfq3vWBaj Blender и 3D модель: https://www.youtube.com/watch?v=HRG2V-fUfuY Множество ссылок по теме: https://three.inverser.pro/links 00:00 Вступление 00:35 Что будет в этом уроке? 02:09 MeshPhysicalMaterial в ThreeJS 02:35 Пример MeshPhysicalMaterial 05:45 Приступаем к кодингу (видео ускорено в 5 раз) 06:00 Добавляю вспомогательные элементы: освещение и коробку внутрь шлема 07:19 Подбираю параметры материала MeshPhysicalMaterial 08:28 Задняя внутренняя часть шлема тоже освещается... По'Blener'им 09:36 Добавляю другой материал для части 3D модели в Blender 11:26 Как пройтись по всем точкам 3D модели стекла и создать на их основе новые элементы? 15:56 Логика создания «гиперпрыжка» 18:27 Решение найдено 19:30 Найти нужную позицию для «гиперпрыжка» 22:48 Добавляю «гиперпрыжок» к шлему, чтобы они вместе анимировались (поворачивались по прокрутке) 23:10 Пытаюсь устранить «баг» стекла на шлеме в Blender 26:46 Разница отображения объектов в Blender и ThreeJS 29:37 Позиционирование «гиперпрыжка» 30:24 Особенности анимации «гиперпрыжка» 32:53 Убираю мусорный код 33:33 Добавление «overflow: hidden» в ThreeJS 36:02 Обрезаем все, что находится ВНЕ clippingPlanes 38:10 Cylinder в ThreeJS анимируется от середины... пытаюсь исправить 41:49 Использую ChatGPT для подсказок кода 44:31 Добавляю SHADER'ный материал для цилиндров 45:51 Особенности шейдерной анимации каждой линии 48:09 Возвращаюсь к обычному материалу 48:29 Настройка анимации «гиперпрыжка» 59:59 Баг в анимации «гиперпрыжка» и попытка его устранить 54:12 Попытка вычислить дистанцию от одного вектора к другому 57:57 Устранение бага нижних линий «гиперпрыжка» 1:00:02 До скорых встреч