FVS 3D Component API

V1.0.0

11.0.16

V1.18.1

Added APIs related to 3D component roaming animation:

getRoamAnimations, playRoamAnimations, and updateRoamAnimationAction.

11.0.22

V2.10.0

Added a 3D component model animation API: getAnimationByName.

V3.0.0

Added 3D component view angle rotation control APIs: camera.playAutoRotation(), camera.pauseAutoRotation(), and camera.stopAutoRotation().

V3.1.0

Added APIs for getting/setting 3D scene view angle parameters information: camera.getState(), and camera.setState().

V3.4.0

Added an API for getting camera view angle parameters of the 3D component: getCameraPerspectiveByName.

/

/

DataLayer[]

interface DataLayer {

  /**

  * To display the layer or not.

  */

 visible: boolean

 /**

  * To set the layer to be visible or hidden.

  */

 setVisible: (visible: boolean) => void;

}

You can get all data layers of a 3D component by using this API.

duchamp.getWidgetByName("3D Component Name").getSeries();

/

This API is not supported on mobile terminals.

name: string

Data layer name, string

DataLayer

interface DataLayer {

  /**

   * To display the current layer or not.

   */

 visible: boolean

 /**

  * To set the layer to be visible or hidden.

  */

 setVisible: (visible: boolean) => void;

}

You can get the specific data layer of Layer 1 of a 3D component by using this API.

duchamp.getWidgetByName("3D Component Name").getDataLayerByName("Layer 1");

This API is not supported on mobile terminals.

from:number

to:number

duration:number

from: the start time of the scene change, an integer starting from 0 and with no upper limit.

to: the end time of the scene change, an integer which must be greater than the from value.

duration: the time required for the scene change, measured in milliseconds (ms).

/

/

The custom model animation starts at 14:00 on day one, and ends at 14:00 on day two, with a duration of 3 seconds:

duchamp.getWidgetByName("Custom Model 1_Page 1").animateSceneTime({
     from: 14, //To start at 14:00 by default.
     to: 38, //To end at 14:00 the next day.
     duration: 3000 //Change duration of 3 seconds.
});

You can enable cyclic variations based on the above scene:

Note:

Currently, no API can be used to pause the scene time change.

setInterval(function(){
duchamp.getWidgetByName("Custom Model 1_Page 1").animateSceneTime({
     from: 14,
     to: 38,
     duration: 3000
});
},2000)

Scene Time of FVS Custom Model Component.

This API is not supported on mobile terminals.

name: string

object name of the model mesh

Object

name: object name of the model mesh

visible: visibility

scaling: scaling ratio

rotation: rotation angle

position: position

focus: focusing on model position

Example: You can get the scaling ratio of a model object by using this API.

duchamp.getWidgetByName("Component Name ").getMeshByName("Model Name").scaling

This API is not supported on mobile terminals.

visible: boolean

Visible or not, which is a boolean value.

·  true: visible

·  false: invisible

Example: You can set a model object of a 3D component to be invisible by using this API.

duchamp.getWidgetByName("Component Name").getMeshByName("Model Name").setVisible(false);

This API is not supported on mobile terminals.

NumberArray3

Scaling ratio value: [X, Y, Z]

Example: You can set the scaling ratio of a component in a 3D component by using this API.

duchamp.getWidgetByName("Component Name").getMeshByName("Model Name").setScaling([10,10,10]);

NumberArray3

Rotation angle value: [X, Y, Z]

Example: You can set the rotation angle of a model object in a 3D component by using this API.

duchamp.getWidgetByName("Component Name").getMeshByName("Model Name").setRotation([10,10,10]);

This API is not supported on mobile terminals.

NumberArray3

Position value: [X, Y, Z]

Example: You can set the position of a model object in a 3D component by using this API.

duchamp.getWidgetByName("Component Name").getMeshByName("Model Name").setPosition([10,10,10]);

This API is not supported on mobile terminals.

options: {

target: "top" | "bottom" | "left" |"right" | "front" | "back" | "center";

targetpos: (value: NumberArray3) => NumberArray3;

viewRay: (value: NumberArray3) => NumberArray3;

distance: (value: number) => number;

}

