Создайте бесконечную 3D-галерею с помощью Three.js и VIVERSE

Узнайте, как создать совместную 3D-фотобудку, где пользователи смогут создавать и делиться фотографиями аватаров в бесконечной галерее! В этом руководстве мы будем использовать React Three Fiber и развёртывать приложение с помощью бесплатной платформы VIVERSE.

Что вы научитесь:
Создавать интерактивную 3D-галерею с помощью React Three Fiber
Реализовать настраиваемые аватары с позами и аксессуарами
Создавать фотобудку с фонами и реквизитом
Использовать VIVERSE SDK для аутентификации, физики, аватаров и функций таблицы лидеров
Развёртывать 3D-веб-приложение на VIVERSE с помощью CLI
Создавать совместные функции со встроенной физикой и таблицами лидеров

🚀 Платформа VIVERSE (спонсор):
VIVERSE предоставляет бесплатную платформу для публикации интерактивных 3D-веб-приложений без необходимости контроля доступа. Их библиотека pmndrs/viverse обеспечивает мгновенный доступ к аутентификации, аватарам, физике и другим функциям как для простых проектов Three.js, так и для проектов React Three Fiber.

🎮 Финальная демоверсия: https://worlds.viverse.com/UxpTMPd
📦 Исходный код: https://github.com/wass08/r3f-wawa-ph...
🔗 Стартовый код: https://github.com/wass08/r3f-vite-st...

🚀 Изучите React Three Fiber с помощью полного руководства по 3D-разработке веб-приложений ✨
https://wawasensei.dev/courses/react-...

#threejs #js #viverse

▬▬▬▬▬▬ 📚 РЕСУРСЫ ▬▬▬▬▬▬

VIVERSE SDK
https://pmndrs.github.io/viverse/gett...

Студия VIVERSE
https://studio.viverse.com/

Платформа VIVERSE
https://www.viverse.com/

PocketBase
https://pocketbase.io/

Список VRM Bones
https://pixiv.github.io/three-vrm/doc...

Threejs
https://threejs.org/

React Three Fiber
https://r3f.docs.pmnd.rs/getting-star...

▬▬▬▬▬▬ Поддержите канал 🙏 ▬▬▬▬▬▬

Станьте участником, чтобы получить доступ к потрясающим Бонусы:
   / @wawasensei  

▬▬▬▬▬▬ Присоединяйтесь ко мне 👋 ▬▬▬▬▬▬

💻 Сообщество Discord
  / discord  

📸 Instagram:
  / wawa.sensei  

🎎 Facebook:
  / wawasenseiyt  

🐦 Twitter:
  / wawasensei  

🐦 TikTok:
  / wawasensei08  

▬▬▬▬▬▬ ВРЕМЯ P S ⏰ ▬▬▬▬▬▬

00:00 Введение
01:15 Старт проекта
01:43 VIVERSE SDK
03:45 Публикация в VIVERSE
05:47 Создание и выбор аватара
10:48 Кнопка входа
12:16 Система бесконечных сеток
17:36 Хранилище фотографий Pocketbase
21:24 Создание и сохранение фотографий
26:28 Галерея
28:12 Материалы для изображений
32:34 Коллайдеры кадров
37:13 Фотобудка
41:10 Пользовательские позы анимации
43:48 Прикрепление предметов к костям
47:26 Таблица лидеров
51:53 Дальнейшие действия
52:58 Заключение