Creation of the Lamborghini Urus project (WebGL-PlayCanvas). Part 6.

Vasyl Lukianenko
Vasyl Lukianenko
3D Artist and Technical Author
You are reading part: 1 2 3 4 5 6 7 8 9 10

Intro Part 6

This is Part 6 of the tutorial series on building a Lamborghini Urus with WebGL/PlayCanvas.

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



In this tutorial, we will add front doors to the scene. Set up materials for all new objects.

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

Patreon - 3DGROUND

Adding doors

By dragging and dropping into the "Assets" panel → "car", add two new objects "SM_FrontDoorRight" and "SM_FrontDoorLeft".

playcanvas add door objects
Loading...

Let's add door objects to the scene. Drag the "Template" doors into the "Car" Entity. If you did everything right, the doors will fall into place.

playcanvas add doors to scene
Loading...

Customizing door materials

Nine material slots are available for doors. We will use some materials from those that were created earlier.

playcanvas door material slots
Loading...

CarPaint Material

playcanvas material doors preview
Loading...

Take the previously created "M_CarPaint_Exterior" and make a duplicate. Let's name it as "M_CarPaint_Doors".

For "Ambient Occlusion" change the texture to "T_FrontDoorLeft_AO".

t frontdoorleft ao
Loading...

Assign "M_CarPaint_Doors" to "CarPaint" slot for both doors.

playcanvas material carpaint result
Loading...

Duplicate content

Assign the previously created materials such as "M_BlackPlastic", "M_BlackMetal", "M_Chrome", "M_GlassWinds", "M_BlackLeather" and "M_Leather".

playcanvas repeated materials
Loading...

Fine. Almost all materials were ready and we did not have to create them from scratch. It remains to create the material of the mirror and turn signals.

Material Mirror

playcanvas material mirror preview 2
Loading...

Change the "Shading" mode to "Phong". For "Diffuse" set the color to black "0,0,0".

playcanvas material mirror diffuse
Loading...

"Specular" and "Environment" settings are pretty simple. See screenshot.

playcanvas material mirror specular and environment settings
Loading...

Material EmissiveYellow

playcanvas material emissive yellow preview
Loading...

To adjust the material of the turn signals, you need to make the following changes.

playcanvas material emissiv yellow emissive settings
Loading...

Conclusion

playcanvas doors ready
Loading...

In this part, we added door objects and quickly set up, due to the fact that most of the materials were already created earlier.

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

FAQ

1. What is this article about?
This article concludes the Lamborghini Urus PlayCanvas project series and covers the final stages of developing a complete interactive WebGL application.
2. What is covered in Part 6?
Part 6 typically focuses on the final features, project completion, last-round optimizations, and the overall results of the development process.
3. Why is the final stage of development so important?
This is the stage where the project becomes production-ready, undergoes final validation, and is prepared for real-world users.
4. What tasks are usually performed before publishing the project?
Developers typically perform testing, bug fixing, performance optimization, interface improvements, and compatibility checks across multiple devices.
5. Why is it important to test all features before launch?
Testing helps ensure that every system works correctly and minimizes the risk of technical issues for end users.
6. Should the project be tested in different browsers?
Yes. Different browsers may handle WebGL content differently, so cross-browser compatibility is an important part of the release process.
7. Which areas usually require final optimization?
Graphics, textures, materials, scripts, asset loading systems, and user interface performance are commonly optimized before release.
8. Can the project continue to improve after release?
Yes. Most modern interactive applications continue to receive updates, improvements, and new functionality after launch.
9. Why is user feedback important?
Feedback helps identify issues, improve usability, and determine priorities for future development.
10. Is PlayCanvas suitable for large commercial projects?
Yes. PlayCanvas is widely used for large-scale interactive presentations, product configurators, and marketing applications.
11. What are the advantages of a browser-based WebGL application?
Users can access the project instantly through a browser without installing additional software.
12. Can new content be added after the project is completed?
Yes. PlayCanvas projects can be expanded with new models, materials, features, and interface improvements whenever needed.
13. How important is post-launch support?
Post-launch support is essential for fixing issues, improving performance, maintaining compatibility, and introducing new features.
14. What benefits does an interactive automotive configurator provide to customers?
Customers can explore the vehicle, compare options, customize configurations, and make more informed decisions through real-time interaction.
15. Can the experience gained from this project be applied elsewhere?
Yes. The same development principles can be applied to real estate, e-commerce, manufacturing, product visualization, and many other industries.
16. Who is this article useful for?
This article is useful for PlayCanvas developers, WebGL specialists, technical artists, automotive visualization professionals, and anyone interested in creating interactive 3D applications for the web.
Vasyl Lukianenko
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.
{{commentsMsg}}
  

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