WDTC widget | Introducing the ThreejsViewer Widget for mappView

Widget Development Tool Chain
,
1

Hi community !

I am excited to share a Proof of Concept (PoC) widget called ThreejsViewer for mappView. This widget is built on top of Three.js and allows you to load and interact with 3D scenes created using the Three.js Editor. It supports scripting, transformations, and interactive controls, making it a versatile tool for visualizing and manipulating 3D content directly in your mappView projects.

Key Features:

  • Load 3D Scenes: Import 3D scenes exported from the Three.js Editor, including objects, cameras, lights, and animations. Using only the json file generated.

  • Scripting Support: Execute scripts embedded in the scene for custom behaviors and interactions.

  • Transformations: Apply transformations (position, rotation, scale) to objects in the scene, with support for animations and easing.

  • Interactive Controls: Enable or disable camera controls (OrbitControls) for navigating the scene.

  • Auto-Play Animations: Automatically play animations defined in the scene.

  • Responsive Design: Automatically adjusts to the widget’s container size.

Requirements:

  • Automation Studio: V6.1.1.14 or later

  • mappView: V6.1.1 or later

  • mappService: V6.1.0 or later

  • OPC UA C/S: V6.0.0 or later

  • Automation Runtime: V6.1.0 or later

  • mpFileManager: Required for loading 3D scene files (ensure MpFile and MpServer libraries are part of the configuration).

Example Use Case:

You can load a 3D scene, apply transformations to objects (e.g., move, rotate, scale), and even trigger animations or scripts for interactive behaviors. For example, you could create a 3D visualization of the actual products that is on the machine.

Example Transformation:

Here’s an example of how you can apply a transformation to an object in the scene:

[
  {
    "target": "objectName",
    "position": { "x": 1, "y": 2, "z": 3 },
    "rotation": { "x": 45, "y": 0, "z": 90 },
    "scale": { "x": 1.5, "y": 1.5, "z": 1.5 },
    "duration": 2,
    "easing": "easeInOut",
    "immediate": false
  },
  {
    // Another transformation object
  }
]

Community Feedback:

This is currently a PoC, and I would love to hear your thoughts! Are you interested in using this widget in your projects? Do you have specific use cases or features you’d like to see implemented?

If needed, I can provide a sample 3D scene to help you test the widget.

Widget is available here GitHub - FBoissadier/mappView-3dviewer: This repo is a widget library for mappView from B&R Automation

I still need add a better documentation and examples.

Looking forward to your feedback and ideas!

Regards,
Florent

1 Like
2

Here is a little example (Scripting is done inside of the scene for robot moves) :
ThreejsViewer

5 Likes
3

Great Work Florent ! I tried to tackle this very task some time ago but I didn’t get that far ! Thanks a lot for sharing this work. Have you had the chance to test it on some B&R hardware or only ArSim ?

1 Like
4

Thanks :slight_smile:
At the moment, I only test it on ArSim and on my PC (Opera GX browser).
I’m convinced that it’s the client side that consumes the most resources.
I will maybe try to test on some hardware in next weeks something like APC910, APC3100 and (X20CP1686 + my PC as client)

1 Like