Interactive presentation of SVOYA interior (WebGL/PlayCanvas). Part 5.


Author MastaMan
Updated on November 7, 2022

Index

Intro Part 5

This is Part 5 of a series of tutorials on creating an interactive SVOYA interior with WebGL/PlayCanvas.

For those who haven't read the previous parts, here's a demo video.






In this series of tutorials, we will make an interactive interior presentation that can be viewed in real time through a web browser.

Access to materials, such as: models in the "FBX" format, baked textures and more, you can get by subscribing to Patreon.

Patreon - 3DGROUND

Project setup in Playcanvas

If you are not registered with Playcanvas, you can easily do so on their website.

Playcanvas


Create a new "Blank Project", then open "Editor".
playcanvas new blank project
Loading...

Settings

Go to settings.
playcanvas settings
Loading...
Settings "Editor".
settings editor
Loading...
In "Physics", click "Import Ammo". After that, you will create a folder "Ammo" in "Assets".
physics
Loading...
Settings "Rendering".
playcanvas rendering settings
Loading...

Assets

Create the following folders under "Assets".
create folders
Loading...
Go to "Store".
playcanvas go to store
Loading...
In "Store", sort content by "Script" tag.
playcanvas store tag script
Loading...
And add the following scripts to the project: "FXAA Post Effect", "Bloom Post Effect", "Vignette Post Effect", "Brightness/Contarast Post Effect". Then in "Assets", move them to the "script" folder.
move scripts to folder
Loading...

Player

Remove "Box", "Camera", "Light" and "Plane" from the scene. Create a new "Entity" named "Player". This "Entity" will move around the scene, respond to "collision" objects and we will have a view from the first person.
player entity
Loading...
Create a new camera in "Player"
create camera
Loading...
Make the following camera settings.
camera pos
Loading...
camera settings
Loading...
Add the "Script" component to the camera and add the scripts: "bloom", "fxaa", "vignette", "brightnessContrast". With the following settings.
scripts settings
Loading...
Now for "Entity" - "Player", add two components: "Collision" and "RigidBody". With the following settings.
player components settings
Loading...
Then I took the "First Person Movement" script from the Playcanvas official manual page.

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


And I adapted the code a bit so that the mouse cursor does not disappear. I have attached the code for this script below. You can use it.



Load the script into Playcanvas, drop it into the "script" folder. Assign "Entity" - "Player" a new component "Script", in which we select "firstPersonMovement".
playcanvas first person movement script
Loading...
Specify the settings as in the screenshot above. Don't forget to specify "camera" parameter which is "Entity" - "Camera" which we created in "Player".

Cubemap

Add "cubemap" which will be used for highlights. Click "Store", sort by "Skybox" tag and add "Golden Hour Helipad HDR Cubemap" to your project.
cubemap hour helipad
Loading...
Move the added files from the "Assets" root to the "cubemap" folder.

Conclusion

In this part, we've done the hard work of setting up the scene and the "Player" while our textures are already baked. In the next part, we will add models to the scene and set up some materials.

Go To Lesson Interactive Presentation Of SVOYA Interior (WebGL/PlayCanvas). Part 6.


Go To Lesson Interactive Presentation Of SVOYA Interior (WebGL/PlayCanvas). Part 4.


{{commentsMsg}}
  

No one has posted a comment yet
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}


SUBSCRIBE TO OUR NEWSLETTER

{{subscribeMsg}}