Preparation

Creating an interactive 3D portfolio web gallery is an exciting and innovative approach to showcasing creative work. Using advanced WebGL, Playcanvas and Autodesk 3Ds Max technologies, you can create a unique virtual environment where visitors can fully immerse themselves in the world of your creativity.

I've read this lecture! Lecture done!  |  Go to lecture →  |  Working files

Modeling

Modeling of architecture, paintings and lamps.

I've read this lecture! Lecture done!  |  Go to lecture →  |  Working files

Lighting Adjustment, Texture Baking

Setting up lighting and texture baking for the virtual gallery. We used the Corona Renderer and created a simple lighting.
Next, we baked the lighting into textures using the second Unwrap channel using Corona Beauty.
However, when it came to paintings, we encountered some difficulties. In order to keep separate picture objects in Playcanvas but have one baked texture for all pictures, we created a separate SM_Pictures object (SM_PicturesForBake) by copying the pictures.
Then we baked the texture for this object, turning off the visibility of the original paintings.

I've read this lecture! Lecture done!  |  Go to lecture →  |  Working files

Creating a Playcanvas Project

Working on the gallery project has been greatly simplified and accelerated through the use of special scripts for 3Ds Max. Scripts allow you to automate the process of exporting models, optimizing textures and setting materials, which makes your work more convenient and efficient.

The 3ds_Max_to_Playcanvas.ms script provides instant export of selected objects in FBX format with the correct settings. It also automatically adds the appropriate textures to the exported file, allowing you to automatically create the appropriate materials in Playcanvas.

In conclusion, in this tutorial we have created a working prototype of the gallery, our Player can move around the room not only with the WASD keys, but also by clicking in a certain place.

Examples of specific actions were also given when adding various models, such as walls, floors, ceilings, lamps and stands. Shows material settings and binding textures to objects.

For more realistic lighting, Spot Light type light sources were used to enhance the effect of light spots from the fixtures.

I've read this lecture! Lecture done!  |  Go to lecture →  |  Working files

Working with paintings

Export and prepare images in Playcanvas. We have done a manual export of the images, taking into account the specifics, such as applying different materials with baked shadows to the edges of the paintings. By creating a multi-material with two IDs and standard materials, we achieved visually appealing results.

We used Bing DALL-E artificial intelligence to generate textures for the paintings, emulating various styles such as oil paints and Van Gogh. The Gallery_Image_Setup.ms script helped us assign textures to each image, automatically cropping them to the correct size and creating previews with the appropriate titles.

I've read this lecture! Lecture done!  |  Go to lecture →  |  Working files

Info panels, Loading screen

Animated panels were created.\nThe description for the panel was generated using Chat GPT, then the text was voiced using the TTS Free service.

We made our own stylish loading screen using JavaScript.

I've read this lecture! Lecture done!  |  Go to lecture →  |  Working files