Автор: MastaMan
Дата: Лютий 26, 2022
Оновлено: Липень 25, 2023
Ви читаєте частину: 1 2 3 4 5 6 7 8

Частина 5

Це Частина 5 із серії уроків зі створення інтерактивного інтер'єру SVOYA за допомогою WebGL/PlayCanvas.

Для тих, хто не читав попередніх частин, ось демонстративне відео.



У цій серії уроків ми зробимо інтерактивну презентацію інтер'єру, яку можна переглядати в реальному часі через веб-браузер.

Доступ до матеріалів, такі як: моделі у форматі "FBX", запечені текстури та інше, ви можете отримати підписку на Patreon.

Patreon - 3DGROUND

Налаштування проекту в Playcanvas

Якщо ви не зареєстровані в Playcanvas, це можна легко зробити на їх сайті.

Playcanvas

Створіть новий "Blank Project", потім відкрийте "Editor".

playcanvas new blank project
Loading...

Налаштування

Перейдіть до опцій.

playcanvas settings
Loading...

Налаштування "Editor".

settings editor
Loading...

У "Physics", натисніть "Import Ammo". Після чого, у вас створиться папка "Ammo" в "Assets".

physics
Loading...

Налаштування "Rendering".

playcanvas rendering settings
Loading...

Assets

Створіть наступні папки в "Assets".

create folders
Loading...

Перейдіть в "Store".

playcanvas go to store
Loading...

У "Store", відсортуйте контент за тегом "Script".

playcanvas store tag script
Loading...

І додайте в проект наступні скрипти: "FXAA Post Effect", "Bloom Post Effect", "Vignette Post Effect", "Brightness/Contarast Post Effect". Потім в "Assets", перемістіть їх в папку "script".

move scripts to folder
Loading...

Player

Видаліть зі сцени "Box", "Camera", "Light" та "Plane". Створіть новий "Entity" з назвою "Player". Цей "Entity" буде переміщатися сценою, реагувати на "collision" об'єкти і вигляд буде у нас від першої особи.

player entity
Loading...

Створіть у "Player" нову камеру.

create camera
Loading...

Зробіть налаштування камери.

camera pos
Loading...
camera settings
Loading...

Додайте компонент "Script" в камеру і додайте скрипти: "bloom", "fxaa", "vignette", "brightnessContrast". З наступними опціями.

scripts settings
Loading...

Тепер для "Entity" - "Player", додайте два компоненти: "Collision" і "RigidBody". З наступними опціями.

player components settings
Loading...

https://developer.playcanvas.com/en/tutorials/first-person-movement/

І трохи адаптував код, щоб не зникав курсор мишки. Код цього скрипта, я прикріпив нижче. Можете скористатися ним.



Завантажуємо скрипт у Playcanvas, закидаємо в папку "script". Призначаємо для "Entity" - "Player" новий компонент "Script", в якому вибираємо "firstPersonMovement".

playcanvas first person movement script
Loading...

Вказуємо налаштування як на скріншоті вище. Не забудьте вказати параметр "camera" це "Entity" - "Camera", яку ми створили в "Player".

Cubemap

Додамо "cubemap", яка буде використовуватися для відблисків. Натисніть на "Store", відсортуйте за тегом "Skybox" і додайте в проект "Golden Hour Helipad HDR Cubemap".

cubemap hour helipad
Loading...

Перенесіть додані файли з кореня "Assets" до папки "cubemap".

Висновок

У цій частині ми проробили складну роботу з налаштування сцени та "Player", а тим часом наші текстури вже запеклися. У наступній частині ми додамо моделі в сцену і налаштовуватимемо деякі матеріали.



Ви читаєте частину: 1 2 3 4 5 6 7 8
{{commentsMsg}}
  

Ніхто не залишив коментарів
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}
Sponsored content