This is where WebGL and Three.js come in. Together, they make it possible to bring interactive 3D graphics to online stores, directly inside the browser, without plugins or external apps.

In this article, we’ll break down how these technologies work, why they’re transforming eCommerce, and what developers need to know to build the next generation of interactive shopping experiences.

Table of Contents

• What is WebGL?

• How Three.js Makes WebGL Developer-Friendly

• How to Build a Simple 3D Configurator Demo

  • Step 1: Setting Up the HTML File

  • Step 2: Adding Styles with CSS

  • Step 3: Creating the Scene in Script.js

  • Step 4: Adding a Product (Cube)

  • Step 5: Making the Cube Interactive

  • Step 6: Making It Responsive

• The Role of 3D in eCommerce

• Real-World Use Cases

• Technical Challenges & Best Practices

• The Future of 3D in Online Stores

• Conclusion

💡 Prerequisites

To get the most out of this article, you should have:

• A basic understanding of JavaScript (variables, functions, imports).

• Familiarity with HTML and the DOM (since we’ll be rendering into a <canvas>).

• Curiosity about graphics programming – no deep math or shader knowledge is required.

• Node.js and npm installed (if you want to try out the Three.js examples locally).

If you’ve never worked with 3D graphics before, don’t worry. We’ll keep the examples simple and focus on concepts

What is WebGL?

WebGL (Web Graphics Library) is a JavaScript API that allows you to render interactive 2D and 3D graphics in the browser using the computer’s GPU. Unlike older browser technologies (think Flash), WebGL is built directly into modern browsers, so users don’t need to install anything extra.

At its core, WebGL is based on OpenGL ES (a subset of the OpenGL specification), and it provides developers with a low-level API to work with shaders, vertices, and rendering pipelines.

A minimal WebGL example might look like this:

<canvas id="glcanvas" width="640" height="480"></canvas> 

<script> 
  const canvas = document.getElementById("glcanvas"); 
  const gl = canvas.getContext("webgl"); 

  if (!gl) { 
    alert("WebGL not supported by your browser"); 
  } 

  // Clear the canvas with a background color 
  gl.clearColor(0.0, 0.5, 0.5, 1.0); 
  gl.clear(gl.COLOR_BUFFER_BIT); 
</script>

If you run this snippet, it simply fills a canvas with a teal color. Not too exciting – but it’s happening on the GPU, and from here, you can go all the way to photorealistic 3D.

How Three.js Makes WebGL Developer-Friendly

While WebGL is powerful, it’s also verbose. Developers need to manage shaders, buffer objects, and projection matrices manually, which is a steep learning curve for most front-end engineers.

This is where Three.js shines. It’s a popular JavaScript library that wraps around WebGL and provides a higher-level, developer-friendly API for working with 3D graphics. Instead of hundreds of lines of setup code, you can get a 3D scene up and running in a few lines.

Here’s a simple Three.js example that creates a rotating cube:

import * as THREE from 'three'; 

// Create a scene 
const scene = new THREE.Scene(); 

// Camera setup 
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

// Renderer 
const renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

// Add a cube 
const geometry = new THREE.BoxGeometry(); 
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
const cube = new THREE.Mesh(geometry, material); 
scene.add(cube); 

camera.position.z = 5; 

// Animation loop 
function animate() { 
  requestAnimationFrame(animate); 
  cube.rotation.x += 0.01; 
  cube.rotation.y += 0.01; 
  renderer.render(scene, camera); 
} 
animate();

With just a few lines, you have an interactive 3D object rendered inside the browser. This ease of use is why Three.js has become the go-to library for developers building interactive product experiences online.

How to Build a Simple 3D Configurator Demo

To understand how these technologies translate to real-world online shopping, let’s build a tiny demo: a 3D box that rotates and changes color when a button is clicked. Think of it as the most basic version of a product previewer.

Step 1: Setting Up the HTML File

Let’s start with an index.html file. This file will contain a <canvas> function for rendering our 3D scene and a few buttons that act like product “options” (for example, choosing red, blue, or green).

