Частина 5
Це Частина 5 із серії уроків зі створення інтерактивного інтер'єру SVOYA за допомогою WebGL/PlayCanvas.
Для тих, хто не читав попередніх частин, ось демонстративне відео.
У цій серії уроків ми зробимо інтерактивну презентацію інтер'єру, яку можна переглядати в реальному часі через веб-браузер.
Доступ до матеріалів, такі як: моделі у форматі "FBX", запечені текстури та інше, ви можете отримати підписку на Patreon.
Patreon - 3DGROUNDНалаштування проекту в Playcanvas
Якщо ви не зареєстровані в Playcanvas, це можна легко зробити на їх сайті.
PlaycanvasСтворіть новий "Blank Project", потім відкрийте "Editor".
Налаштування
Перейдіть до опцій.
Налаштування "Editor".
У "Physics", натисніть "Import Ammo". Після чого, у вас створиться папка "Ammo" в "Assets".
Налаштування "Rendering".
Assets
Створіть наступні папки в "Assets".
Перейдіть в "Store".
У "Store", відсортуйте контент за тегом "Script".
І додайте в проект наступні скрипти: "FXAA Post Effect", "Bloom Post Effect", "Vignette Post Effect", "Brightness/Contarast Post Effect". Потім в "Assets", перемістіть їх в папку "script".
Player
Видаліть зі сцени "Box", "Camera", "Light" та "Plane". Створіть новий "Entity" з назвою "Player". Цей "Entity" буде переміщатися сценою, реагувати на "collision" об'єкти і вигляд буде у нас від першої особи.
Створіть у "Player" нову камеру.
Зробіть налаштування камери.
Додайте компонент "Script" в камеру і додайте скрипти: "bloom", "fxaa", "vignette", "brightnessContrast". З наступними опціями.
Тепер для "Entity" - "Player", додайте два компоненти: "Collision" і "RigidBody". З наступними опціями.
https://developer.playcanvas.com/en/tutorials/first-person-movement/І трохи адаптував код, щоб не зникав курсор мишки. Код цього скрипта, я прикріпив нижче. Можете скористатися ним.
Завантажуємо скрипт у Playcanvas, закидаємо в папку "script". Призначаємо для "Entity" - "Player" новий компонент "Script", в якому вибираємо "firstPersonMovement".
Вказуємо налаштування як на скріншоті вище. Не забудьте вказати параметр "camera" це "Entity" - "Camera", яку ми створили в "Player".
Cubemap
Додамо "cubemap", яка буде використовуватися для відблисків. Натисніть на "Store", відсортуйте за тегом "Skybox" і додайте в проект "Golden Hour Helipad HDR Cubemap".
Перенесіть додані файли з кореня "Assets" до папки "cubemap".
Висновок
У цій частині ми проробили складну роботу з налаштування сцени та "Player", а тим часом наші текстури вже запеклися. У наступній частині ми додамо моделі в сцену і налаштовуватимемо деякі матеріали.