iCraft Editor: editor profesional de diagramas de arquitectura 3D basado en la web 77

iCraft Editor es una herramienta de edición de 3D de diagramas de arquitectura basada en la web, cuyo enfoque principal es mostrar arquitecturas de sistemas complejos en un espacio tridimensional, ayudando a desarrolladores, arquitectos, gestores de productos, etc., a comprender y comunicar de forma más intuitiva la estructura del sistema. En comparación con los diagramas 2D tradicionales, ofrece un mayor efecto de visualización y una mejor experiencia interactiva, siendo una gran ayuda para diseñar sistemas complejos.

Funciones principales de iCraft Editor

• Herramienta de diseño 3D práctica: iCraft Editor ofrece una amplia biblioteca de modelos 3D (incluyendo componentes habituales como servidores, bases de datos, dispositivos de red) y plantillas de ejemplo, y permite convertir diagramas 2D a 3D con un solo clic, lo que ayuda a los usuarios a empezar a diseñar rápidamente. El editor incorpora funciones de ajuste automático a la rejilla y apilamiento automático de elementos, lo que facilita las conexiones y permite ahorrar mucho tiempo de diseño.

• Presentación 3D inmersiva: gracias a la tecnología de panorama 3D, los usuarios pueden rotar, ampliar y arrastrar los modelos libremente para ver los detalles de la arquitectura desde distintos ángulos; admite efectos de animación (como flujo en tuberías y movimientos de objetos), lo que hace que las ideas de diseño cobren vida; la función de conmutación fluida entre subescenas permite dividir diseños complejos en varias capas (como front-end, back-end e infraestructura), haciendo la presentación de la información más ordenada.

• Gemelo digital y sincronización en tiempo real: iCraft Editor proporciona componentes de renderizado web (JavaScript SDK), que se pueden incrustar fácilmente en aplicaciones web y permiten controlar el estado de los elementos 3D mediante el SDK (por ejemplo, resaltar nodos anómalos); admite sincronización de datos en tiempo real, lo que permite mapear en el diagrama de arquitectura 3D datos del sistema como el uso de CPU del servidor o el tráfico de red, mostrando de forma intuitiva el estado de funcionamiento del sistema y facilitando la detección rápida de anomalías.

• Potentes capacidades de edición y ampliación: iCraft Editor admite la importación de múltiples formatos de archivos 3D como GLB, glTF y OBJ, lo que permite a los usuarios subir modelos personalizados (como logotipos empresariales o equipos específicos) para ampliar los recursos de diseño; también ofrece funciones como ajuste automático a la rejilla y apilamiento automático de elementos, mejorando la precisión y la eficiencia del dibujo.

Escenarios de uso de iCraft Editor

• Diseño de arquitectura de software: ayuda a los arquitectos a mostrar con claridad los distintos componentes del sistema y sus relaciones, facilitando la comprensión y la comunicación en el equipo.

• Despliegue y mantenimiento del sistema: permite al personal de operaciones comprender de forma intuitiva el despliegue y el estado de funcionamiento de servidores, dispositivos de red, etc.

• Capacitación e intercambio de conocimientos: mediante diagramas de arquitectura 3D y animaciones vivas, los alumnos comprenden con mayor facilidad conceptos complejos.

• Diseño industrial: adecuado para diseñadores industriales, ya que proporciona herramientas precisas de modelado 3D.

• Comercio electrónico: los usuarios de e-commerce pueden crear presentaciones de productos 3D atractivas.

• Demostraciones educativas: los docentes pueden elaborar materiales didácticos 3D dinámicos.

Cómo usar iCraft Editor

Uso en línea

1. Acceder al sitio web oficial: abre directamente el sitio web oficial de iCraft Editor: https://icraft.design/, sin necesidad de instalar ningún software.

2. Crear un proyecto: crea un proyecto nuevo o abre uno existente en el sitio web oficial de iCraft Editor.

3. Añadir elementos: utiliza las herramientas de la barra de herramientas para añadir modelos 3D (por ejemplo, servidores, dispositivos de red).

4. Ajustar el diseño: arrastra y rota los elementos para modificar su posición y orientación; también puedes definir propiedades como tamaño y color.

5. Añadir líneas de conexión: añade líneas de conexión según las relaciones entre los elementos para representar sus conexiones.

6. Añadir descripciones de texto: incorpora texto en los elementos para que el público los comprenda mejor.

7. Guardar y exportar: una vez completado el diseño, se puede guardar en la nube o exportar como archivo .iplayer para incrustarlo en otros proyectos o visualizarlo sin conexión.

Uso local

1. Preparar el entorno: asegúrate de que el sistema tenga instalados Node.js y Git.

2. Clonar el proyecto: descarga el proyecto en local con el comando git clone https://github.com/gantFDT/icraft.git.

3. Instalar dependencias: accede a la carpeta del proyecto y ejecuta npm install para instalar las dependencias necesarias.

4. Iniciar el proyecto: dentro de la carpeta del proyecto, ejecuta npm start para arrancar el proyecto y, a continuación, abre http://localhost:3000 en el navegador para visualizarlo.

5. Editar y guardar: diseña en el editor local y guarda el proyecto al finalizar.

Uso de subescenas anidadas

• Entrar en una subescena: selecciona un elemento y haz clic en el botón de subescena de la barra de herramientas flotante para acceder a la subescena de dicho elemento.

• Editar la subescena: añade elementos, ajusta posiciones, realiza conexiones, etc., dentro de la subescena hasta satisfacer tus necesidades.

• Volver a la escena principal: una vez finalizada la edición de la subescena, regresa a la escena principal para seguir ajustando el diagrama de arquitectura global.

Integración en otros proyectos

Instalar el componente de front-end: si quieres incrustar una escena 3D creada con iCraft Editor en un proyecto React, ejecuta el comando pnpm install @icraft/player-react --save para instalar la biblioteca de componentes.

Código de integración: utiliza el código correspondiente en tu proyecto para integrar la escena 3D.

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

Donde your-scene.iplayer es el archivo de escena 3D exportado desde iCraft Editor.

Dirección del proyecto iCraft Editor:https://github.com/gantFDT/icraft