When online shopping first took off, product pages were built around a few static images and maybe a zoom feature. That was enough back then. But today’s customers expect far more. They want to spin a sneaker around, preview a sofa in their living room, or customize the color of a water bottle, all before clicking “Add to Cart.”
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
💡 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:
<span class="hljs-tag"><<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"glcanvas"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"640"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"480"</span>></span><span class="hljs-tag"></<span class="hljs-name">canvas</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
<span class="hljs-keyword">const</span> canvas = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"glcanvas"</span>);
<span class="hljs-keyword">const</span> gl = canvas.getContext(<span class="hljs-string">"webgl"</span>);
<span class="hljs-keyword">if</span> (!gl) {
alert(<span class="hljs-string">"WebGL not supported by your browser"</span>);
}
<span class="hljs-comment">// Clear the canvas with a background color </span>
gl.clearColor(<span class="hljs-number">0.0</span>, <span class="hljs-number">0.5</span>, <span class="hljs-number">0.5</span>, <span class="hljs-number">1.0</span>);
gl.clear(gl.COLOR_BUFFER_BIT);
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
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:
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> THREE <span class="hljs-keyword">from</span> <span class="hljs-string">'three'</span>;
<span class="hljs-comment">// Create a scene </span>
<span class="hljs-keyword">const</span> scene = <span class="hljs-keyword">new</span> THREE.Scene();
<span class="hljs-comment">// Camera setup </span>
<span class="hljs-keyword">const</span> camera = <span class="hljs-keyword">new</span> THREE.PerspectiveCamera(<span class="hljs-number">75</span>, <span class="hljs-built_in">window</span>.innerWidth/<span class="hljs-built_in">window</span>.innerHeight, <span class="hljs-number">0.1</span>, <span class="hljs-number">1000</span>);
<span class="hljs-comment">// Renderer </span>
<span class="hljs-keyword">const</span> renderer = <span class="hljs-keyword">new</span> THREE.WebGLRenderer();
renderer.setSize(<span class="hljs-built_in">window</span>.innerWidth, <span class="hljs-built_in">window</span>.innerHeight);
<span class="hljs-built_in">document</span>.body.appendChild(renderer.domElement);
<span class="hljs-comment">// Add a cube </span>
<span class="hljs-keyword">const</span> geometry = <span class="hljs-keyword">new</span> THREE.BoxGeometry();
<span class="hljs-keyword">const</span> material = <span class="hljs-keyword">new</span> THREE.MeshBasicMaterial({ <span class="hljs-attr">color</span>: <span class="hljs-number">0x00ff00</span> });
<span class="hljs-keyword">const</span> cube = <span class="hljs-keyword">new</span> THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = <span class="hljs-number">5</span>;
<span class="hljs-comment">// Animation loop </span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">animate</span>(<span class="hljs-params"></span>) </span>{
requestAnimationFrame(animate);
cube.rotation.x += <span class="hljs-number">0.01</span>;
cube.rotation.y += <span class="hljs-number">0.01</span>;
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).
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>3D Product Demo<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css">
<span class="hljs-selector-tag">body</span> {
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">overflow</span>: hidden;
<span class="hljs-attribute">font-family</span>: sans-serif;
<span class="hljs-attribute">background</span>: <span class="hljs-number">#f5f5f5</span>;
}
<span class="hljs-selector-tag">canvas</span> { <span class="hljs-attribute">display</span>: block; }
<span class="hljs-selector-class">.controls</span> {
<span class="hljs-attribute">position</span>: absolute;
<span class="hljs-attribute">top</span>: <span class="hljs-number">20px</span>;
<span class="hljs-attribute">left</span>: <span class="hljs-number">20px</span>;
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">gap</span>: <span class="hljs-number">10px</span>;
}
<span class="hljs-selector-tag">button</span> {
<span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span> <span class="hljs-number">16px</span>;
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;
<span class="hljs-attribute">border</span>: none;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>;
<span class="hljs-attribute">cursor</span>: pointer;
<span class="hljs-attribute">color</span>: white;
}
<span class="hljs-selector-class">.red</span> { <span class="hljs-attribute">background</span>: <span class="hljs-number">#e63946</span>; }
<span class="hljs-selector-class">.blue</span> { <span class="hljs-attribute">background</span>: <span class="hljs-number">#0077ff</span>; }
<span class="hljs-selector-class">.green</span> { <span class="hljs-attribute">background</span>: <span class="hljs-number">#2a9d8f</span>; }
<span class="hljs-selector-tag">button</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.8</span>; }
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-comment"><!-- Controls to change product colors --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"controls"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"red"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"setColor(0xe63946)"</span>></span>Red<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blue"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"setColor(0x0077ff)"</span>></span>Blue<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"green"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"setColor(0x2a9d8f)"</span>></span>Green<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- Import Three.js library --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/three@0.154/build/three.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"script.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
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.jsfile 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.
<span class="hljs-comment">// Create the scene </span>
<span class="hljs-keyword">const</span> scene = <span class="hljs-keyword">new</span> THREE.Scene();
<span class="hljs-comment">// Set up a camera </span>
<span class="hljs-keyword">const</span> camera = <span class="hljs-keyword">new</span> THREE.PerspectiveCamera(
<span class="hljs-number">75</span>, <span class="hljs-built_in">window</span>.innerWidth / <span class="hljs-built_in">window</span>.innerHeight, <span class="hljs-number">0.1</span>, <span class="hljs-number">1000</span>
);
camera.position.z = <span class="hljs-number">3</span>;
<span class="hljs-comment">// Create a WebGL renderer </span>
<span class="hljs-keyword">const</span> renderer = <span class="hljs-keyword">new</span> THREE.WebGLRenderer({ <span class="hljs-attr">antialias</span>: <span class="hljs-literal">true</span> });
renderer.setSize(<span class="hljs-built_in">window</span>.innerWidth, <span class="hljs-built_in">window</span>.innerHeight);
<span class="hljs-built_in">document</span>.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).
<span class="hljs-comment">// Create a cube geometry </span>
<span class="hljs-keyword">const</span> geometry = <span class="hljs-keyword">new</span> THREE.BoxGeometry(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);
<span class="hljs-comment">// Apply a material (blue color by default) </span>
<span class="hljs-keyword">let</span> material = <span class="hljs-keyword">new</span> THREE.MeshStandardMaterial({ <span class="hljs-attr">color</span>: <span class="hljs-number">0x0077ff</span> });
<span class="hljs-comment">// Combine geometry and material into a mesh </span>
<span class="hljs-keyword">const</span> cube = <span class="hljs-keyword">new</span> THREE.Mesh(geometry, material);
<span class="hljs-comment">// Add the cube to the scene </span>
scene.add(cube);
<span class="hljs-comment">// Add lighting so we can see the cube properly </span>
<span class="hljs-keyword">const</span> light = <span class="hljs-keyword">new</span> THREE.DirectionalLight(<span class="hljs-number">0xffffff</span>, <span class="hljs-number">1</span>);
light.position.set(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>, <span class="hljs-number">5</span>).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:
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">animate</span>(<span class="hljs-params"></span>) </span>{
requestAnimationFrame(animate);
cube.rotation.x += <span class="hljs-number">0.01</span>;
cube.rotation.y += <span class="hljs-number">0.01</span>;
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.
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setColor</span>(<span class="hljs-params">hex</span>) </span>{
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.
<span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">"resize"</span>, <span class="hljs-function">() =></span> {
camera.aspect = <span class="hljs-built_in">window</span>.innerWidth / <span class="hljs-built_in">window</span>.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(<span class="hljs-built_in">window</span>.innerWidth, <span class="hljs-built_in">window</span>.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.
Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & MoreÂ