Часть 1: Создание потрясающего 3D-сайта Adidas (Next.js + R3f + Drei) – Настройка и материалы R3F

Вы когда-нибудь задумывались, как создаются 3D-сайты уровня Awwwards? Давайте создадим потрясающий 3D-лендинг Adidas, используя Next.js, GSAP и React Three Fiber!

Краткое содержание:
В первой части серии вы узнаете, как настроить проект Next.js для 3D-дизайна, установить React Three Fiber и Drei, а также изучить, как работают 3D-материалы в React. Мы сравним MeshBasicMaterial и MeshStandardMaterial, настроим тестовую сцену и подготовим запечённые текстуры в Blender для максимальной производительности. К концу вы поймёте, как профессиональные разработчики объединяют 3D-графику и код для достижения дизайна уровня Awwwards.

Главы:
00:00 – Введение: Что мы создаём (3D-сайт Adidas)
01:20 – Установка Next.js, R3F и Drei (Настройка проекта)
04:08 – Создание вашей первой 3D-сцены (Canvas + Geometry)
07:32 – Материалы (базовые и стандартные)
08:34 – Что такое запекание? (Запекание текстур)
10:15 – Преобразование файлов GLB в JSX
12:52 – Демонстрация запекания в Blender (Как использовать текстуры в R3F)

К концу этой части у вас будет готово окружение и чёткое понимание того, как работают материалы и текстуры в R3F, что заложит основу для остальной части проекта целевой страницы Adidas.

CTA:
🎥 «Смотрите Часть 2: Настройка основной модели студии»
   • Part 2: Optimize 3D Models & Textures Like...  

🔔 «Подпишитесь на все 13 частей этой потрясающей серии!»

   • Build & Deploy Awwwards-Winning 3d Adidas ...  

💾 «Скачайте стартовый код с GitHub — ссылка ниже!»
https://github.com/Ali-Sanati/awwward...

Социальные ссылки:
🔗 GitHub: https://github.com/Ali-Sanati
📸Инстаграм:   / reels  
💼 LinkedIn:   / ali-sanati  
🐦 X (Твиттер): https://x.com/Ali_Sanati_Dev
🎵 Тик Ток:   / ali_sanati_dev  
📺 Полный плейлист:    • Build & Deploy Awwwards-Winning 3d Adidas ...  

#Nextjs #Threejs #ReactThreeFiber #Awwwards #WebDevelopment