Author: MastaMan
Date: March 1, 2022
Updated on: July 25, 2023
You are reading part: 1 2 3 4 5 6 7 8

Intro Part 8

This is Part 8 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

Loading screen

The final touch was left to bring our project to the ideal. Let's make a beautiful screensaver with animation during project loading.

loading screen settings

Go to "Settings", then "Loading Screen" and click "+ Create Default". Enter the name "loading". Move the newly created "loading.js" file in the "Assets" panel to the "script" folder.

Edit the file "loading.js" remove all existing code, copy and paste the code above. Save your changes.

Run the project by pressing the "Play" button. Great, we have a stylish new loading screen. Cool!

new loading screen playcanvas

I will not describe how the "loading.js" code changed, I will only say that in order to edit it, you need to have knowledge of "JavaScript", "HTML" and "CSS". If you have any questions about how to adapt the code to your needs, please contact me on Patreon.

Patreon - 3DGROUND


I make a video from a web browser, it turned out no worse than rendering an animation ????

The project turned out really cool, interactive gives new experience and impressions. Projects of this type certainly deserve their niche, since it is cheaper and easier than on Unreal Engine. You simply provide a link to the client and the interactive will work on desktop computers, mobile devices, TVs, Windows, Linux, iOS, Android, without any special software, wherever a web browser works.

Multiplatform and small weight of the project (only 40 MB) allows you to open the project even on weak devices with a poor Internet connection.

The main feature of Playcanvas is that several people can work on the project at the same time, available documentation, many examples of implementing various functionality and free 1 GB of space.

If you are interested in such tutorials, support me on Patreon!

Patreon - 3DGROUND

Well, now let's enjoy the result.



Also, an advanced tutorial on adding more interactivity to the interior of SVOYA is already available.

This is a more comprehensive lesson that covers important topics:

  • Creating a video texture for the TV material, as well as the ability to control Play / Pause using the UI button;
  • Change cabinet colors by pressing the UI button;
  • Creating materials for sofa simulating Falloff, changing sofa materials on UI button press;
  • Adaptation for mobile devices, adding Joystick;
  • Improving loading.js to adapt to mobile devices.
Adding interactivity to SVOYA interior (Playcanvas/WebGL). Part 1.

You are reading part: 1 2 3 4 5 6 7 8

No one has posted a comment yet
{{comment.lastname}} {{}} {{}}
Sponsored content