iCraft Editor: éditeur web professionnel de diagrammes d'architecture 3D 82

iCraft Editor est un outil d'édition de 3D d'diagrammes d'architecture en ligne, dont la spécialité est d'afficher des architectures de systèmes complexes en trois dimensions, aidant les développeurs, architectes, chefs de produit, etc. à comprendre et communiquer plus intuitivement la structure des systèmes. Comparé aux diagrammes 2D traditionnels, il offre une visualisation plus performante et une interaction plus agréable, ce qui en fait un excellent allié pour concevoir des systèmes complexes.

Fonctionnalités clés d'iCraft Editor

• Outils de conception 3D pratiques : iCraft Editor propose une riche bibliothèque de modèles 3D (comprenant serveurs, bases de données, équipements réseau et autres composants courants) et des exemples de templates, et permet de transformer un diagramme 2D en 3D en un clic, aidant les utilisateurs à démarrer rapidement leur conception. L'éditeur dispose d'un accrochage automatique à la grille et d'un empilement automatique des éléments, ce qui facilite les connexions et permet d'économiser beaucoup de temps de conception.

• Rendu 3D immersif : grâce à la technologie 3D全景 (panoramique 3D), les utilisateurs peuvent librement faire pivoter, zoomer et glisser les modèles pour examiner les détails de l'architecture sous différents angles ; les effets d'animation sont pris en charge (comme l'écoulement dans les tuyaux et les animations des objets), ce qui rend les concepts de conception plus vivants ; la fonction de basculement fluide entre sous-scènes permet de décomposer une conception complexe en plusieurs niveaux (comme le front-end, le back-end et l'infrastructure), pour une présentation plus organisée des informations.

• Jumeau numérique et synchronisation en temps réel : iCraft Editor fournit un composant de rendu Web (SDK JavaScript), facilement intégrable dans une application web, permettant de contrôler via le SDK l'état des éléments 3D (comme la mise en surbrillance d'un nœud en erreur) ; la synchronisation des données en temps réel est prise en charge, ce qui permet de mapper sur le diagramme d'architecture 3D des données système telles que le taux d'utilisation CPU des serveurs ou le trafic réseau, afin d'afficher visuellement l'état de fonctionnement du système et de repérer rapidement les anomalies.

• Capacités d'édition et d'extension puissantes : iCraft Editor prend en charge l'importation de nombreux formats de fichiers 3D comme GLB, glTF, OBJ, etc., permettant aux utilisateurs de télécharger des modèles personnalisés (comme le logo d'une entreprise ou un équipement spécifique) pour enrichir leurs ressources de conception ; il offre également l'accrochage automatique à la grille et l'empilement automatique des éléments, améliorant la précision et l'efficacité du dessin.

Cas d'utilisation d'iCraft Editor

• Conception d'architecture logicielle : aide les architectes à présenter clairement les différents composants d'un système et leurs relations, facilitant la compréhension et la communication au sein de l'équipe.

• Déploiement et maintenance des systèmes : permet au personnel d'exploitation de comprendre visuellement le déploiement et l'état de fonctionnement des serveurs, équipements réseau, etc.

• Formation et communication : grâce à des diagrammes d'architecture 3D et des animations vivantes, les apprenants saisissent plus facilement des concepts complexes.

• Design industriel : convient aux designers industriels, avec des outils précis de modélisation 3D.

• E-commerce : les utilisateurs du e-commerce peuvent créer des présentations de produits 3D attrayantes.

• Démonstration pédagogique : les enseignants peuvent produire des supports pédagogiques 3D vivants.

Comment utiliser iCraft Editor

Utilisation en ligne

1. Accéder au site officiel : ouvrez directement le site officiel d'iCraft Editor : https://icraft.design/, aucune installation logicielle n'est nécessaire.

2. Créer un projet : créez un nouveau projet ou ouvrez un projet existant sur le site officiel d'iCraft Editor.

3. Ajouter des éléments : utilisez les outils de la barre d'outils pour ajouter des modèles 3D (par exemple serveurs, équipements réseau).

4. Ajuster la mise en page : faites glisser et pivoter les éléments pour ajuster leur position et leur orientation, et configurez des propriétés telles que la taille ou la couleur.

5. Ajouter des connexions : ajoutez des lignes de connexion entre les éléments en fonction de leurs relations.

6. Ajouter des annotations textuelles : ajoutez du texte aux éléments pour aider le public à comprendre.

7. Enregistrer et exporter : une fois la conception terminée, vous pouvez l'enregistrer dans le cloud ou l'exporter en fichier .iplayer, pour l'intégrer dans d'autres projets ou la consulter hors ligne.

Utilisation locale

1. Préparer l'environnement : assurez-vous que Node.js et Git sont installés sur votre système.

2. Cloner le projet : utilisez la commande git clone https://github.com/gantFDT/icraft.git pour télécharger le projet en local.

3. Installer les dépendances : entrez dans le dossier du projet et exécutez npm install pour installer les dépendances nécessaires.

4. Démarrer le projet : dans le dossier du projet, exécutez npm start pour lancer le projet, puis ouvrez http://localhost:3000 dans votre navigateur pour le visualiser.

5. Modifier et enregistrer : concevez dans l'éditeur local et enregistrez le projet une fois terminé.

Utilisation des sous-scènes imbriquées

• Entrer dans une sous-scène : sélectionnez un élément et cliquez sur le bouton de sous-scène de la barre d'outils flottante pour entrer dans la sous-scène de cet élément.

• Modifier la sous-scène : ajoutez des éléments, ajustez les positions, tracez les connexions, etc. dans la sous-scène jusqu'à ce que le résultat soit satisfaisant.

• Revenir à la scène principale : une fois la sous-scène éditée, revenez à la scène principale pour continuer à ajuster l'ensemble du diagramme d'architecture.

Intégration dans d'autres projets

Installer le composant front-end : si vous souhaitez intégrer une scène 3D créée avec iCraft Editor dans un projet React, exécutez la commande pnpm install @icraft/player-react --save pour installer la bibliothèque de composants.

Code d'intégration : utilisez le code correspondant dans votre projet pour intégrer la scène 3D.

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

Où your-scene.iplayer est le fichier de scène 3D exporté depuis iCraft Editor.

Adresse du projet iCraft Editor :https://github.com/gantFDT/icraft