1. target: the camera focus position on the model (including the centers of the model's six faces and the volume center), which is set to top by default.

2. targetpos: to fine-tune the focus point coordinate based on the focus position.

3. viewRay: to change the view sight.

Note:

The vertical angle of a camera must remain within the specified range.

The default view direction is determined by target. For example:

  ·  When the target value is top, bottom, front, or center, the view direction is diagonal downward along the y-z plane at 45°: [0, -1, 1].

  ·  When the target value is left, the view direction is diagonal downward along the x-z plane at 45°, facing the left side: [1, -1, 0].

  ·  When the target value is right, the view direction is diagonal downward along the x-z plane at 45°, facing the right side: [0, -1, 1].

4. distance: to change the distance between a camera and a model.

Note:

The zoom setting of a camera must adhere to the specified range.

The default distance is determined by the size of the target face. If target is set to center, the distance depends on the overall size of the model object.

Example 1:

duchamp.getWidgetByName("Component Name").getMeshByName("Model Name").focus();

Example 2:

const widget = duchamp.getWidgetByName("Component Name");
const mesh = widget.getMeshByName("Model Name");
mesh.focus({
   target: "center",
   viewRay: () => [1, -1, 1],
   distance: (v) => v * 0.8
});

FVS Click Event for Switching the Custom 3D Viewing Angle

This API is not supported on mobile terminals.

{para:"para"}

Parameter name: parameter value

/

/

Example one: You can click the data of the component Custom Model to pass parameters.

duchamp.getWidgetByName("Custom Model").refreshData({a:"Parameter a"});

Note:

The following text shows the syntax for passing multiple parameters.

duchamp.getWidgetByName("Component").refresh({a:"parameter a", b:"parameter b"});

Example two: You can add a Page Loading End Event for the template to refresh the data of a 3D component periodically.

duchamp.getWidgetByName("Component").refresh({a:"parameter a", b:"parameter b"});

/

This API is not supported on mobile terminals.

subscribeMarkerData(observer: (data: { [key: string]: any }, observer: {unsubscribe: () => {}}) => void): void;

  ·   data is a dictionary type, and its content depends on the configuration of the data layer. 

  ·  key is a selected field name in a dataset, and value is the corresponding value of the selected field.

  ·  unsubscribe is a function used to cancel the subscription to monitoring.

/

/

Example: You can control the visibility of the model based on the fields in the database table.

async function perform() {
  // To obtain widget, dataLayer until the scene has finished loading.
  const widget = await future(() => duchamp.getWidgetByName("Parking Lot Model"));
  const dataLayer = await future(() => widget.getDataLayerByName("Vehicle Monitoring"));  // To hide the specified model based on the marker data in the data layer.
  const processMarkerData = data => {
    const visible = data["Any Car Present"] === "1";
    cons name= data["Vehicle ID"];
    const mesh = widget.getMeshByName(name);
    mesh.setVisible(visible);
  };
  
  // To subscribe to monitoring updates to the Marker data in the data layer. When Marker is updated, execute the subscription monitoring function.
  const observer = dataLayer.subscribeMarkerData(data => {    processMarkerData(data);
  });
  
  //  Refresh component data every 3 second.
  const refreshTimerId = setInterval(() => {    widget.refreshData();
  }, 3000); // Execute the loop. 
}

/

This API is not supported on mobile terminals.

updateMarkerData(predicate: (data) => boolean, updater: (data) => void);

  ·  predicator is the query function used to determine whether a data item needs to be updated. If the return value is true, an update is required.

  ·  updator is the update function used to update data verified by predicator with the returned value true.

/

/

Example: You can update multiple label values of the specified model object in the Vehicle Monitoring data layer of the Parking Lot Model by using this API.

const widget = duchamp.getWidgetByName("Parking Lot Model");
const dataLayer = widget.getDataLayerByName("Vehicle Monitoring");
  // To refresh data by using updatedMarkerData.
  dataLayer.updateMarkerData((markerData) => {
    return markerData["Vehicle ID"] === "Vehicle 006";
  }, (markerData) => {
    markerData["Vehicle Parking Time"] = 12;
});

You can use a text box widget to input the corresponding vehicle ID and parking duration. The model data will be updated accordingly after the editing. (The parking lot model triggers a red alert when parking duration exceeds 10 hours.) The following figure shows the effect.

For details, you can download the template Updating Specific Model Data by JS.fvs

This API is not supported on mobile terminals.

/

/

RoamAnimationsData[]

interface RoamAnimationsData{
  /**
   * Roaming Path Name
   */
 name:string
}

Example: You can get the roaming path information of a Custom Model component by using this API.

duchamp.getWidgetByName("Custom Model").getRoamAnimations();

/

This API is not supported on mobile terminals.

RoamAnimationOptions

type RoamAnimationOptions = {
  /**
   * Roaming Path Name
   */
  names: string[];
  /**
   * Play mode: loop|once
   */
  playMode: "loop"|"once";
};

/

Example one: You can add a click event to the title component to play the Roaming Path one animation of the Custom Model component by using this API.

duchamp.getWidgetByName("Custom Model").playRoamAnimations({
   names:["Roaming Path 1"], 
   playMode: "once"
})

Example two: You can write code in the Add Page End Event to automatically play the roaming animation after the page has finished loading.

setTimeout(()
=> {  
duchamp.getWidgetByName("Warehouse Park").playRoamAnimations({
   names:["Roaming Path 1"],
   playMode: "once"
   })
   }, 5000)

/

This API is not supported on mobile terminals.

"pause"|"continue"|"exit"

"pause": to pause the roaming animation.

"continue": to continue the roaming animation.

"exit": to exit the roaming animation.

/

/

Example one: You can pause the roaming animation of the Custom Model component.

duchamp.getWidgetByName("Custom Model").updateRoamAnimationAction("pause");

Example two: You can continue the roaming animation of the Custom Model component.

duchamp.getWidgetByName("Customer Model").updateRoamAnimationAction("continue");

Example three: You can exit roam animation of the Custom Model component.

duchamp.getWidgetByName("Custom Model").updateRoamAnimationAction("exit");

/

This API is not supported on mobile terminals.

animationName

Name of the animation

The name corresponds to the animations[index].name obtained by getMeshByName.

Note:

The name refers to the specific animation name, rather than the name of the model itself, as shown in the following figure. 

/

/

You can obtain the 1. Explosion animation of the SMT Pick-and-Place Machine Explosion Reset model in 3D Custom Scene 1_Page 1.by using this API.

const animation = duchamp.getWidgetByName(3D Custom Scene 1 - Page 1).getMeshByName(SMT Pick-and-Place Machine Explosion Reset).getAnimationByName(1. Explosion)

You can start playing 1. Explosion animation by using this API.

animation.play({
  // Whether to restart playing.
isRestart:false,
// Whether to execute the loop.
  isLoop:false,  
  // Whether to restore to the start status after finishing playing.
  isInitialOnPlaystop: false,
  // Playback end callback function
  onAnimationPlayStop:()=>{}
})

You can stop playing 1. Explode animation by using this API.

animation.pause()

You can end playing 1. Explode animation by using this API.

//true: Stop the animation and restore the state before playback.
//false: Stop the animation and remain at the current frame
animation.stop(true)

/

This API is not supported on mobile terminals.

speed

Rotation speed

/

/

Example: You can start/continue the view rotation of 3D Custom Scene 1_Page 1, with a rotation speed of 15 by using this API.

duchamp.getWidgetByName("3D Custom Scene 1_Page 1").camera.playAutoRotation(15)

/

This API is not supported on mobile terminals.

/

/

/

/

Example: You can pause the view rotation of 3D Custom Scene 1_Page 1 by using this API.

duchamp.getWidgetByName("3D Custom Scene 1_Page 1").camera.pauseAutoRotation()

/

This API is not supported on mobile terminals.

isInitial: boolean

To reset to initial view or not, which is a boolean value.

·  true: to reset the view to the initial view.

·  false: not to reset the view to the initial view.

/

/

Example: You can pause the view rotation of 3D Custom Scene 1_Page 1 by using this API.

duchamp.getWidgetByName("3D Custom Scene 1_Page 1").camera.stopAutoRotation(true)

/

This API is not supported on mobile terminals.

/

/

position: number

target: number

position: camera coordinate

target: viewpoint coordinate

Example: You can get the view point parameter information of 3D Custom Scene 1_Page 1 by using this API.

duchamp.getWidgetByName("3D Custom Scene 1_Page 1").camera.getState()

/

This API is not supported on mobile terminals.

position:number

target:number

duration:number

position: camera coordinate

target: viewpoint coordinate

duration: Animation transition time, optional, with a default value of 2000 (milliseconds).

Example: You can set the viewpoint parameter information of 3D Custom Scene 1_Page 1 by using this API.

duchamp.getWidgetByName("3D Custom Scene 1_Page 1").camera.setState({ position: [20, 20, 10], target: [0, 0, 0]}, 2000)

This API is not supported on mobile terminals.

name: string

Viewing angle name

position: NumberArray3

target: NumberArray3

position: camera coordinate

target: viewpoint coordinate

Example: You can get the view point parameter information of View Point one of component 3D Custom Scene 1_Page 1 by using this API.

duchamp.getWidgetByName("3D Custom Scene 1_Page 1").getCameraPerspectiveByName("View Point 1")

This API is not supported on mobile terminals.