Создание 3D-слайдера книг для лендинга на Three.js и React
Wawa Sensei
0:00 / 0:00
Создание 3D-слайдера книг для лендинга на Three.js и React
73 421 просмотр · 2 года назад
Wawa Sensei
34,4 тыс. подписчиков
73 421 просмотр · 2 года назад
Узнайте, как создать потрясающую целевую страницу с 3D-слайдером книг с помощью Three.js и React Three Fiber
🚀 Изучите React Three Fiber с помощью моего полного курса ✨
https://lessons.wawasensei.dev/course...
Демонстрация в реальном времени 🏖️
https://r3f-animated-book-slider-fina...
Стартовый пакет 🔗
https://github.com/wass08/r3f-animate...
Финальный код 🔗
https://github.com/wass08/r3f-animate...
#threejs #webdevelopment #reactthreefiber
▬▬▬▬▬▬ Полезные ссылки 🔗 ▬▬▬▬▬▬
Сжатие текстур Squoosh
https://squoosh.app/
Геометрия Box
https://threejs.org/docs/#api/en/geom...
Аккумуляторная сетка (Skinned Mesh)
https://threejs.org/docs/?q=skinn#api...
GraphToy
https://graphtoy.com/
▬▬▬▬▬▬ Поддержите канал 🙏 ▬▬▬▬▬▬
Станьте участником, чтобы получить доступ к потрясающим бонусам:
/ @wawasensei
▬▬▬▬▬▬ Свяжитесь со мной 👋 ▬▬▬▬▬▬
💻 Сообщество Discord
/ discord
📸 Instagram:
/ wawa.sensei
🎎 Facebook:
/ wawasenseit
🐦 Twitter:
/ wawasensei
🐦 TikTok:
/ wawasensei08
▬▬▬▬▬▬ ВРЕМЕННЫЕ МЕТКИ ⏰ ▬▬▬▬▬▬
00:00 - Вступление
01:00 - Стартовый набор
02:03 - Книга
05:30 - BoxGeometry
08:11 - SkinnedMesh
17:44 - Текстуры
20:55 - Начальное состояние
22:22 - Переходы между страницами
32:44 - Анимация сгибания
36:50 - Задержка между страницами
38:57 - PointerEvents
41:35 - Финальный штрих
43:02 - Спасибо!