Creating a 3D model for a website

In what format is it better to model

Models in the GLB format are best suited for showing 3D on the site. This is a compiled version of the GLTF format, capable of storing textures inside itself. Powerful compression is also supported, greatly reducing the final weight of the file. Also, this format can contain many tracks of various animations.

In which program is it better to create 3D models for a website

For convenient work with the GLB format, the Blender editor is best suited. It is free, popular, new versions are appearing quickly.

If you need to create realistic models with textures, it is best to work in it, otherwise editors such as 3D max and the like will work.

Centering the model

For the convenience of working with the model on the website, it is necessary to set the geometries of all meshes in their geometric centers:

• In Blender, select Set Origin => Origin to Geometry => Bound Center.
• In 3D max, this is done using Pivot Point.

You should also place the model in the center of the coordinates:

• If the model is in the form of a single mesh, then it is enough to set zero coordinates for it.
• Otherwise, you can select all the meshes, clone them, then combine them into one mesh, then set it at the center of the coordinates, after which, combine all the meshes with this mesh through binding to the vertices, and delete it.

Working with details

To smooth the model in Blender, select the Subdivision Surface modifier and increase the Levels Viewport to the appropriate level.

Checking and correcting normals

When working with the model, check the state of the normals:

• Select the model and go to Overlays
• Select the Face Orientation checkmark

If the model is red, normals are turned out. To fix this, go into edit mode, select all or part of the model, press ALT + N and select Flip.

• To prevent this problem from interfering with your work:
• Go to the Material Properties tab on the right
• Go to Settings and uncheck Backface Culling

Features of working with materials

The GLB format is demanding of materials, so special preparation is needed for it. It is important to familiarize yourself with the acceptable properties of the material for the GLB format.

The parts of the model (hereinafter meshes) that users can repaint (change color, texture) should have only one material.

If you work in 3D max and use VRAY/CORONA materials, then you need to convert them to standard materials:

• Manually
• Use the plugin to automatically convert V-ray materials to standard ones

How to apply texture

Often, we come across ready-made models, but without textures. Without them, the models will not look realistic.

To apply texture to a model in Blender:

• We select the model
• At the bottom, select the Shader Editor and transfer the desired texture there
• We connect the texture with our model via Color to Base Color
• If the texture does not lie flat, then go to the UV Editing panel. Two windows appear, in the right window we switch to Edit Mode and select the model. The expanded model appears in the left window. Align the texture.

Packing textures

In order for the textures of your model to be displayed in the service, it is necessary that you attach them to your model file. Depending on the program you are working in, this can be done in different ways:

• In Blender, select File => External Data => Automatically Pack Resources from the menu
• In order to properly export materials from 3D max, it is important that they are all in the same folder.

Model optimization

To display a 3D model in a browser, especially on most mobile devices, requires good optimization:

• Apply all modifiers
• Remove unnecessary vertices and polygons that do not make a significant contribution to the visual component
• Reduce the size of textures (for most cases, 1024 by 1024 jpeg images are sufficient, which can be compressed, for example, in Photoshop with an optimization value of 60%)

The recommended final size of the uncompressed model is up to 3 MB.

Export subtleties

• Blender supports exporting the model to GLB format by default.
• If you work in 3D max, then in the 2023 version there is an export function to GLB. For earlier versions: first, you can export to FBX with materials, and then use an online converter to export to GLB.