Model Viewer

Chart style

The Model Viewer is a 3D animation model loader based on DataV.Vangogh, a WebGL visualization rendering engine developed by the DataV team. The widget supports loading models in gltf and glb formats, Physically Based Rendering (PBR) maps, mesh instancing, an immersive animation editor, multiple light sources, and post-processing effects.

Style panel

• Search Configuration: Click the Style icon in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see Search configuration item.

• Basic Configuration:

  • Size: The width and height of the component in pixels (px).

  • Position: The component's x-coordinate and y-coordinate in pixels (px). The x-coordinate is the horizontal distance from the page's left edge to the component's top-left corner. The y-coordinate is the vertical distance from the page's top edge to the component's top-left corner.

  • Rotation: The rotation of the component around its center point, in degrees (°).

    • Enter an angle value to control the component's rotation.

    • Click the icon to flip the component horizontally.

    • Click the icon to flip the component vertically.

  • Opacity: The value ranges from 0 to 1. A value of 0 is completely transparent, while a value of 1 is fully opaque. The default is 1.

  • Interaction passthrough: When enabled, mouse interactions pass through this component, preventing it from blocking interactions with other components layered underneath it on a dashboard.

  • Alignment: The alignment of the component within the editor.

• Camera

  Parameter	Description
  Camera Type	The type of camera used to view the model. Options include Perspective Camera and Orthogonal Camera.
  Field of View	The field of view (FOV) of the camera, which is the angular extent of the observable world. Drag the slider to adjust the angle. The value ranges from 0.1 to 180. This field is available only when Camera Type is set to Perspective Camera.
  Camera Position	The position of the camera in the model viewer along the x-axis, y-axis, and z-axis. Drag the sliders to adjust the position values. The value for each axis ranges from -1000 to 1000.
  Target Position	The direction the camera is facing in the model viewer along the x-axis, y-axis, and z-axis. Drag the sliders to adjust the direction values. The value for each axis ranges from -1000 to 1000.

• Model

  Parameter	Description
  Model URL	A default model URL is provided. To use a custom model, choose one of the following methods: Method 1: Enter the URL of your model in the input field to the right of Model URL. Method 2: Click Change in the dashed box below the address input box. In the Select A Resource To Change dialog box that appears, select a model from Official Design Resources or a custom model that you have uploaded in My Design Resources. You can also click the icon in My Design Resources to upload a local model. For more information about changing model design assets, see UI Feature Description.
  Display Mode	Turn on the switch to enable wireframe mode. This overlays a solid-color wireframe on the original model texture. Wireframe Type: Options include Triangle Mesh and Quad Mesh. Wireframe Width: Drag the slider to adjust the width of the wireframe. Wireframe Color: The color of the wireframe. PBR Channel Display Mode: The model viewer supports PBR map display. In addition to the base color, it currently supports only Metal-Roughness. Click the PBR Channel Display Mode drop-down list to view the map styles in the PBR channels of the model. Options include Final, Base Color, AO, Metallic, Roughness, Normal, and Emissive.
  Rendering Effect	Configure the rendering effect of the model: Shadow Settings: The shadow style of the model. Turn the Cast Shadow and Receive Shadow switches on or off to control the shadow effect. Note Cast Shadow means the object casts a shadow on other meshes. Receive Shadow means the object displays shadows cast by other meshes. To display shadows created by the interaction between meshes within the model itself, enable both Cast Shadow and Receive Shadow. To display only the overall shadow of the model on the Projection Plane, enable only Cast Shadow to reduce rendering overhead. Effect with only Cast Shadow enabled Effect with both Cast Shadow and Receive Shadow enabled Opacity: Drag the slider to adjust the overall opacity of the model. Note Setting the opacity may prevent some post-processing effects from being displayed. If you need parts of the model to be semi-transparent, we recommend adjusting the material in your modeling software beforehand.
  Transform	Position: Drag the sliders to adjust the position of the model on the x-axis, y-axis, and z-axis. Rotation: Drag the sliders to adjust the rotation angle of the model on the x-axis, y-axis, and z-axis. Scale: Drag the sliders to adjust the scale of the model on the x-axis, y-axis, and z-axis.

