Adding interactivity to SVOYA interior (Playcanvas/WebGL). Part 5

Vasyl Lukianenko
3D Artist and Technical Author

Date: April 10, 2023 Updated on: July 25, 2023 Reading time: 3 min Views: 291

You are reading part: 1 2 3 4 5

Introduction

This is the final part of 5 of 5 series of lessons on adding interactivity to the SVOYA Apartment interior.

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

Patreon

View the Playcanvas project online.

View Playcanvas Project Online

Improvement loading.js

I improved the "Start Screen" and made some changes, for example:

The name of the project now adapts to the screen size;
For the Desktop version, you can show the control buttons (W, A, S, D, Mouse);
For the Mobile version, the control buttons are hidden automatically;
Added some settings to control the font size, hide the second line of the project name, etc.;
Optimized the code;
And other minor changes.

Script "loading.js".

Add the script to the project, replacing the old one. Open the script by double clicking on it.

Now some settings are moved to the top of the script. For example, you can change the name of the project “projectNameLine1” and hide the second line with the name, leaving the value “projectNameLine2” empty.

“fontWidth” and “controlsSize” are responsible for the size of the text and the picture with the control buttons.
And with the help of “showControlsUsage” you can completely hide the picture of the control buttons by setting it to “false”.

Note that “vw” values are a percentage of the width, for example “10vw” is 10% of the screen width.
And “vh” is a percentage of the height, for example “8vh” is 8% of the screen height .

If you need help editing this script, please contact me on Patreon.

Patreon

You can see the result of the work done at the link.

View Playcanvas Project Online

Conclusion

At the end of the SVOYA Apartment series of lessons, we would like to express our gratitude to all our students for their perseverance and creativity in creating amazing interiors. We are sure that our lessons have helped you to reach your potential and learn how to create levels of any complexity.

What's more, you can now use our project as a template to create your own incredible interior visualization projects. We hope you enjoyed our series of tutorials and wish you continued success in your creative endeavours!

Patreon subscribers will be able to view the SVOYA Apartment project in read mode, as well as quickly copy-paste the necessary assets and scripts into their personal project.

For everyone else, you will find everything you need on the page of this lesson.

Patreon

You are reading part: 1 2 3 4 5

FAQ

1. What is this article about?

This article continues the SVOYA Apartment PlayCanvas series and focuses on expanding the project's interactivity, usability, and overall functionality within a WebGL environment.

2. What is covered in Part 5?

Part 5 introduces additional features, interface refinements, and workflow improvements that help create a more complete and polished interactive experience.

3. Do I need to complete the previous parts first?

Yes. Part 5 builds upon systems, scripts, and functionality developed throughout the earlier parts of the tutorial series.

4. Why is incremental development important in interactive projects?

Building features step by step makes it easier to test functionality, maintain performance, and avoid introducing complex issues into the project.

5. Can the techniques from this article be applied to other projects?

Yes. The methods demonstrated can be adapted to many different PlayCanvas applications, configurators, and interactive presentations.

6. Does Part 5 focus on user experience improvements?

Yes. Improving navigation, usability, and interaction flow is an important aspect of creating a successful interactive project.

7. Can custom interface components be created?

Yes. Developers can build custom buttons, panels, menus, and controls tailored to the needs of a specific project.

8. Can users interact with scene elements in real time?

Yes. Interactive scenes can allow users to change materials, colors, object configurations, and other properties instantly.

9. Why is performance optimization still important?

As more features are added, project complexity increases, making optimization essential for maintaining smooth performance.

10. Can PlayCanvas projects support both desktop and mobile devices?

Yes. With proper optimization and responsive interface design, projects can work effectively across multiple platforms.

11. Is PlayCanvas suitable for product and interior configurators?

Yes. The engine is widely used for creating interactive configurators, virtual showrooms, and architectural presentations.

12. Can functionality continue to grow after deployment?

Yes. One of the advantages of PlayCanvas is the ability to continuously update and improve projects after they are published.

13. Does advanced interactivity require programming skills?

Yes. While simple interactions are relatively easy to create, more advanced systems generally require JavaScript and PlayCanvas API knowledge.

14. Can these techniques improve commercial presentations?

Yes. Interactive functionality often increases user engagement and helps clients better understand products, interiors, and architectural projects.

15. What are the benefits of interactive WebGL experiences?

They allow users to explore environments, customize options, interact with content, and gain a deeper understanding of a project compared to static images.

16. Who is this article intended for?

This article is intended for PlayCanvas developers, technical artists, architectural visualization professionals, interior designers, and anyone interested in creating advanced interactive 3D experiences for the web.

Vasyl Lukianenko
3D Artist and Technical Author

Vasyl Lukianenko is a 3D artist and technical author focused on practical workflows, optimization, and production-ready techniques. He publishes tutorials, courses, and tools to help artists work faster and get cleaner results.