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

Vasyl Lukianenko
3D Artist and Technical Author

Date: April 4, 2023 Updated on: July 25, 2023 Reading time: 2 min Views: 331

You are reading part: 1 2 3 4 5

Introduction

This is part 2 of the 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

Changing cabinet colors on the click of a UI button

Customizing UI elements

Create a "configurator" folder in "scripts" of the "Assets" panel.

Add a brush image.

In order not to create identical buttons from scratch, we will simply duplicate the existing ones.
Make a duplicate of the “PlayPause” button, name the new button “ChangeColor”, name the picture “PaintImage”. Delete the "PauseImage" image.

For the "PaintImage" image, select "paint.png".

Place a “ChangeColor” button next to the cabinets object as shown in the image below.

The button is ready, it remains to add the color change script.

Applying and customizing the changeColor script

Add the “change-color.js” script to the “scripts/configurator” folder.

Script "change-color.js".

Apply the script to the desired object, in our case it is “Cabinet”. To do this, select an object, add “Component” “Script” and select “changeColor” from the dropdown list.

Note!
It is worth noting that the script will change the colors of the "Diffuse" in the material, so the "Lightmap" of the material should have a black and white texture of baked shadows.

Material settings “Cabinet_2048”.

In the “changeColor” script settings, specify the material for which the color will change in the “Material” parameter.
Be sure to specify the “Trigger Button” - this is the button that will activate the color change.
In the “Colors” parameter, specify a number, how many colors there will be.
Next, adjust the colors.

Ready! Run the project, you should change colors by pressing the "ChangeColor" button.

result configurator playcanvas change color for material

Conclusion

In this part of the tutorial, we made a simple material color change configurator.

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 development of the interactive SVOYA Apartment project in PlayCanvas and explores additional features that improve user experience and scene functionality.

2. How is Part 2 different from Part 1?

Part 2 focuses on extending the project with new interactive features, interface improvements, and additional ways for users to interact with the scene.

3. Should I read Part 1 before Part 2?

Yes. Part 2 builds upon the concepts and functionality introduced in Part 1, so understanding the previous chapter is recommended.

4. What new features are introduced in Part 2?

The article covers additional user controls, interface enhancements, and expanded interaction capabilities within the interactive scene.

5. Can these techniques be used in other PlayCanvas projects?

Yes. Most of the methods demonstrated can be adapted and applied to a wide variety of PlayCanvas-based projects.

6. Is this approach suitable for interior configurators?

Yes. Many of the techniques discussed can be used to create interactive interior, furniture, and real estate configurators.

7. Can I create custom user interface elements?

Yes. PlayCanvas allows developers to create custom buttons, menus, panels, and other interface components for scene interaction.

8. Does interactivity improve project presentations?

Yes. Interactive functionality makes presentations more engaging and allows users to explore different design options on their own.

9. Can objects be modified in real time?

Yes. Depending on the project logic, users can change materials, colors, finishes, and other object properties while viewing the scene.

10. How important is optimization when adding new features?

Very important. Every new interactive feature adds processing overhead, making performance optimization a critical part of development.

11. Can these projects run on mobile devices?

Yes. When properly optimized, PlayCanvas projects can run on smartphones and tablets as well as desktop computers.

12. Is PlayCanvas suitable for commercial applications?

Yes. PlayCanvas is widely used for commercial presentations, product configurators, virtual showrooms, and interactive 3D experiences.

13. Do I need JavaScript knowledge for advanced functionality?

Yes. While simple interactions can be implemented easily, advanced features and custom logic typically require JavaScript and PlayCanvas API knowledge.

14. Can the project be expanded after publication?

Yes. PlayCanvas projects can be updated, extended with new functionality, and improved over time without rebuilding everything from scratch.

15. What are the benefits of interactive WebGL presentations?

They allow users to explore environments, interact with content, customize options, and experience projects in real time rather than viewing static images.

16. Who is this article useful for?

This article is useful for PlayCanvas developers, technical artists, architectural visualization specialists, interior designers, and anyone interested in building interactive WebGL experiences.

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.