An ultimate guide to build your own configurator.
To get started its very important to clarify that here are three types of configurators:
Below, you'll find example implementations for each type. These tutorials offer a solid foundation to get you started. However, keep in mind that when it comes to scaling or complex functionalities (like node-based material editing, rule-based configurations or real-time price calculation), you would want to use solutions that offer these out of the box (like the colormass Configurator).
Both image-based configurators, whether single or 360°, rely on static pre-rendered images to enable product customization. These images, which can be created using 3D programs such as Blender, 3ds Max, or Cinema 4D, or through online rendering tools like the colormass Rendering Platform, are ultimately used as flat images in the configurator.
While this method is relatively straightforward to implement, it lacks interactivity since it only presents a single angle of the product. In a single image configurator, different options of the product are depicted using layers of individual images. For example, changing colors or patterns involves swapping these image layers.
Here you can see an image based configurator:
In this example the various light fixtures are rendered out separately and then packed into a single viewer in a HTML canvas. The images below show how these layers were rendered individually:
In the implementation below we will focus on these 3 images: background.jpg, overlay.png, and mask.png.
background.jpg: The base image.overlay.png: The image to be overlaid, which will be masked.mask.png: The mask image that defines which part of overlay.png will be shown.<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Composite with Mask</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Image Composite with Mask</h1>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
<script>
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const backgroundImage = new Image()
const maskedImage = new Image()
const maskImage = new Image()
backgroundImage.src = "background.jpg" // Your first image
maskedImage.src = "overlay.png" // Your second image
maskImage.src = "mask.png" // Mask for the second image
backgroundImage.onload = () => {
// Draw the background image
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height)
// Wait for both the masked image and mask to load
maskedImage.onload = applyMask
maskImage.onload = applyMask
}
function applyMask() {
if (!maskedImage.complete || !maskImage.complete) {
return
}
// Create a temporary canvas to draw the masked image
const tempCanvas = document.createElement("canvas")
tempCanvas.width = canvas.width
tempCanvas.height = canvas.height
const tempCtx = tempCanvas.getContext("2d")
// Draw the mask image onto the temporary canvas
tempCtx.drawImage(maskImage, 0, 0, tempCanvas.width, tempCanvas.height)
// Set the mask as a global composite operation on the context
tempCtx.globalCompositeOperation = "source-in"
tempCtx.drawImage(maskedImage, 0, 0, tempCanvas.width, tempCanvas.height)
// Now, draw the result onto the main canvas
ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height)
}
</script>
A 360° image configurator allows users to interact with a product in a fully rotatable view, providing a more immersive experience compared to static images. The core of a 360° image configurator is a set of images captured from various angles around the product. The captured images are organized in a specific sequence. The front view starts at 0°, and as the user rotates the view, images are swapped in real-time to create the illusion of a rotating object.
A 360° configurator loads all these images into an array or uses lazy loading to improve performance, especially with high-resolution images. Users can drag, swipe, or click-and-drag on the product to rotate it. This input is translated into which image to display based on the direction and speed of the interaction.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>360° Image Configurator</title>
<style>
canvas {
display: block;
margin: auto;
cursor: grab;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let images = [];
let totalFrames = 36; // Assuming 36 images for a full 360° rotation
let currentFrame = 0;
let isDragging = false;
let lastMouseX;
// Preload images for a single product view (e.g., "red car" as a single option)
for (let i = 1; i <= totalFrames; i++) {
const img = new Image();
img.src = `images/car_${i}.jpg`; // Replace with actual image path
images.push(img);
}
// Function to draw the current frame
function drawFrame() {
const img = images[currentFrame];
if (img.complete) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
} else {
img.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
}
}
// Mouse events for dragging to rotate
canvas.addEventListener('mousedown', (e) => {
isDragging = true;
lastMouseX = e.clientX;
});
canvas.addEventListener('mouseup', () => {
isDragging = false;
});
canvas.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaX = e.clientX - lastMouseX;
if (Math.abs(deltaX) > 10) { // Only rotate if dragged sufficiently
currentFrame = (currentFrame + Math.sign(deltaX) + totalFrames) % totalFrames;
drawFrame();
lastMouseX = e.clientX;
}
}
});
// Initial draw
window.onload = drawFrame;
</script>
</body>
</html>
3D Configurators represent an advanced category of product customization tools, providing users with an interactive 3D model of a product that they can modify and view from all angles. Unlike 2D or 360° configurators, which typically work with flat images or rotating views, 3D configurators utilize three-dimensional graphics to offer a more immersive and detailed customization experience.
Below is a simple example of how to set up a basic 3D configurator using Three.js, a popular JavaScript library for creating 3D graphics in the browser. This example loads a 3D model of a cube and allows users to interact with it.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Configurator</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a basic cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Set camera position
camera.position.z = 5;
// Add orbit controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Rotate the cube for some basic animation
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
controls.update(); // Required if controls.enableDamping or controls.autoRotate are set to true
renderer.render(scene, camera);
}
animate();
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>It's very important to mention that even though threejs offers possibilities to get started with a 3D configurator easily it is a low-level 3D framework. Meaning that as soon as you would need more complex functionalities:
we recommend a complete solution like colormass.
If you use the colormass Configurator then it is possible to use a simple UI to assemble highly complex variations and to use many of the features mentioned above and more. The platform offers both a geometry and material management through the online 3D CMS.
If you're interested in publishing your own configurator using the colormass Configurator, please send a request for a free trial to the configurator-trial@colormass.com email address.
