Developer

Appearance

Product Objects & Components ​

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.

Hint

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');
  }
});

Built with ❤️ by rooom AG

Copyright © 2025 rooom AG. All rights reserved.