<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>3D Product Demo</title> 
  <style> 
    body { 
      margin: 0; 
      overflow: hidden; 
      font-family: sans-serif; 
      background: #f5f5f5; 
    } 
    canvas { display: block; } 
    .controls { 
      position: absolute; 
      top: 20px; 
      left: 20px; 
      display: flex; 
      gap: 10px; 
    } 
    button { 
      padding: 10px 16px; 
      font-size: 14px; 
      border: none; 
      border-radius: 4px; 
      cursor: pointer; 
      color: white; 
    } 
    .red { background: #e63946; } 
    .blue { background: #0077ff; } 
    .green { background: #2a9d8f; } 
    button:hover { opacity: 0.8; } 
  </style> 
</head> 
<body> 
  <!-- Controls to change product colors --> 
  <div class="controls"> 
    <button class="red" onclick="setColor(0xe63946)">Red</button> 
    <button class="blue" onclick="setColor(0x0077ff)">Blue</button> 
    <button class="green" onclick="setColor(0x2a9d8f)">Green</button> 
  </div> 

  <!-- Import Three.js library --> 
  <script src="https://cdn.jsdelivr.net/npm/three@0.154/build/three.min.js"></script> 
  <script src="script.js"></script> 
</body> 
</html>

Here’s what we’ve done:

• Added a few styled buttons for color options.

• Set up some basic CSS for layout and design.

• Included the Three.js library from a CDN.

• Linked to a script.js file where we’ll write our 3D logic.

Step 2: Creating the Scene in Script.js

Now create a file called script.js. This is where we’ll build the 3D world.

The first step is to create a scene, a camera, and a renderer. Think of it like this: the scene is the stage, the camera is the viewpoint, and the renderer is what draws everything to the screen.

// Create the scene 
const scene = new THREE.Scene(); 

// Set up a camera 
const camera = new THREE.PerspectiveCamera( 
  75, window.innerWidth / window.innerHeight, 0.1, 1000 
); 
camera.position.z = 3; 

// Create a WebGL renderer 
const renderer = new THREE.WebGLRenderer({ antialias: true }); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement);

Step 3: Adding a Product (Cube)

For simplicity, we’ll use a cube to represent our product. Later, this could be any 3D model (like a shoe, sofa, or banner stand).

// Create a cube geometry 
const geometry = new THREE.BoxGeometry(1, 1, 1); 

// Apply a material (blue color by default) 
let material = new THREE.MeshStandardMaterial({ color: 0x0077ff }); 

// Combine geometry and material into a mesh 
const cube = new THREE.Mesh(geometry, material); 

// Add the cube to the scene 
scene.add(cube); 

// Add lighting so we can see the cube properly 
const light = new THREE.DirectionalLight(0xffffff, 1); 
light.position.set(2, 2, 5).normalize(); 
scene.add(light);

Step 4: Animating the Cube

We want the cube to spin. This creates the feeling of an interactive product preview. Here’s how we can make that happen:

function animate() { 
  requestAnimationFrame(animate); 

  cube.rotation.x += 0.01; 
  cube.rotation.y += 0.01; 

  renderer.render(scene, camera); 
} 
animate();

Now, when you load the page, the cube will rotate continuously.

Step 5: Adding Interactivity

Let’s connect the color buttons to the cube. Each button calls the setColor() function with a hex code.

function setColor(hex) { 
  cube.material.color.setHex(hex); 
}

Now, when you click “Red,” “Blue,” or “Green,” the cube changes color instantly, like switching between product variations.

Step 6: Making It Responsive

Finally, let’s ensure the canvas resizes properly on different devices.

window.addEventListener("resize", () => { 
  camera.aspect = window.innerWidth / window.innerHeight; 
  camera.updateProjectionMatrix(); 
  renderer.setSize(window.innerWidth, window.innerHeight); 
});

We now have a mini product/Object previewer:

• A 3D object (cube) that rotates like a real product.

• Buttons that change its color, simulating product options.

• Responsive rendering across screen sizes.

This is, of course, a simplified demo, but the same principles are used in real-world ecommerce experiences.

Example of 3D Configurator

The Role of 3D in eCommerce

Why should online stores invest in 3D at all? The answer lies in user engagement. Studies show that customers are far more likely to convert when they can interact with products in detail. Instead of scrolling through flat images, they rotate, zoom, and even customize products in real-time.

From a developer’s perspective, integrating 3D isn’t just about “making it pretty.” It’s about:

• Reducing return rates (customers know exactly what they’re buying).

• Increasing time-on-site (3D models encourage exploration).

• Supporting customization workflows (colors, materials, engravings).

Real-World Use Cases

There are a few areas where WebGL + Three.js are already changing eCommerce. 3D product configurators utilize Three.js to enable customers to customize products interactively, changing colors and textures.

For example, 3D product reviews where online stores let customers rotate couches, cars, or appliances to see every angle. Virtual try-ons are also becoming popular among eyewear and fashion brands. They use AR + WebGL to let customers virtually try items online. Online printers and manufacturers also let customers configure their products in 3D before purchasing them.

Technical Challenges & Best Practices

Building interactive 3D experiences isn’t without hurdles. Developers need to think about:

• Performance optimization – Compressing models, using Level of Detail (LOD), and reducing texture sizes.

• Cross-device compatibility – Ensuring 3D experiences work smoothly on both high-end desktops and mobile devices.

• Loading times – Using lazy loading for textures and assets.

• User experience – Smooth navigation controls, fallback images for unsupported devices, and accessible interactions.

The Future of 3D in Online Stores

We’re only scratching the surface of what’s possible. Some trends shaping the future include:

• WebGPU: a next-generation graphics API that promises even better performance than WebGL.

• Augmented Reality (AR): blending real and digital worlds with WebXR.

• AI-powered customization: automatically generating product variations or suggestions.

Conclusion

WebGL and Three.js are powering a new wave of interactive online shopping. What used to require native apps or heavy plugins is now achievable directly in the browser, giving customers richer experiences and businesses higher conversion rates.

For developers, experimenting with WebGL and Three.js opens the door to a whole range of applications, from simple product previews to full-fledged 3D configurators. And as browser technology evolves, the line between online shopping and real-world interaction will only continue to blur.

In this guide, you’ll learn how to build a dropdown menu using shadcn/ui. It’s a tool that works well with Tailwind CSS and Radix UI to help you make nice-looking, easy-to-use menus.

Table of Contents

• What is shadcn/ui?

• Why Use shadcn/ui for Dropdowns?

• Let’s Build a Dropdown Step-by-Step

  • Step 1: Start a New Project

  • Step 2: Add the Dropdown Menu Component

  • Step 3: Import What You Need

  • Step 4: Build a Simple Dropdown

  • Step 5: Make It Look Better

  • Step 6: Make It Work on All Screens

  • Step 7: Add Cool Icons

  • Step 8: It’s Already Accessible!

• Real-World Use Case: Country Dropdown with Flags

• Final Thoughts

💡 Prerequisites

Before we start, make sure you have:

• Basic knowledge of React and JavaScript

• Node.js and a package manager like npm, pnpm, or yarn are installed

• Familiarity with Tailwind CSS is a bonus, but not required

We’ll walk through everything step by step, so don’t worry if you’re not an expert yet.

What is shadcn/ui?

shadcn/ui is a group of tools (called components) that help you build parts of a website, like buttons, modals, and dropdowns. It’s built with Radix UI and styled using Tailwind CSS. It’s perfect if you’re using React or Next.js.

With shadcn/ui, you don’t get just styled components, you get full control over how everything works and looks. That makes it perfect for teams that want consistency in design without giving up flexibility.

Why Use shadcn/ui for Dropdowns?

Dropdown menus are a great use case for shadcn/ui because:

• It’s easy to use with keyboard and screen readers

• You can create custom looks using Tailwind CSS

• You control how it works and looks

• It works great in real websites and apps

• It integrates well with modern React workflows

Let’s Build a Dropdown Step-by-Step

Step 1: Start a New Project with shadcn/ui

You don’t need to set up React, Next.js, or Tailwind manually. Just run this command:

pnpm dlx shadcn@latest init

This will automatically create a new Next.js app with Tailwind CSS and shadcn/ui preconfigured.

Tip: You can also use npx instead of pnpm dlx if you prefer:

npx shadcn@latest init

Step 2: Add the Dropdown Menu Component

After your project is ready, add the dropdown component using:

npx shadcn@latest add dropdown-menu

This will pull in all the necessary components to create a dropdown menu.

Step 3: Import What You Need

In your React file, import the full dropdown module so you can access all its features:

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuPortal,
} from "@/components/ui/dropdown-menu"

Step 4: Build a Simple Dropdown

Here’s a basic dropdown example:

export function ProfileMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className="px-4 py-2 bg-primary text-white rounded">
          Open Menu
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuItem>Log out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

This is just the start. You can add groups, submenus, and keyboard shortcuts for power users.

Step 5: Make It Look Better

Use Tailwind CSS to style your dropdown, and hover effects like this:

<DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button className="px-3 py-1.5 bg-primary text-white text-sm font-medium rounded-md hover:bg-primary/90 transition-colors">
            Open Menu
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-52 border-gray-200 shadow-lg rounded-md space-y-0.5">
          <DropdownMenuLabel className="text-xs text-gray-500">
            My Account
          </DropdownMenuLabel>
          <DropdownMenuSeparator className="border-t border-gray-100" />
          <DropdownMenuItem className="px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md cursor-pointer transition-colors">
            Profile
          </DropdownMenuItem>
          <DropdownMenuItem className="px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md cursor-pointer transition-colors">
            Settings
          </DropdownMenuItem>
          <DropdownMenuItem className="px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 rounded-md cur

Step 6: Make It Work on All Screens

Want your dropdown to be responsive? Use Tailwind’s responsive classes:

<DropdownMenuContent className="w-full md:w-64">

You can also dynamically position the dropdown using Radix's built-in portal support.

Step 7: Add Cool Icons

Install Lucide icons:

npm install lucide-react

Then use them in your menu:

import { User, Settings, LogOut } from "lucide-react"

<DropdownMenuItem>
  <User className="mr-2 h-4 w-4" /> Profile
</DropdownMenuItem>

Icons help users scan options quickly – a great touch for UX.

Step 8: It’s Already Accessible!

shadcn/ui (thanks to Radix UI) makes your dropdown menu:

• Keyboard friendly

• Screen-reader ready

• Following best web practices

You don’t need to configure accessibility – it just works :)

Real-World Use Case: Country Dropdown with Flags

Looking for a more advanced dropdown? Here’s an amazing example that includes search, flag icons, and grouping:

👉 shadcn-country-dropdown.vercel.app

It’s open-source and a great place to see what’s possible with shadcn/ui.

Final Thoughts

Using shadcn/ui to create a dropdown menu is fast, simple, and powerful. You get great styling, accessibility, and full control over how things look and work. Whether you’re just starting out or building for production, this is a solid tool to use.

Dropdowns are just the beginning. shadcn/ui offers a whole library of headless components for building modern UIs.

I hope you found this article helpful! If you're building a SaaS product or any web app that involves user interaction or conversion, consider enhancing user trust with real-time notifications like modal pop-ups, sales pop up, etc.