Product Materials & Textures

Control and customize the visual appearance of your 3D products through materials and textures. These functions are essential for product configurators where customers can choose different materials, colors, and finishes.

getMaterials

getMaterials(callback: Function)

Returns the list of all materials available for the product. Use this to build material selection interfaces for product configurators.

Product Configurator Example:

// Get all available materials for a product (e.g., fabric options for furniture)
api.getMaterials(function(materials){
  console.log('Available product materials:', materials);
  // Build a material selection UI for customers
});

---

setMaterial

setMaterial(material: object, callback: Function)

Updates a material by its material id. Get the materials from the getMaterials list.

api.getMaterials(function(materials) {
  var mat = materials[0];
  // Disable materials diffuse texture
  mat.channels.diffuseColor.enabled = false;
  console.log(mat);
  api.setMaterial(mat, function() {
    console.log('Material updated');
  });
});

---

setMaterialAnimationSpeed

setMaterialAnimationSpeed(materialId: string, speed: number, [callback: Function])

Updates a material animation speed by its material id. Get the materials from the getMaterials list.

api.setMaterialAnimationSpeed('materialId', 2, function() {
    console.log('Animation speed updated');
})

---

removeMaterial

removeMaterial(materialId: string, [callback: Function])

Removes material by id. Get the materials from the getMaterials list.

api.getMaterials(function(materials) {
  var mat = materials[0];

  api.removeMaterial(mat.id, function() {
    console.log('Material removed');
  });
});

---

removeMaterialChannel

removeMaterialChannel(materialId: string, channel: string, [callback: Function])

Remove material channel (only for textures). Get the materials from the getMaterials list.

api.removeMaterialChannel('material_id', 'albedoTexture', function() {
  console.log('Channel removed');
});

---

updateMaterialChannel

updateMaterialChannel(materialId: string, channel: string, textureId: string, [callback: Function])

Update material channel texture. Get the materials from the getMaterials list. Get the textures from the getTextures list.

api.updateMaterialChannel('material_id', 'albedoTexture', 'texture_id', function() {
  console.log('Channel updated');
});

---

getTextures

getTextures(callback: Function)

Returns the list of textures in the scene (includes textureId's).

api.getTextures(function(textures){
  console.log(textures);
});

---

addTexture

addTexture(url: string, callback: Function)

Add a new texture to the textures in the scene. The response includes the textureId.

Hint: The url is a CORS-enabled image file. The file format must be natively supported by the web browser.

api.addTexture('https://www.rooom.com/texture.png', function(textureId){
  console.log('New texture added with ID: ', textureId);
});

---

addVideoTexture

addVideoTexture(url: string, options: object, callback: Function)

Add a new video texture to the textures in the scene. The response includes the textureId.

The options parameter:

• loop (boolean) will make the video loop.
• mute (boolean) will play the video with audio muted. This is useful to avoid blocking autoplay in browsers.

Hint: The url is a CORS-enabled image file. The file format must be natively supported by the web browser.

api.addVideoTexture('https://www.rooom.com/texture.mp4', {loop: true, mute: true}, function(textureId){
  console.log('New video texture added with ID: ', textureId);
});

---

updateTexture

updateTexture(textureId: string, url: string, callback: Function)

Update an existing texture in the scene. Get the textures from the getTextures list.

Hint: The url is a CORS-enabled image file. The file format must be natively supported by the web browser.

api.updateTexture('1234567890', 'https://www.rooom.com/texture.png', function(textureId){
  console.log('Replaced texture with ID: ', textureId);
});

---

updateVideoTexture

updateVideoTexture(textureId: string, url: string, options: object, callback: Function)

Update an existing video texture in the scene. Get the textures from the getTextures list.

The options parameter:

• loop (boolean) will make the video loop.
• mute (boolean) will play the video with audio muted. This is useful to avoid blocking autoplay in browsers.

Hint: The url is a CORS-enabled image file. The file format must be natively supported by the web browser.

api.updateVideoTexture('1234567890', 'https://www.rooom.com/texture.mp4', {loop: true, mute: true}, function(textureId){
  console.log('Replaced video texture with ID: ', textureId);
});

Material channels

The following material channels are available:

• diffuseTexture
• diffuseColor
• albedoTexture
• albedoColor
• bumpTexture
• emissiveTexture
• reflectionTexture
• lightmapTexture
• ambientTexture
• ambientColor
• emissiveColor

They can be edited as JSON objects using the setMaterial function. Their exact attributes depend on the specific channel and texture options.