安裝

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 元素。如有問題參考官網鏈接