The colormass configurator can be used to render custom fabric designs, which are provided as color images. Internally, the configuator embeds those images into a scanned, high-quality base material. This material contributes to the overall appearance and makes your design look like wool, cotton or linen.
Examples
The following images were created using this sample code and these two images as input:
Colorful dots image, width and height 100cm
Checkered pattern, width and height 10cm
Checkered pattern, width and height 100cm
Setting the scene
For this example, we set up a test scene on the colormass platform. It consists of a chair and uses a wool-like base material. The Overlay Material Color node takes care of replacing the color information of this material and scales your pattern to the desired width and height.
Detail settings for the Overlay Material Color node
While the base material is fixed, the overlay image as well as the width and height are transferred to the configurator via the corresponding input node (image input and number input).
Detail settings for the overlay image input node.
Detail settings for the width number input node.
Detail settings for the width number input node.
Adding the markup
Once the scene has been prepared, the configurator component can be added to the page.
To change the color pattern used programmatically, we add three simple input elements.
Adding the scripts
We use the ‘setParameters’ API, which is provided by the configurator component, to transfer the input data to the renderer. You can find a detailed explanation in our guide on setting parameters.
Putting it all together
The complete example code can also be found in our sample repository.
// wait for the configurator component to be available
customElements.whenDefined("cm-configurator-main").then(() => {
cmConfigurator = document.querySelector("cm-configurator-main")
})
// pass the width input to the configurator
async function updateWidth(width) {
cmConfigurator.setParameter("width", "number", Number(width))
}
// pass the height input to the configurator
async function updateHeight(height) {
cmConfigurator.setParameter("height", "number", Number(height))
}
// pass the image input to the configurator as an object URL
// note: the image parameter supports passing an image via
// - URL
// - data URL (inlined base64)
// - raw data (Uint8Array)
async function updateOverlayImage(files) {
const file = files[0]
const image = await fetch(file)
const imageBlob = await image.blob()
const imageUrl = URL.createObjectURL(imageBlob)
await cmConfigurator.setParameter("overlayImage", "image", imageUrl)
}
