Tutorial: Creating Fully Procedural and Parametric 3D Knobs in Blender

Whether you are designing a digital synthesizer plugin (VST), a web-based smart home control panel, or an abstract technical graphic, 3D knobs and dials add a premium touch to your user interface.

The most efficient way to build these assets is using procedural and parametric techniques in Blender. Instead of manually editing geometry, you can construct a non-destructive workflow that lets you change bevels, tick counts, and materials in seconds.

In this step-by-step tutorial, we will model a minimalist, industrial-style 3D knob, set up a procedural brushed metal material, and prepare it for export.

Prerequisites

• Blender (version 4.0 or newer is recommended).
• Basic familiarity with navigating the Blender interface (moving, scaling, rotating).

Step 1: Modeling the Base Geometry

We will start by modeling the core shape of our knob using a cylinder.

1. Add a Cylinder: Open a new Blender file, delete the default cube, and press Shift + A > Mesh > Cylinder.
2. Set Vertices: In the popup menu in the bottom-left, change the vertices to 64 to ensure the circle looks smooth, and set the fill type to N-Gon.
3. Scale the Cylinder: Scale the cylinder down on the Z-axis (S > Z) to make it look like a flat disk or coin.
4. Bevel the Edges: Press Tab to enter Edit Mode, press 2 to switch to Edge Select, and select the top circular edge. Press Ctrl + B to bevel the edge, scroll your mouse wheel up to add 3-4 segments, and confirm. This rounded edge will catch highlights when we render.

Step 2: Modeling the Pointer Indicator (Non-Destructive)

Instead of cutting into our mesh, we will use a separate shape to act as the indicator line.

1. Add a Plane: In Object Mode, press Shift + A > Mesh > Plane.
2. Scale to a Strip: Scale the plane on the X and Y axes (S > Y and S > X) until it forms a thin rectangular strip.
3. Position on Knob: Place the strip on top of the cylinder, extending from the center to the outer edge. Raise it slightly on the Z-axis so it sits flat on the cylinder's top face.
4. Apply a Boolean Difference:
   • Select the cylinder.
   • Go to the Modifiers properties (blue wrench icon) and add a Boolean Modifier.
   • Set the type to Difference, and select the plane/strip as the target object.
   • Hide the plane/strip in the viewport. You will now see a clean, recessed slot cut into the cylinder!
   • Why this is better: You can resize or move the plane at any time to adjust the width or depth of the indicator slot.

Step 3: Shading with a Procedural Brushed Metal Material

Brushed metal is a staple of industrial design. We will create it procedurally using Blender's Shader Editor.

1. Open Shader Editor: Switch the top viewport to the Shading workspace.
2. Create New Material: Select the cylinder, click New in the material properties to create a Principled BSDF material.
3. Set Base Properties:
   • Set Metallic to 1.0 (makes the material reflect like metal).
   • Set Roughness to 0.3 (creates a semi-matte, soft reflection).
   • Set Anisotropic to 0.8. This is the key property—it stretches reflections along a specific direction, mimicking brushed metal.
4. Set Anisotropic Rotation: To make the brushed reflections spin circularly around the dial (radial anisotropy), add a Texture Coordinate node and a Mapping node. Connect the Object output of the Texture Coordinate node to the Vector input of the Mapping node.
5. Add a Radial Tangent: Add a Tangent node. Set its direction to Radial and select your cylinder object. Connect the Tangent output to the Tangent input of the Principled BSDF node. You will now see light reflect in a circular, radial pattern across the top of the knob!

Step 4: Setting Up the Render Scene

To render the knob for your UI:

1. Add a Camera: Press Shift + A > Camera. Position it directly above the knob looking down (Ctrl + Alt + Numpad 0 sets the active camera view).
2. Set Lighting: Add a strong Area Light pointing at the knob from an angle. This will create a sharp specular highlight along the beveled edges.
3. Enable Transparency: Go to the Render properties (camera icon), scroll down to the Film section, and check the Transparent box. This ensures your rendered PNG will have a transparent background, ready to be dropped into Figma.

Step 5: Exporting

If you need to use the 3D model in WebGL/Three.js instead of rendering static images:

1. Go to File > Export > glTF 2.0 (.glb/.gltf).
2. In the export settings, choose glTF Binary (.glb).
3. Under the Mesh settings, make sure Apply Modifiers is checked so that the Boolean cuts are baked into the geometry for the web.

Conclusion

By using parametric booleans and radial anisotropy, you can quickly build high-quality, professional 3D knobs that react beautifully to light. You can now duplicate this setup, rotate the cylinder to represent different setting levels (e.g. volume or speed), and render out an asset sequence for your interface!

Check out our pre-modeled, fully customizable procedural Null Objects at 0x3d for your next dashboard interface!