Developer

Appearance

Objects

rooomProducts Viewer API object manipulation for 3D product models. Control product components, parts visibility, transformations, and interactive product elements.

Manage individual components and parts of your 3D product models. These functions are essential for product configurators where customers need to show/hide different product variants, colors, or components.

getNodeList ​

getNodeList([callback: Function])

Returns a flattened list of all product components and parts in the scene. This includes all individual elements that make up your 3D product model.

Product Example:

js
// Get all components of a product (e.g., car parts, furniture components)
api.getNodeList(function (nodes) {
  console.log('Product components:', nodes);
  // Use this to build a product configurator interface
});

show ​

show(nodeId: string, [callback: Function])

Shows a specific product component or part. The nodeId is the ID of the component, which can be found via getNodeList. Perfect for product configurators where customers can add/remove features.

Product Configurator Example:

js
// Show a specific product feature (e.g., sunroof on a car, drawer on furniture)
api.show('sunroof_component', function () {
  console.log("Product feature shown");
  // Update UI to reflect the added feature
});

hide ​

hide(nodeId: string, [callback: Function])

Hides a node. The nodeId is the ID of the node, which can be found via getNodeList.

js
api.hide(nodeId, function () {
  console.log("Hide node");
});

setOpacity ​

setOpacity(nodeId: string, opacity: number, [callback: Function])

Sets the opacity of a node. The nodeId is the ID of the node, which can be found via getNodeList. The opacity is a number between 0 and 1.

TIP

Changing opacity does not work on instances.

js
api.setOpacity(nodeId, 0.25, function () {
  console.log("Changed node opacity");
});

getOpacity ​

getOpacity(nodeId: string, [callback: Function])

Returns the opacity of a node. The nodeId is the ID of the node, which can be found via getNodeList.

js
api.getOpacity(nodeId, function (visibility) {
  console.log("Node has the opacity", visibility);
});

remove ​

remove(nodeId: string, [callback: Function])

Delete a node. The nodeId is the ID of the node, which can be found via getNodeList.

js
api.remove(nodeId, function () {
  console.log("Node removed");
});

translate ​

translate(nodeId: string, newPosition: [x: number, y: number, z: number], [options: Object], [callback: Function])

Translates a node. The nodeId is the ID of the node, which can be found via getNodeList.

The options parameter: duration the duration of the translation animation (a number, in seconds; 0 by default)

js
api.translate(nodeId, [1, 1, 1], { duration: 1.0 }, function () {
  console.log("Node has been translated");
});

rotate ​

rotate(nodeId: string, newRotation: [degrees: number, x: number, y: number, z: number], [options: Object], [callback: Function])

Rotates a node. The nodeId is the ID of the node, which can be found via getNodeList.

newRotation: an array containing [degrees, axisX, axisY, axisZ].

The options parameter: duration the duration of the rotation animation (a number, in seconds; 0 by default)

js
api.rotate(nodeId, [180, 1, 0, 0], { duration: 1.0 }, function () {
  console.log("Node has been rotated");
});

getTransform ​

getTransform(nodeId: string, callback: Function)

Gets the transform of a node. The nodeId is the ID of the node, which can be found via getNodeList.

js
api.getTransform(nodeId, function ({ position, rotation, scaling }) {
  console.log(position); // { x: 0, y: 0, z: 0 }
  console.log(rotation); // { x: 0, y: 0, z: 0 }
  console.log(scaling); // { x: 1, y: 1, z: 1 }
});

pickFromScreen ​

pickFromScreen(position2D: [x: number, y: number], [callback: Function])

Returns information about the world position of the first hit (intersection) at a given screen coordinate.

js
api.pickFromScreen([100, 100], function (info) {
  console.log(info.position3D, info.id, info.name);
});

exportGLB ​

exportGLB(options: { scaling?: number, usdzCompat?: boolean }, callback: Function)

Exports the object without the skybox and shadowplane as an blob-string in gltf-binary. options: is the object with different export options for GLB object. options.scale: defines node scaling for export (1 by default). options.usdzCompat: prepares the glb file so that it can be converted to usdz. takes into account usdz limitations, such as no support for second uv map. (false by default)

js
api.exportGLB({ scaling: 1 }, function (blob) {
  downloadBlob(blob, "mesh.glb"); // pseudo-code
});

getHighlight ​

getHighlight(nodeId: string, callback: Function)

