From 3D modeling to embedding on the web

Learn how to set up several boolean operations and create the whole product in just a few simple steps. In the end, we will work on scene optimization, to prepare it for sharing on the web and get it in AR.

1. Prepare the scene

Starting off with the base shape of the kettle. This will serve as a reference object. 

Environment settings

Make sure your grid is turned on for better overall space orientation. Right-click on an empty place in the scene and select: Show grid from the menu. 

To be able to see the shadow, add a ground plane. For the lighting, let’s not use a default environment but instead, the one pre-set called Skate park. This environment is great and it has a very natural lighting look and feel. It's not over or under-exposed, and it creates nice reflections as well. The environment presets in Vectary come in really handy and save so much time.

To change the environment, hit the ESC button on your keyboard to deselect everything in the scene. Click on Environment from the right side panel. Select the Outdoor option from the dropdown menu and scroll to Skate park. Go to the settings and play around with it, to get the effect that fits the best. For this scene, we went with: intensity at 70, rotation at 200, saturation at -100, and shadows at 75. 

Optimized lighting

To set up the lighting, we will use directional light because there are some advantages. With only one light, we can cover the whole area of the scene. We can control the intensity, as well as increase or decrease the shadow sharpness. To create a sense of realness and improve the look of the scene, always remember to turn on the shadows. 

Since the goal is to have the final project embedded on the web, try to be careful not to overdo it with shadows. They could affect performance. Actually, that is why we are using directional light in this scene. It is more performance friendly, as it casts shadows only in one direction. 

Adjusting the angle and the color of the light is also possible and quite effective. We will set the target point to about 45 degrees and instead of the default white color, give it some variety with the linear gradient. Set it from top left to bottom right. 

Add effects

Let’s dive a little bit deeper, and use other effects such as  Ambient occlusion, soft shadows and Adjustments. 

With AO we can add a shadow in an area where 2 objects are close to each other. Use the value of 10% and adjust its radius to 10. To get that natural look with the shadows, Soft shadows effect is really great. You can also get a nice result when combining it with environment shadows.

Color profile can really make a huge difference to the scene. These parameter adjustments will significantly affect the whole look and feel on the scene. On that note, change the color profile from None to ACES. We will leave contrast and saturation as they are and only increase the exposure to 85%. 

That is now all done and ready, so we can focus purely on the modeling process, specifically to the boolean operations. 

2. 3D modeling

The kettle body section consists of only 3 shapes: the outer tube with the zigzag pattern, the inner tube and the cylinder for the inside. 

The body of the kettle with a 3D pattern

First, let’s use the tube object, by getting it from the toolbar menu. Adjust its inner radius. The height at 155. Use the xyz coordinates and values in the top right corner of the panel as guidance. 

Let's do the same thing for the cylinder. Adjust its radius to fit into the inner radius of the tube. Select both and apply the Taper modifier and leave the default values.

The last component of the kettle body is the zigzag pattern created with boolean subtraction. In order to create it, we need a second tube. Again, adjust the height, then the radius and then put a Taper modifier. Bring in a cylinder and adjust its radius. Rotate it a little bit to get a similar angle. Put the small cylinder under an array modifier. Set the count to 24. If you want to keep the boolean lines parallel, put and adjust the taper on the small cylinder as well. We adjusted the strength to 55%.

The main shape is done. Time to set up the materials. Choose the cylinder in the middle and enter the Hex value. Set the roughness to 60% and metalness to 100%. For the outer parts of the kettle add the Hex value, set the roughness to 60% and metalness to 70%.

The plastic switch

First, add two cubes, adjust their sizes and use a boolean union modifier. It will merge the two together. To make a hole, duplicate the shape and move it to the kettle body boolean group. It will automatically subtract the shape out of the body. Duplicate switch once again because we will use two different materials for it. Adjust the position of the switch and slightly change its size to fit in the hole. Now, merge the materials into one and adjust the refraction and the thickness. Select the inner part of the switch. To adjust the material, first select a color and then set emission to 100. This will make it glow. Adjust its position and scale to fit it inside the other shape. It will look like it has transparent plastic around it.

The kettle lid

It uses a similar principle as we already used for the body. Start with a small cylinder to be used for the base. Next, duplicate it and adjust the size. Bring in a cylinder from which we will subtract the shape with help of booleans subtract and radial grid modifier.

The handle

It starts with a cube from the toolbar. The goal is to make it long enough, so we can create nice, rounded corners. Bring in another cube, as it will have to intersect with the first shape. Once you are fine with the position and the result, duplicate it and scale it on the Z axis to add a bevel modifier. This way, we get the top and the bottom parts of the handle, making it so much more visually interesting. Merge the materials. With an eye dropper tool, pick the material from the body of the kettle. To shape the edges, and give it that rounded look, use the same technique that we used for the lid. Add a cylinder and adjust the scale and the position. Use a Skew modifier to modify the shape even further. 

Almost there. Add another cylinder to the scene and adjust its scale and position. Now add a boolean subtract and then a radial array grid modifier to get the final shape. Copy the material properties from the body and adjust the position. It is definitely starting to look like it should.

But, before we add any details, we need to go into the project menu and give all of the objects a proper name. It will make it so much easier if we want to make any changes later on. A simple step but a huge help in the long run.

The branding details

Products like this usually have a logo, so let's add one here as well. Select “3D Text” from the menu. We are using a default font called: Open Sans. The thickness value is 700 and letter spacing 0.3. Scale it down, rotate it and with boolean subtract modifier, remove from the top of the handle. The updated boolean modifier comes with a “separate by material” function, which means, you can preserve each of the materials used within the boolean group. The 3D text is a good example of this.  Apply a bevel modifier to it. Keep the number of the bevel segments low. Side note. It is recommended to turn the bevel off when moving the 3D text. 

The kettle spout

The final part is the kettle spout. It was created from 3 cubes with 2 different boolean operations. The main shape was created by using intersect. The hole was created using boolean subtract. As a last modification to the shape we added taper and bevel modifiers. 

3. Showing the design in 3D and AR

Add camera for turntable and view limit

Now we can show it off. But, before we do that, let’s add a camera to the scene. It controls the viewing angles. Quite a useful feature when showcasing on the web. To do this, center the camera pivot target onto the kettle. 

When the design is embedded, the turntable will automatically rotate the scene. Set the duration and easing. Set the camera view limit on rotation. This means, the camera angle will be limited to the viewer and the turntable camera movement will automatically change direction when it hits a certain angle.

Add Augmented Reality

To embed this scene onto a website and enable the Augmented Reality viewer, first we need to add it to the scene from the Advanced menu. Wait until all models are generated. 

Embed 3D with transparent background

Change the background to transparent. Click on the share button in the toolbar. Enable Share to the web, and copy the embed code. Use the copied code on the website where you want to embed it. To view the model in Augmented reality click the AR button in the top right corner. Scan the QR code with your phone and point it to the location where you want it displayed.And it is done. Tea anyone?