• Animation

  Parameter	Description
  Model Animation	Turn on the switch to play the model's animation. The widget supports the model's built-in animations, including both morph and skeletal animations. Single-animation model: Turn on the Model Animation switch to play the animation. Multi-animation model: If a model has multiple animations, turning on the Model Animation switch plays the first animation in the list by default. To select a different animation, use the Camera Position and Animation Settings feature to specify the desired animation. Note To configure animation details, click Camera Position and Animation Settings to enter the immersive editor. To configure animation details in the immersive editor, perform the following steps: Click Camera Position and Animation Settings in the upper-right corner of the model widget on the canvas to open the Settings dialog box. In the dialog box, click Auto Calibrate to center the model. Turn on the Autoplay switch for the animation. You can then preview or stop the playback of animations for a multi-animation model. In the model preview panel on the left, drag the model to adjust the camera angle and find the best view to display the model. Click the dropdown list to the right of Default Animation to open the model's playlist, and then select an animation to set as the default for playback. Click the icon and the icon to start or stop the animation preview. After you select an animation, click Exit and Save Settings at the bottom or the icon in the upper-right corner to exit the animation settings dialog box.
  Scanline Animation	Click the icon on the left and turn on the switch to add a scanline animation effect to the model. You can customize the effect using various configuration items. Front Type: Options include Plane and Curve. Scan Axis: The axis along which the scanline animation moves. Options include x-axis, y-axis, and z-axis. Direction: The direction of the scanline animation. Options include Positive and Negative. Color: The color of the scanline animation effect. Scanline Length: Drag the slider to set the length of the scanline. Scanline Speed: Drag the slider to set the speed of the scanline.
  Rotate Around Axis	Click the icon on the left and turn on the switch to configure the model to rotate around an axis. Rotation Axis: The type of rotation axis. Options include x-axis, y-axis, z-axis, and Custom Axis. Direction: The direction of rotation. Options include Counter-clockwise and Clockwise. Speed: Drag the slider to set the rotation speed.

• Environment and Lighting

  Parameter	Description
  Background	The Model Viewer provides three background types to suit different scenarios. None: Select the None option or turn off the Background switch to hide the background. This allows widgets layered below the Model Viewer to be visible on the canvas. Color: Select this option to set a solid color background for the Model Viewer widget. You can customize the background color and opacity. Environment Map: Select this option to display an environment map. This helps you observe changes in the environment map's style.
  Environment Map	Click the icon on the left and turn on the switch to configure an environment map for the model's background. The environment map uses image-based lighting and currently supports only the HDR format. Environment Map: Enter a URL for the map or change the map type in the image box below. DataV provides ten types of map styles. Direction: Drag the slider to adjust the direction of the environment map. The value ranges from 0 to 360 degrees. Intensity: Drag the slider to adjust the intensity of the environment map. The value ranges from 0 to 5.
  Ambient Light	Ambient light illuminates all objects evenly and does not create shadows. Click the or icon on the right to add or delete an ambient light group. Click the or icon to arrange multiple ambient light groups. Click the icon to copy the current ambient light group and its settings. Color: The color of the ambient light in this group. Intensity: The intensity of the ambient light in this group. The value ranges from 0 to 10. Important If a model's material has a metallic value of 1 and the only light source is ambient light, the model appears completely black.
  Directional Light	Directional light is the only light source that can produce shadows. By default, it points toward the model's origin. Click the or icon on the right to add or delete a directional light group. Click the or icon to arrange multiple directional light groups. Click the icon to copy the current directional light group and its settings. Color: The color of the directional light in this group. Intensity: The intensity of the directional light in this group. Position: The position of the directional light in this group on the x-axis, y-axis, and z-axis. Shadow Configuration: Click the icon on the right and turn on the switch to enable shadow configuration. Shadow Range Scale: Adjusts the shadow scale to control the size of the area covered by the shadow. Shadow Map Bias: Adjusts the shadow map bias to find the best balance between shadow precision and rendering quality. Shadow Map Width: The width of the shadow map. Shadow Map Height: The height of the shadow map.
  Projection Plane	Click the icon on the left and turn on the switch to set up a projection plane, which is a plane that can display the model's shadow. The Projection Plane takes effect and displays a shadow only if you enable and configure Directional Light and enable Model > Rendering Effect > Shadow Settings > Cast Shadow. Plane Color: The color of the projection plane. Shadow Color: The color of the shadow on the projection plane. Edge Fade: Drag the slider to set the fade-out effect for the shadow's edge. Height: Drag the slider to set the height of the shadow. Size: Drag the slider to set the size of the shadow. Opacity: The opacity of the projection plane.

