3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目

安装

pnpm install @icraft/player-react --save

import { ICraftPlayer } from "@icraft/player-react";
 
export default function MyScene() {
  return <ICraftPlayer src='your-scene.iplayer' />;
}

@icraft/player-react 为开发者提供了一站式的3D数字孪生可视化解决方案。通过简单的配置即可快速构建专业的3D可视化应用，配合灵活的API和实时数据接入能力，让您的数字孪生项目快速落地。无论是监控大屏、运营分析，还是工业互联网应用，@icraft/player-react 都能助您轻松实现。
无论是系统架构图、软件架构图、云架构图、IT架构图、部署架构图，还是3D结构图、网络架构图、网络拓扑图，都可以使用iCraft Editor来绘制并实现数字孪生。
立即开始使用 @icraft/player-react，探索数字孪生的无限可能！
官方地址：https://icraft.gantcloud.com/player-react/intro

Installation 安装
Install the @icraft/player-react package using npm or pnpm:
使用 npm 或 pnpm 安装 @icraft/player-react 包：

Using npm

npm install @icraft/player-react --save

Or using pnpm

pnpm install @icraft/player-react --save

注意：某些软件包管理器可能无法自动安装 @icraft/engine 软件包。如果缺少该软件包，请手动安装：

pnpm install @icraft/engine --save

Basic Usage 基本用法

在您的项目中导入并使用 ICraftPlayer 组件：

import { ICraftPlayer } from "@icraft/player-react";
 
export default function MyScene() {
  return <ICraftPlayer src='your-scene.iplayer' />;
}

其中 src 是从 iCraft Editor 导出的 .iplayer 文件的路径。

服务状态监控
展示如何将服务器集群的运行状态数据实时展示在3D场景中，包括CPU使用率、内存占用、运行时间等关键指标的可视化展示。

player-javascript集成

@icraft/player 是一个 原生 JavaScript 组件，可以轻松地将 iCraft Editor 编辑的场景集成到您的项目中， 并提供丰富的交互事件和方法。

快速开始
安装
npm
使用 npm 或 pnpm 安装 @icraft/player 包：

使用 npm

npm install @icraft/player --save

或使用 pnpm

pnpm install @icraft/player --save
提示：某些包管理工具可能不会自动安装 @icraft/engine 包, 如报缺失，请手动安装：
CDN

<script src="https://unpkg.com/@icraft/player@latest/dist/umd/icraft-player.min.js"></script>

基础使用
ESM

import ICraftPlayer from '@icraft/player'

CDN

const ICraftPlayer = window.ICraftPlayer

创建播放器实例：

const player = new ICraftPlayer({
  src: 'your-scene.iplayer',
  container: document.getElementById('container'),
});

其中 src 是 iCraft Editor 导出的 .iplayer 文件地址, container 是承载场景的 DOM 元素。如有问题参考官网链接