Урок по React Three Fiber: как накладывать изображения на 3D-объекты
Wawa Sensei
0:00 / 0:00
Урок по React Three Fiber: как накладывать изображения на 3D-объекты
15 246 просмотров · 2 года назад
Wawa Sensei
34,4 тыс. подписчиков
15 246 просмотров · 2 года назад
Давайте научимся создавать персонализированные 3D-изделия, такие как кружки, футболки, сумки или любые сложные 3D-формы, используя текстуры изображений.
В этом уроке мы рассмотрим компонент Decal из React Three Fiber. Другой предложенный способ — использование CanvasTexture для создания пользовательской текстуры, применяемой к материалу.
🚀 Изучите React Three Fiber с помощью моего полного курса ✨
https://lessons.wawasensei.dev/course...
Стартовый пакет 🔗
https://github.com/wass08/r3f-vite-st...
Финальный код 🔗
https://github.com/wass08/r3f-mug
#threejs #developer #reactjs
▬▬▬▬▬▬ Полезные ссылки 🔗 ▬▬▬▬▬▬
Decal
https://github.com/pmndrs/drei#decal
HTML Canvas
https://www.w3schools.com/graphics/ca...
CanvasTexture
https://threejs.org/docs/#api/en/text...
Пример с кроликом
https://codesandbox.io/s/ymb5d9?file=...
Пример с кольцом
https://codesandbox.io/s/ring-decals-...
Пример с кружкой Mug3D
https://mug3d.com/?model=1
▬▬▬▬▬▬ ВРЕМЕННЫЕ МЕТКИ ⏰ ▬▬▬▬▬▬
00:00 - Вступление
00:29 - Настройка проекта
01:03 - Концепция
02:56 - Наклейка
07:38 - Подготовка объекта Blender
12:31 - Применение к 3D-объекту
15:38 - Динамический конфигуратор
24:46 - Конечный результат
25:01 - Спасибо!
▬▬▬▬▬▬ Поддержите канал 🙏 ▬▬▬▬▬▬
Станьте участником, чтобы получить доступ к потрясающим бонусам:
/ @wawasensei
▬▬▬▬▬▬ Свяжитесь со мной 👋 ▬▬▬▬▬▬
💻 Сообщество Discord
/ discord
📸 Instagram:
/ wawa.sensei
🎎 Facebook:
/ wawasenseiyt
🐦 Twitter:
/ wawasensei
🐦ТикТок:
/ wawasensei08
💻Мой сайт:
https://www.wawasensei.dev