Returns the highlight settings from object in the scene. The nodeId is the ID of the node, which can be found via getNodeList.

Result: alpha, color and enabled

js
api.getHighlight(function (highlight) {
  console.log(highlight.alpha); // Result: 0.4
  console.log(highlight.color); // Result: #ffd700
  console.log(highlight.enabled); // Result: true
});

setHighlight ​

setHighlight(nodeId: string, options: Object, [callback: Function])

Set the highlight settings on an object in the scene. The nodeId is the ID of the node, which can be found via getNodeList.

Options: alpha, color and enabled

js
api.setHighlight(
  nodeId,
  { enabled: true, alpha: 0.4, color: "#ffd700" },
  function () {
    console.log("Highlight set");
  }
);

setTransform ​

setTransform(nodeId: string, transform: object, [callback: Function])

Sets the transform properties (position, rotation, scale) of a product component. The nodeId is the ID of the node, which can be found via getNodeList.

The transform object can contain:

  • position - Array [x, y, z]
  • rotation - Array [x, y, z] in radians
  • scale - Array [x, y, z]
js
api.setTransform('door-component', {
  position: [0, 0, 0.5],
  rotation: [0, Math.PI / 4, 0],
  scale: [1, 1, 1]
}, function() {
  console.log('Product component transformed');
});

getTransformNodes ​

getTransformNodes(type: string, [callback: Function])

Returns a list of all transform nodes in the product model with their current transform data. The type parameter filters by node type: 'mesh', 'transformNode', 'bone', or 'all' (default).

js
api.getTransformNodes('mesh', function(nodes) {
  console.log('All product components:', nodes);
  nodes.forEach(node => {
    console.log(`${node.name}: position ${node.position}`);
  });
});

duplicateNode ​

duplicateNode(nodeId: string, options: object, [callback: Function])

Duplicates a product component. The nodeId is the ID of the node, which can be found via getNodeList.

Options:

  • transform - Transform object with position, rotation, scale
  • instance - true for instance (shares geometry), false for full clone
  • materialId - ID of a material to apply
  • name - Custom name for the duplicated component
js
api.duplicateNode('shelf-component', {
  transform: { position: [0, 0.5, 0] },
  name: 'additional-shelf'
}, function(result) {
  console.log('Created component clone:', result.id);
});

setNodeMaterial ​

setNodeMaterial(nodeId: string, materialId: string, [callback: Function])

Sets the material of a product component. The nodeId is the ID of the node, which can be found via getNodeList. The materialId can be found via getMaterials.

js
api.setNodeMaterial('seat-cushion', 'leather-material', function(success) {
  if (success) {
    console.log('Material applied to product component');
  }
});

setScaleWithUVTiling ​

setScaleWithUVTiling(nodeId: string, scale: [number, number, number], [callback: Function])

Scales a product component and automatically adjusts UV tiling to prevent texture stretching. The nodeId is the ID of the node, which can be found via getNodeList.

js
api.setScaleWithUVTiling('tabletop-mesh', [1.5, 1, 1.5], function(success) {
  if (success) {
    console.log('Component scaled with proper UV tiling');
  }
});

getSkeletons ​

getSkeletons([callback: Function])

Returns a list of all skeletons in the product model with their bone hierarchies.

js
api.getSkeletons(function(skeletons) {
  skeletons.forEach(skeleton => {
    console.log(`Skeleton: ${skeleton.name}, Bones: ${skeleton.bones.length}`);
  });
});

getBoneTransform ​

getBoneTransform(skeletonId: string, boneName: string, [callback: Function])

Returns the transform data of a specific bone within a skeleton. The skeletonId is the ID of the skeleton and boneName is the name of the bone.

js
api.getBoneTransform('product-skeleton', 'joint-1', function(bone) {
  if (bone) {
    console.log('Bone position:', bone.position);
    console.log('Bone rotation:', bone.rotation);
  }
});

setBoneTransform ​

setBoneTransform(skeletonId: string, boneName: string, transform: object, [callback: Function])

Sets the transform properties of a specific bone within a skeleton. The skeletonId is the ID of the skeleton, boneName is the name of the bone, and transform is an object with position, rotation, and scale properties.

js
api.setBoneTransform('lamp-skeleton', 'arm-joint', {
  rotation: [0, 0, Math.PI / 3]
}, function(success) {
  if (success) {
    console.log('Product bone transform updated');
  }
});