Use the 3D Viewer API

Last modified: April 24, 2024

1 Introduction

The 3D Viewer API allows you to retrieve, create, and update 3D model entities, actions, and properties more programmatically. You can easily create your custom logic to interact and manipulate a 3D model.

2 API Reference

For details, see 3D Viewer API Reference.

3 Usage

3.1 Use Case Example

If you want to get properties of a selected part on the 3D Viewer, perform the following steps:

  1. Retrieve selected object information as a string through the On Selection Change event attribute of the 3D Viewer.

  2. Use mx.viewer3D.getObjects() to get the object instances.

  3. Use IPart.getProperties() to pass the selected object as a parameter. Then you get the properties in key-value pairs. The following is the sample code in a JavaScript action. It takes 2 parameters selectedObject and propertyObject.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

        /**
     * @param {string} selectedObject
     * @param {string} propertyObject
     * @returns {Promise.<MxObject[]>}
     */
    export async function GetProperties(selectedObject, propertyObject) {
      // BEGIN USER CODE
      console.info(selectedObject);
        // Get the underlying 3D objects given its selection ids.
      let instances = mx.viewer3D.getObjects(selectedObject);
      let promises = [];
      let objects = [];
      if (instances && instances.length > 0) {
        let properties = await instances[0].getProperties();
        for(let key in properties) {
          if(properties.hasOwnProperty(key)) {
            promises.push(createPropertyObject(objects, key, properties[key]));
          }
        }
      }

      return Promise.all(promises).then(()=>objects);

      function createPropertyObject(objects, key, value) {
      return new Promise(function (resolve, reject) {
          mx.data.create({
        entity: propertyObject,
        callback: function(prop) {
            prop.set("Key", key);
            prop.set("Value", value);
              objects.push(prop);
            resolve(prop);
        },
          error: function(error) {
              reject(error.message);
          }
            });
        });
          }

        // END USER CODE
      }

  4. Call this JavaScript action in a nanoflow to get all available properties of a given part.

  5. Use a page to show all the properties returned :

    show-properties

3.2 Other Sample Code Snippets

Starting from version 2.2.0, 3D Viewer module includes some out-of-box API actions. The module allows you to manipulate model parts via RotatePart, ScalePart, SetPartColor, and TranslatePart API actions. You can find these actions in the Viewer3D > USE_ME > API Actions folder in the App Explorer in Studio Pro. You can directly use them to create your custom logic for manipulating models. Check out the code implementation of these JavaScript actions, along with the 3D Viewer API Reference. This may give you some ideas about how you want to make use of the 3D Viewer API.

4 Feedback

If you have problem using the 3D Viewer API listed in 3D Viewer API Reference. or you would like more APIs to be exposed, raise a ticket in Mendix Support portal. We will address them accordingly.