• Interaction: Interaction settings for the Model Viewer.

  Note

  Interaction effects are visible only in preview, published, or interaction modes.

  • Picking: If you enable this feature, you can retrieve the material settings of an object in the Model Viewer.

  • Picking Area: Specifies the range for picking. The options are Partial and Global.

  • Picking Color: Specifies a color to identify the selected object for precise and efficient object selection.

• Post-processing: Applies full-screen effects such as filters to the rendered image, using digital image editing techniques to enhance visual quality.

  Parameter	Description
  Anti-aliasing Type	The default Anti-aliasing Type for the Model Viewer is FXAA. You can also select SSAA. However, SSAA is more computationally intensive and has higher performance overhead than FXAA. We do not recommend selecting SSAA unless your computer hardware is powerful.
  Sharpen and Vignette	Sharpen Vignette combines sharpening and lens vignette effects to create a cinematic feel. Click the icon to the left of Sharpen Vignette to enable this effect. Sharpness: Drag the slider to adjust the sharpness. A higher value makes the image sharper. Vignette Radius: Drag the slider to adjust the vignette radius. A higher value creates a larger radius and smaller dark corners. Vignette Softness: Drag the slider to adjust the vignette softness. A higher value creates a more noticeable transition effect in the dark corners. Graininess: Drag the slider to adjust the graininess. A higher value makes the image grain more pronounced.
  SSR	Screen Space Reflection (SSR) simulates reflections formed by the interaction between light and objects in a scene. Reflections appear clearer on smoother surfaces. Click the icon to the left of SSR to enable this effect. Reflection Range: Drag the slider to adjust the reflection range. A higher value increases the range but reduces reflection quality. Ray Marching Steps: Drag the slider to adjust the number of ray marching steps for reflections. A higher value improves reflection quality but increases computational overhead. Ray Marching Step Size: Drag the slider to adjust the step size for reflection rays. A higher value allows rays to reach a larger area of the scene. Reflective Surface Gloss: Drag the slider to adjust the glossiness of the reflective surface. A higher value indicates a smoother surface and a clearer reflection. Blur: Drag the slider to adjust the reflection blur. A higher value makes the reflection blurrier.
  AO Shadow	AO Shadow is a screen-space ambient occlusion effect that enhances the shading of edges and crevices to create a stronger 3D appearance. Click the icon to the left of AO Shadow to enable this effect. Offset: Drag the slider to adjust the AO shadow offset. A higher value creates a larger offset. AO Intensity: Drag the slider to adjust the AO intensity. This exponentially adjusts the contrast between light and dark areas. Sharpness: Drag the slider to adjust the sharpness. A higher value increases the sharpness. AO Radius: Drag the slider to adjust the AO radius. This sets the range for calculating neighboring occlusion. A higher value increases the range. Blur Intensity: Drag the slider to adjust the AO shadow blur intensity. A higher value makes the shadow smoother but increases overhead.
  Lens Blur	The Lens Blur setting creates a screen blur effect. Click the icon to the left of Lens Blur to open the configuration items. Blur: Drag the slider to adjust the lens blur. A higher value makes the image blurrier. Aperture Size: Drag the slider to adjust the aperture size of the lens blur. A smaller value makes the image clearer. Focal Length: Drag the slider to adjust the focal length of the lens blur. A higher value makes the image blurrier. Focus Size: Drag the slider to adjust the focus size of the lens blur. A higher value makes the image blurrier.
  Bloom	Bloom adds an outer glow to brighter areas of the image, enhancing contrast. Click the icon to the left of Glow to enable this effect. Mask: Turn on the switch to mask the glowing effect that extends beyond the model's boundaries. Intensity: Drag the slider to adjust the intensity of the bloom effect. A higher value makes the glow expand further outward. Brightness: Drag the slider to adjust the brightness of the bloom. A higher value makes the bloom brighter. Brightness Threshold: Drag the slider to adjust the brightness threshold for the bloom. A higher value makes the bloom effect less noticeable. Smoothing Width: Drag the slider to adjust the smoothing width of the bloom. A higher value creates a smoother transition for the bloom. Bloom Radius: Drag the slider to adjust the bloom radius. A higher value makes the bloom effect more pronounced.
  Motion Blur	Motion blur simulates the blurry trail of fast-moving objects. Click the icon to the left of Motion Blur to enable this effect. Blur: Drag the slider to adjust the amount of motion blur. A higher value creates more blur. Motion Speed: Drag the slider to adjust the motion speed. A higher value creates more blur.
  Color Correction	Adjust the hue, saturation, brightness, and contrast of the final output image. Hue: Drag the slider to adjust the hue. A higher value gives the image a warmer tone. Saturation: Drag the slider to adjust the saturation. A higher value increases the image's saturation. Brightness: Drag the slider to adjust the brightness. A higher value makes the image brighter. Contrast: Drag the slider to adjust the contrast. A higher value increases the image's contrast.

