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

Vasyl Lukianenko
3D Artist and Technical Author

Date: April 7, 2023 Updated on: July 25, 2023 Reading time: 5 min Views: 415

You are reading part: 1 2 3 4 5

Introduction

This is part 4 of the 5 series of tutorials 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

Adding Joystick

playcanvas interior first person movement with joysitck

Practice shows that on mobile devices for orientation and movement in 3D space, the most convenient and effective way is to use a virtual joystick. Don't believe? Try it yourself!

The double-tap-and-drag option is only part of the experience, doesn't deliver the full immersion effect, and doesn't convey the unique user experience that a virtual joystick can deliver.

If you want your project not to look like a regular panorama tour and you want your client to get real pleasure from interacting with your scene, then the choice is clear - use a virtual joystick! It will help you feel like a real participant in the virtual world and create an unforgettable experience.

The joystick was taken as a basis from an example lesson on the official website of Playcanvas.

Touchscreen Joypad Controls

The only difficulty was that the virtual joystick scripts were adapted for Third Person, and we needed it for First Person. Therefore, in order not to change anything in the current project, I finalized the scripts from the lesson and adapted them for such a type of project as SVOYA Apartment.

Customizing UI elements

The joystick was created using the Playcanvas UI system.
All graphic elements were taken from the Playcanvas Manual.

Touchscreen Joypad Controls

To do this, go to the scene of this lesson.

Scene - Touchscreen Joypad Controls

And copy the “touch-joypad” folder into your project. If you are a Patreon subscriber and have access to the SVOYA Apartment project, I recommend copying the folder from there.

Next, create a new “Entity - 2D Screen” in “Hierarchy” in the “UI” folder.

Then from "Assets" in the "touch-joypad/templates" folder drag the two joystick template elements: "Left Fixed Touch Joystick" and "Right Fixed Touch Joystick".

An example is shown in the screenshot below.

Everything, these are all the graphic elements that needed to be added. If you now run the project (“Play”), you will see that even the Desktop version has these virtual joysticks.

Applying and configuring scripts

Add the following scripts to the "touch-joypad/scripts" folder with replacement.

Script "joystick-camera-orbit.js".

Script "joystick-player-movement.js".

Modified "touch-joystick.js".

The scripts “joystick-camera-orbit.js” and “joystick-player-movement.js” were completely written by me to adapt the virtual joystick to the current “firstPersonMovement” script for “Player”.

Apply the "joystickPlayerMovement" and "JoystickCameraOrbit" scripts to our "Player" with the following settings shown in the screenshot below.

Important!
Apply scripts only to “Player”. DO NOT apply scripts to “Camera”!

Select our "Right Fixed Touch Joystick" and apply the "touchJoystick" script, with the following settings.

Now select the "Left Fixed Touch Joystick" and also apply the "touchJoystick" script with the following settings.

Ready! You can run the project (“Play”) and enjoy the virtual joystick for the mobile version of the project.

Please note that the speed of movement of the “Player” or the rotation of the camera depends on how far the joystick stick is deflected. I had to sweat a little to make such a smooth functionality, because with ready-made solutions, for example, with the slightest shift of the stick, the player immediately gained maximum speed, which was not very comfortable.

I hope you appreciate my efforts and subscribe to my Patreon.

Patreon

playcanvas interior project with joystick

Adaptation for mobile devices

Another important point is to show users on mobile devices that they need to flip the device horizontally to use the joystick.

Add a new "Layout Group" to "2D Screen". Name it "RotatePhone".

Then add a new UI element “Button” to “RotatePhone”, name it “Background”.

Background button settings.

backround settings for rotate phone entity

As a texture for "RotateImage" load and select the following image.

With the following settings.

Select “Left Fixed Touch Joystick”, and in “touchJoystick” script, apply “RotatePhone” as “Entity” in “Rotate Phone UI Entity” setting.

apply image rotate phone in script settings

Run the project on mobile. Now you will see a picture showing turn the phone to landscape position.

And in a horizontal position, you can move around the stage with a joystick.

And here is the end result.

View Playcanvas Project Online

Conclusion

In this exciting part of our tutorial, we added a joystick for mobile devices and made it so that everything was done according to the rules and at the highest level. You will be able to use the scripts and principles learned in this tutorial in your future projects and delight your customers with an amazing user experience. You will definitely be above your competitors using such techniques and knowledge!

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 project and focuses on adding more advanced interactivity, improving usability, and expanding the capabilities of the WebGL presentation.

2. What is covered in Part 4?

Part 4 introduces additional interactive features, workflow improvements, and refinements that make the project more polished and user-friendly.

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

Yes. Part 4 builds upon systems and functionality developed in the earlier parts of the tutorial series.

4. Why is interactivity important in architectural visualization?

Interactivity allows users to actively explore a project instead of passively viewing images, creating a more engaging and informative experience.

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

Yes. The concepts demonstrated in the article can be adapted to many different interactive WebGL projects.

6. Does Part 4 focus on user experience improvements?

Yes. A major goal of this stage is to make the application easier and more intuitive for users to navigate and interact with.

7. Can custom interface elements be added?

Yes. PlayCanvas supports custom buttons, menus, panels, and other interface components that enhance user interaction.

8. Is it possible to extend project functionality over time?

Yes. One of the strengths of PlayCanvas is the ability to continuously add features and improve existing systems after deployment.

9. Can users interact with scene objects in real time?

Yes. Interactive projects can allow users to modify materials, colors, configurations, and other scene properties instantly.

10. How important is optimization at this stage?

Optimization remains extremely important because additional functionality can increase CPU, GPU, and memory usage.

11. Can the project remain compatible with mobile devices?

Yes. With proper optimization and interface design, PlayCanvas projects can work effectively on smartphones and tablets.

12. Is PlayCanvas suitable for commercial presentations?

Yes. It is widely used for real estate projects, product configurators, virtual showrooms, and interactive marketing experiences.

13. Do advanced features require programming knowledge?

Yes. More sophisticated interactions and custom systems typically require JavaScript and PlayCanvas API knowledge.

14. Can interactive projects be updated after publication?

Yes. New features, content, and improvements can be added without completely rebuilding the project.

15. What advantages do interactive WebGL presentations offer?

They allow users to explore environments, customize options, interact with content, and better understand a project compared to static renders.

16. Who should read this article?

This article is useful for PlayCanvas developers, technical artists, architectural visualization professionals, interior designers, and anyone interested in creating interactive browser-based 3D 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.