3D Shapes and Materials

Using 3D Icons

3D icons, like the one you've just created, can be used in various digital contexts to enhance user interaction and experience. Here are a few insights on where to use your new 3D Wi-Fi icon:

1. Web and Mobile Applications: 3D icons can add depth and interactivity to your user interfaces. They can be particularly effective in applications where user engagement is key, such as gaming apps, productivity tools, or educational platforms.
2. AR/VR Experiences: If you're developing augmented reality (AR) or virtual reality (VR) experiences, 3D icons can play a significant role. They can be used as interactive elements within the VR/AR environment, providing a more immersive experience for the user.
3. Website Design: 3D icons can make your website stand out, giving it a modern and innovative look. They can be especially effective when used in the hero section of your website, or in interactive infographics.
4. Presentation and Data Visualization: 3D icons can be used to add depth and clarity to presentations, especially when depicting complex data. They can make your presentations more engaging and easier to understand.

Remember, the key to effectively using 3D icons lies in balance. While they can add a unique depth and style to your designs, overuse can lead to visual clutter. Always consider the functionality and aesthetic of your overall design when incorporating 3D elements.

Creating the Basic Shapes

The first step is to create a new project in Spline and start building the main body of our Wi-Fi icon using circles.

• Start with a circle, set the size to X200, Y200, adjust the ring value to 85, and set the angle to 90 degrees. Extrude it by 30 units to add depth.
• Duplicate the first circle, adjust its size to X140, Y140, and set the ring to 78.
• Duplicate the second circle, reduce its size to X80, Y80, and adjust the ring to 62.
• Finally, duplicate the third circle, set its size to X20, Y20, set the ring to 0, and change the angle to 360 degrees.
• Group the circles and rotate them on the Z-axis by minus 45 degrees.
• Select all the circles and change the bevel to 1 to give them a softer edge.

Creating a Rectangle

Next, create a rectangle, and fine-tune it to achieve the desired aesthetics.

• Start by creating a rectangle with the dimensions X: 200, Y: 200.
• Enhance the rectangle's appearance by setting the corner to 46, giving it a slightly rounded edge.
• Add depth to the design by setting the extrusion to 30.
• Further improve the 3D effect by adjusting the bevel to 10 and bevel side to 4.
• Once the rectangle is created, group all the layers for easier manipulation.
• Finally, position your wifi symbol, constructed from a series of circles, at the center of the rectangle to complete your 3D icon.

Applying Materials

Once our shapes are in place, the next step is to apply materials to them. This process will help us define their color, light interaction, and reflectivity.

• Set the circle's material color to DFE7F5 and switch the lighting mode to overlay.
• Create a new material and change the color setting to Fresnel. Adjust the Fresnel settings to Color: 8CC8F7.
• Copy the material and apply it to the other three circles.
• For the rectangle, change the color setting to depth and apply a radial gradient color of hash 608EF1. Adjust the depth of the gradient and add a Fresnel effect.

Adding Shadows

Adding shadows to your 3D designs can provide a depth and realism. Here's how to make them softer:

• Go select Directional Light in the left sidebar of your Spline interface.
• In the Light Properties panel, adjust the Blur to 4 and change Penumbra to 3.

How to Change Pivot Position

When working with grouped objects in Spline 3D, you might encounter issues where the pivot position is not centered as desired, leading to off-centered rotations. To resolve this issue, follow these steps:

• Begin by ungrouping the layer. Select the group and choose the "ungroup" option to break it down into individual components.
• Next, select all the circles within the ungrouped layer. Navigate to the Boolean modifiers panel and click on "merge geometries." This action will combine all the selected circles into a single unified object.
• After successfully merging the geometries, ungroup the main parent group once again. This will ensure that the individual components are separated.
• Finally, regroup the objects together again. This step will help in recentering the pivot point of the grouped objects, ensuring smoother and more precise rotations.

By following this process of ungrouping, merging, and regrouping, you can effectively resolve any issues related to the off-centered pivot point in your grouped objects within Spline 3D.

Also in Spline, adjusting the pivot position of "Group" objects is a straightforward process. Follow these steps to move the pivot of an object:

• On the left sidebar, select only the parent of the group. You can do this by holding ⌘ + ⌥ (or Ctrl + Alt on Windows) while clicking the "Group" layer.
• Once the parent group is selected, use the gizmo tool to move the axis position of the pivot to your desired location. This functionality enables you to precisely control the pivot position, thereby facilitating accurate transformations and rotations.

Change a BG Color

After completing our icon, the next step is to select a background color from the Scene panel that suits your preferences.

Previewing Your Design

After naming your file, switch to play mode to preview your 3D icon. This mode allows you to interact with your scene, providing a realistic view of your design.

Conclusion

Congratulations! You've successfully created a 3D Wi-Fi icon using Spline. The techniques you've learned today can be applied to all sorts of projects, from app design to data visualization. Keep practicing and exploring the endless possibilities with Spline. Happy designing!