iCraft Editor and Player

The @icraft/player-react library provides several capabilities for building digital twin applications:

• Out-of-the-box integration: Zero-configuration setup for quick access.
• Customizable plugin sets: Support for integrating optional features via a flexible plugin mechanism.
• Events and Methods: A rich set of APIs to facilitate integration with your existing project logic.
• Animation Control: Support for playback controls such as auto-play and looping.
• Real-time Data Integration: Capability to connect real-time data streams to 3D scenes for digital twin visualization.

The @icraft/player-react library provides several capabilities for building 3D digital twin applications:

• Zero configuration integration: Quick setup with minimal code.
• Custom Plugin Sets: Extend functionality through a flexible plugin mechanism.
• Events and Methods: Rich API for interacting with the 3D scene from your React code.
• Animation Control: Support for autoplay, loop playback, and other controls.
• Real-time Data Integration: Capability to map real-time data (e.g., server metrics, e-commerce transactions, or industrial production data) into the 3D environment.

The licensing model for iCraft Player is as follows:

• Personal Use: Free
• Commercial Use: Enterprise license at $299 USD/year (includes remote technical support).

For commercial licensing, contact yukg@gantsoftware.com.

You can control the content, visibility, and appearance of floating tips by accessing the tip property on an element instance. This allows you to replace default tooltips with custom HTML elements, such as user profile cards or complex UI components.

To use a custom tip, you typically:

1. Locate the target element using getElementsByName or similar methods.
2. Create a new DOM element containing your custom content and styles.
3. Use the tip instance methods to inject the element and make it visible.

Nested subscenes provide several architectural visualization benefits:

• Layered Display: Enables a "drill-down" approach, moving from high-level overviews to granular component details (e.g., Cloud $\rightarrow$ VM $\rightarrow$ Service).
• Modular Clarity: Represents modular designs intuitively by showing the internal composition and dependencies of specific modules.
• Information Hiding: Reduces visual clutter by hiding complex internal details behind top-level structures, showing them only on demand.
• Scalability: Makes large-scale system visualization feasible by managing different modules in separate subscenes.
• Interactive Exploration: Supports dynamic navigation through different levels of the architecture via clicks and zooming.

You can customize the content, style, and visibility of hover tips by accessing the tip property on an element instance. There are two primary ways to implement custom tips:

1. Native Elements: Create standard DOM elements (e.g., using document.createElement) and pass them to the tip instance.
2. React Elements: Use react-dom's createPortal to render React components into a DOM node managed by the tip instance. This is the recommended approach for complex UI components.

To access the tip instance, first find the target element using player.getElementsByName(name) and then access its .tip property.

A Tip is a tooltip associated with an element instance in the iCraft Player. You can access the tooltip instance via the .tip property on an element instance. By calling methods on this instance, you can dynamically update the tooltip's content, visibility, height, and style. There are two primary patterns for using tooltips: using native DOM elements or using React elements via Portals.

const user = player?.getElementsByName("User")?.[0];
user?.tip?.updateInnerHTML(someElement);
user?.tip?.updateVisible(true);

Because iCraft Editor's drawing engine is based on WebGL, font resources are not handled by the browser's standard CSS engine in the same way and must be loaded explicitly.

If you do not actively set font resources using defineConfig, the editor will attempt to use default fonts from the iCraft Editor server and Google. For intranet or offline environments, you should download the required .ttf files and host them locally within your project, then point to them using fontUrl or fonts.