Making a 3D configurator without programming and layout
- Tutorial
3D product configurators are a relatively new trend in online marketing and e-commerce. The creation of such web applications has become possible due to the rapid development of the WebGL browser technology, which allows drawing 3D graphics directly on users' web pages.
In my opinion, the only problem that hinders the development of this trend is the lack of effective tools. Most of them are three-dimensional engines, which can be very useful for the programmer, but not for the ordinary artist. But there are exceptions: the Verge3D add-on to the 3ds Max packages and Blender offers the means by which an ordinary person can make three-dimensional configurators. It is this tool we will analyze in our article.
As an example, we will create a jewelry configurator. Now such configurators are doing all and sundry, so the example is more than relevant.
Click here to launch the configurator in a new window.
Since Verge3D can work with both 3ds Max and Blender, we’ll take both tools apart. In this article, we assume that you already have Verge3D installed. If not, download and install from the developer’s site. There is also a good installation guide and video tutorials.
Do not listen to people who say that creating 3D configurators is difficult and expensive. Everything is much easier if you clearly study the process:
Let's look at the whole process in order.
This step is the most difficult. However, if you have any experience with 3ds Max and Blender or a friend / employee who has similar experience, everything is done fairly quickly.
First of all, we create a 3D application using the Verge3D application manager. Enter the project name in the dialog box shown below and leave the other settings as is.
Next you need to create three-dimensional models. Please note that for best results, your 3D objects should be of average polygonality. In principle, it will be very good if you have less than 100 thousand polygons for one model.
The next stage is the creation of materials and textures. Remember that you can always familiarize yourself with the materials simply by looking at the source files in the installed Verge3D assembly (they are located in the
This is what silver material looks like in blender. The basis of the material is a spherical texture (called a “ring_matcap”), mixed with a noise map and a normal map. The first is a "metal" surface, and the other two make the material more realistic. Since we have 3 different metals: silver, pink and yellow gold, we simply make small color adjustments in the ColorRamp block of the material shown in the picture.
About the same silver material looks in 3ds Max. It is somewhat simpler, since it has an additional Diffuse Color texture, which is responsible for the color of the metal surface.
Time to figure out the diamond material. To make a characteristic shine and shimmer, we modeled it using two layers. The inner layer of the gem has an irregular mesh structure and the following material:
But this is the material of the outer layer of the gem, it is responsible for the edges of the diamond:
Absolutely also made a diamond in 3ds Max. The picture below shows both layers of a precious stone.
I'll tell you a little how to create textures for such materials. There is nothing difficult. Most of them are primitive textures of noise / reflections and surroundings that you can create on your own or find ready-made images on the Internet. The exceptions are normal maps, which will have to be baked from high poly models.
Using the Puzzles visual editor, you don’t need to be a programmer to make a decent 3D configurator. Simply use the “on click” puzzle to make the application respond to user actions, “show” / “hide” to change the shape of the ring and “assign material” to change materials. In this jewelry application we have 4 different rings, each of which is made of three different materials, respectively, silver and gold of pink and yellow shades.
Here is what all the logic in the collection looks like:
As you can see, there is nothing complicated here. On the left side there is a block for selecting rings, and the right side is responsible for changing materials.
The result is that the user has a choice between 12 variants of the ring. Imagine how much time and effort a jeweler needs to spend to produce such a collection. And here the editor Puzzles is responsible for everything (at such moments you realize that working as a programmer or a three-dimensional program is pretty good).
This is the easiest. Any Verge3D application can be deployed on your own resources or uploaded to the Verge3D Network cloud hosting. In the latter case, simply click the green globe icon in the application manager, and within a few seconds / minutes your configurator will be in the cloud. When the download is complete, you will see something like this:
In the dialog box, you can get a direct link to your application, a fragment of the HTML code for embedding the configurator in your own website or blog (or a ready-made online store). There are also buttons for sharing the application through social networks.
According to my observations, for the year in the industry of online commerce there have been radical changes. Retail is rapidly reducing retail space and is switching to the Internet, and Facebook has made it possible to download 3D models.
Solutions for three-dimensional configurators grow like mushrooms after rain, but using Verge3D for this purpose has several advantages. Among them, good integration with modeling packages, lack of dependence on cloud solutions and flexibility in the development of three-dimensional applications. In general, we live in an interesting time!
In my opinion, the only problem that hinders the development of this trend is the lack of effective tools. Most of them are three-dimensional engines, which can be very useful for the programmer, but not for the ordinary artist. But there are exceptions: the Verge3D add-on to the 3ds Max packages and Blender offers the means by which an ordinary person can make three-dimensional configurators. It is this tool we will analyze in our article.
As an example, we will create a jewelry configurator. Now such configurators are doing all and sundry, so the example is more than relevant.
Click here to launch the configurator in a new window.
Since Verge3D can work with both 3ds Max and Blender, we’ll take both tools apart. In this article, we assume that you already have Verge3D installed. If not, download and install from the developer’s site. There is also a good installation guide and video tutorials.
Our plan
Do not listen to people who say that creating 3D configurators is difficult and expensive. Everything is much easier if you clearly study the process:
- Create content (3D models and materials).
- We make the application interactive, that is responsive to user actions.
- We publish a configurator in the network.
Let's look at the whole process in order.
Creating 3D content
This step is the most difficult. However, if you have any experience with 3ds Max and Blender or a friend / employee who has similar experience, everything is done fairly quickly.
First of all, we create a 3D application using the Verge3D application manager. Enter the project name in the dialog box shown below and leave the other settings as is.
Next you need to create three-dimensional models. Please note that for best results, your 3D objects should be of average polygonality. In principle, it will be very good if you have less than 100 thousand polygons for one model.
The next stage is the creation of materials and textures. Remember that you can always familiarize yourself with the materials simply by looking at the source files in the installed Verge3D assembly (they are located in the
applications/ringfor Blender version and applications/ring_maxfor 3ds Max version).Silver and gold
This is what silver material looks like in blender. The basis of the material is a spherical texture (called a “ring_matcap”), mixed with a noise map and a normal map. The first is a "metal" surface, and the other two make the material more realistic. Since we have 3 different metals: silver, pink and yellow gold, we simply make small color adjustments in the ColorRamp block of the material shown in the picture.
About the same silver material looks in 3ds Max. It is somewhat simpler, since it has an additional Diffuse Color texture, which is responsible for the color of the metal surface.
Diamond
Time to figure out the diamond material. To make a characteristic shine and shimmer, we modeled it using two layers. The inner layer of the gem has an irregular mesh structure and the following material:
But this is the material of the outer layer of the gem, it is responsible for the edges of the diamond:
Absolutely also made a diamond in 3ds Max. The picture below shows both layers of a precious stone.
I'll tell you a little how to create textures for such materials. There is nothing difficult. Most of them are primitive textures of noise / reflections and surroundings that you can create on your own or find ready-made images on the Internet. The exceptions are normal maps, which will have to be baked from high poly models.
Add interactivity
Using the Puzzles visual editor, you don’t need to be a programmer to make a decent 3D configurator. Simply use the “on click” puzzle to make the application respond to user actions, “show” / “hide” to change the shape of the ring and “assign material” to change materials. In this jewelry application we have 4 different rings, each of which is made of three different materials, respectively, silver and gold of pink and yellow shades.
Here is what all the logic in the collection looks like:
As you can see, there is nothing complicated here. On the left side there is a block for selecting rings, and the right side is responsible for changing materials.
The result is that the user has a choice between 12 variants of the ring. Imagine how much time and effort a jeweler needs to spend to produce such a collection. And here the editor Puzzles is responsible for everything (at such moments you realize that working as a programmer or a three-dimensional program is pretty good).
Publish
This is the easiest. Any Verge3D application can be deployed on your own resources or uploaded to the Verge3D Network cloud hosting. In the latter case, simply click the green globe icon in the application manager, and within a few seconds / minutes your configurator will be in the cloud. When the download is complete, you will see something like this:
In the dialog box, you can get a direct link to your application, a fragment of the HTML code for embedding the configurator in your own website or blog (or a ready-made online store). There are also buttons for sharing the application through social networks.
Conclusion
According to my observations, for the year in the industry of online commerce there have been radical changes. Retail is rapidly reducing retail space and is switching to the Internet, and Facebook has made it possible to download 3D models.
Solutions for three-dimensional configurators grow like mushrooms after rain, but using Verge3D for this purpose has several advantages. Among them, good integration with modeling packages, lack of dependence on cloud solutions and flexibility in the development of three-dimensional applications. In general, we live in an interesting time!