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
jsonfile 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.14or later -
mappView:
V6.1.1or later -
mappService:
V6.1.0or later -
OPC UA C/S:
V6.0.0or later -
Automation Runtime:
V6.1.0or later -
mpFileManager: Required for loading 3D scene files (ensure
MpFileandMpServerlibraries 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
