Ми створимо 3D веб-галерею за допомогою технології WebGL, саме сервісу Playcanvas. Це незвичайний підхід до демонстрації своїх творчих робіт. Також нам в роботі знадобиться знання Autodesk 3Ds Max і базові навички у Photoshop/Photopea.
Напишіть у особистих повідомленнях на Patreon, щоб вас додали як учасника вже готового проекту на Playcanvas, так вам буде зручніше вивчати проект копіювати ассети та скрипти!
Ось деякі особливості, над якими ми будемо працювати:
* Динамічна завантаження великих зображень портфоліо для покращення швидкості завантаження проекту в браузері.
* Переміщення по сцені за допомогою методу Point And Click, тобто переміщення при натисканні на певне місце на підлозі.
* Плавна анімація інформаційної панелі.
* Звуковий супровід інформаційної панелі.
* І багато іншого.
Вам також будуть доступні написані мною скрипти для 3Ds Max, які дозволяють прискорити збереження моделей для Playcanvas, а також адаптувати зображення під різні формати картин.
Напишіть у особистих повідомленнях на Patreon, щоб вас додали як учасника вже готового проекту на Playcanvas, так вам буде зручніше вивчати проект копіювати ассети та скрипти!
Ось деякі особливості, над якими ми будемо працювати:
* Динамічна завантаження великих зображень портфоліо для покращення швидкості завантаження проекту в браузері.
* Переміщення по сцені за допомогою методу Point And Click, тобто переміщення при натисканні на певне місце на підлозі.
* Плавна анімація інформаційної панелі.
* Звуковий супровід інформаційної панелі.
* І багато іншого.
Вам також будуть доступні написані мною скрипти для 3Ds Max, які дозволяють прискорити збереження моделей для Playcanvas, а також адаптувати зображення під різні формати картин.
Як придбати:
Цей курс доступний за підпискою на Patreon.
Оформивши підписку ви також автоматично отримуєте доступ та іншим курсам.
Таким чином ви отримуєте доступ до великої кількості цікавих матеріалів для навчання і не тільки.
Оформивши підписку ви також автоматично отримуєте доступ та іншим курсам.
Таким чином ви отримуєте доступ до великої кількості цікавих матеріалів для навчання і не тільки.
Перейшовши на посилання в першій лекції, ви будете перенаправлені на Patreon. Оформіть передплату.
Ви автоматично отримаєте доступ до всіх лекцій!
Лекції:
1.
Підготовка
Створення інтерактивної веб-галереї 3D-портфоліо – це захоплюючий та інноваційний підхід до демонстрації творчих робіт. Використовуючи передові технології WebGL, Playcanvas та Autodesk 3Ds Max, ви зможете створити унікальне віртуальне середовище, де відвідувачі зможуть повністю поринути у світ вашої творчості.Я прочитав цю лекцію! Лекція прочитана! | Перейти до лекції → | Робочі файли
2.
Моделювання
Моделювання архітектури, картин та світильників.Я прочитав цю лекцію! Лекція прочитана! | Перейти до лекції → | Робочі файли
3.
Налаштування освітлення, Запікання текстур
Налаштування освітлення та запікання текстур для віртуальної галереї. Ми використовували рендер-движок Corona Renderer і створили просте освітлення.Далі ми запікали освітлення в текстури з використанням другого каналу Unwrap за допомогою Corona Beauty.
Однак, коли справа стосувалася картин, ми зіштовхнулися з деякими труднощами. Для того, щоб зберегти окремі об'єкти картин у Playcanvas, але мати одну запечену текстуру для всіх картин, ми створили окремий об'єкт SM_Pictures (SM_PicturesForBake), скопіювавши картини.
Потім ми запікали текстуру для цього об'єкта, вимкнувши видимість оригінальних картин.
Я прочитав цю лекцію! Лекція прочитана! | Перейти до лекції → | Робочі файли
4.
Створення проекту Playcanvas
Робота над проектом галереї була значно спрощена та прискорена завдяки використанню спеціальних скриптів для 3Ds Max. Скрипти дозволяють автоматизувати процеси експорту моделей, оптимізації текстур та налаштування матеріалів, що робить роботу більш зручною та ефективною.Скрипт 3ds_Max_to_Playcanvas.ms забезпечує миттєвий експорт вибраних об'єктів у форматі FBX з правильними налаштуваннями. Він також автоматично додає відповідні текстури в файл, що експортується, що дозволяє автоматично створити відповідні матеріали в Playcanvas.
У висновку, у цьому уроці ми створили робочий прототип галереї, наш Player може переміщатися по кімнаті не тільки за допомогою WASD, але і по кліку в певному місці.
Також були наведені приклади конкретних дій при додаванні різних моделей, таких як стіни, підлога, стеля, світильники та підставки. Показано налаштування матеріалів та прив'язування текстур до об'єктів.
Для більш реалістичного освітлення були використані світлові джерела типу Spot Light для посилення ефекту світлових плям від світильників.
Я прочитав цю лекцію! Лекція прочитана! | Перейти до лекції → | Робочі файли
5.
Робота з картинами
Експорт та підготовки зображень у Playcanvas. Ми виконали ручний експорт зображень, враховуючи специфічні особливості, такі як застосування різних матеріалів із запеченими тінями до країв картин. Створивши мульти-матеріал з двома ідентифікаторами та стандартними матеріалами, ми досягли візуально привабливих результатів.Для генерації текстур для картин ми використовували штучний інтелект Bing DALL-E, емулюючи різні стилі, такі як масляні фарби та Ван Гог. Скрипт Gallery_Image_Setup.ms допоміг нам призначити текстури для кожної картинки, автоматично обрізаючи їх до правильного розміру та створюючи прев'ю з відповідними назвами.
Я прочитав цю лекцію! Лекція прочитана! | Перейти до лекції → | Робочі файли
6.
Інфо-панелі, Екран завантаження
Створили анімовані панелі.\nОпис для панелі генерували за допомогою Chat GPT, потім озвучили текст за допомогою TTS Free сервісу.Зробили свій стильний екран завантаження за допомогою JavaScript.
Я прочитав цю лекцію! Лекція прочитана! | Перейти до лекції → | Робочі файли
Ніхто не залишив коментарів
{{comment.lastname}} {{comment.name}} {{comment.date}}
Видалити