Data Source panel

url: The URL of the model.

Advanced panel

Configure interaction events or associate global variables for filter interactions between widgets. Configure widget interactions.

Blueprint interaction

1. Click the icon in the upper-left corner of the page to open the Blueprint page.

2. On the Layer Node tab, add the current widget to the main canvas.

3. View the blueprint configuration parameters.

   Note

   Click the icon in the anchor point area on the right to view event and action parameter tooltips.

   • Events

     Event	Description
     When Data Is Updated	Triggers an event and outputs data when the data response changes.
     When Request Status Changes	Triggers an event and outputs data when the data request status changes (for example, returns a success or failed status).
     On Left-click Model	Triggers an event and outputs data when the model is left-clicked.
     On Right-click Model	Triggers an event and outputs data when the model is right-clicked.
     Model loading complete	An event that is triggered after the data API request returns and the data is processed by the filter. It also outputs the processed data in JSON format. For a data example, see the Data Response area on the Data Source tab in the widget's configuration panel in the canvas editor.

   • Actions

     Action	Description
     Import data	The data is processed in the format required by the component and then imported to redraw the component. You do not need to request server-side data again. For a data example, see the Data Response area on the Data Source tab of the configuration panel to the right of the component in the canvas editor.
     Request data	Re-requests server-side data. The data output by upstream data processing nodes or layer nodes is used as parameters. For example, if a model viewer is configured with the API data source https://api.test, and the data passed to the Request Data action is { id: '1'}, then the final request URL is https://api.test?id=1.
     Change canvas size	Changes the canvas size. Requires the canvas size values as input.
     Play all model animations	Plays all model animations. Parameters are optional. See the data example. { "loopMode": "LoopRepeat", // The loop mode of the animation. Optional values: LoopOnce (play once), LoopRepeat (loop from the beginning), and LoopPingPong (play back and forth). "repetitions": -1, // The number of repetitions. This parameter is invalid if loopMode is set to LoopOnce. A value of -1 indicates infinity. "timeScale": 1 // The animation speed. }
     Stop all model animations	Stops all model animations. No parameters are required.
     Play model animation	Plays a specific model animation by its name.
     Play model animation - detailed	Configures the detailed settings for playing a model animation. See the data example. { "name": "", // The animation name. "loopMode": "LoopRepeat", // The loop mode of the animation. Optional values: LoopOnce (play once), LoopRepeat (loop from the beginning), and LoopPingPong (play back and forth). "repetitions": -1, // The number of repetitions. This parameter is invalid if loopMode is set to LoopOnce. A value of -1 indicates infinity. "timeScale": 1 // The animation speed. }
     Stop model animation	Stops a specific model animation by its name.
     Highlight	Highlights a model object and its child objects. See the data example. { "id": "", // The object name. "color": "#ff0000", // The highlight color. "opacity": 1 // The opacity. }
     Cancel interactive effect	Cancels the interactive effects on the model. No parameters are required.
     Set material opacity	Sets the opacity of the model's material. See the data example. [ { "id": [ // The model group ID. {} ], "opacity": 0 // The opacity of the model material. } ]
     Move	Moves the widget to a specified position. See the data example. { // The movement method. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // The specified position. x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation method. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Optional values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }
     Toggle visibility	The Toggle Visibility, Show, and Hide actions do not require parameters by default. You can add animation configurations as needed. See the data example. { // Animation type. Optional values: appear|fade|slideToUp. The default is fade. If left blank, there is no animation. "animationType": "fade", // Animation duration. The default is 1000 ms. "animationDuration": 1000, // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo. The default is linear. "animationEasing": "linear" }
     Show
     Hide
     Update widget configuration	Dynamically updates the widget's style configuration. First, get the widget configuration data by clicking Copy Configuration to Clipboard in the widget's Style panel. Then, change the corresponding style field values in the data processing node on the Blueprint Editor configuration page as needed.