Перейти к содержимому

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

Wawa Sensei

0:00 / 0:00

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

5 441 просмотр · 10 мес. назад
Wawa Sensei
34,4 тыс. подписчиков
5 441 просмотр · 10 мес. назад
Узнайте, как создать совместную 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 Заключение