> For the complete documentation index, see [llms.txt](https://docs.solarvis.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.solarvis.co/documentation/es/project-design/create-a-project/roof-drawing.md).

# Dibujo de Techo

## Propósito de Esta Página <a href="#purpose-of-this-page" id="purpose-of-this-page"></a>

La página de **Dibujo de Techo** es la base de todo el flujo de trabajo de diseño y viabilidad en solarVis.

Los usuarios comienzan dibujando un **contorno de techo en 2D**, opcionalmente dividiéndolo usando bordes internos, y luego asignando **pendientes** para convertir el dibujo en un **modelo de techo en 3D**.

{% hint style="info" %}
Este modelo 3D se utiliza posteriormente para:

* Colocación de paneles
* Análisis de sombras
* Cálculos de energía y viabilidad
  {% endhint %}

## Qué Puede Hacer Aquí <a href="#what-you-can-do-here" id="what-you-can-do-here"></a>

En esta página, puede:

* Cambiar entre **Modo de Visualización** y **Modo de Dibujo**
* Dibujar y editar el contorno del techo en 2D
* Utilizar guías de ajuste y ángulo para mayor precisión
* Usar el Detector de Bordes Internos para crear divisiones interiores
* Agregar y gestionar obstáculos en el techo
* Editar la altura del edificio y las caras del techo
* Asignar pendientes para convertir la geometría 2D en caras de techo 3D
* Ajustar la altura del edificio y las propiedades de las caras del techo
* Cambiar el proveedor de mapas o cargar imágenes personalizadas
* Navegar y rotar la escena en 3D

{% hint style="info" %}
En esta página, los cambios se guardan automáticamente después de realizarlos.
{% endhint %}

{% embed url="<https://app.arcade.software/share/MSHbtxFt4DZQT1q5cmR6?language=es>" %}

## Modos <a href="#modes" id="modes"></a>

Explica los modos de interacción disponibles para visualizar, dibujar y modificar la geometría del techo.

### Modo de Visualización <a href="#view-mode" id="view-mode"></a>

El Modo de Visualización se utiliza para **inspeccionar** el modelo de techo sin modificar su geometría.

En el Modo de Visualización, puede:

* Rotar, desplazar y hacer zoom en la escena
* Acceder y revisar la altura del edificio
* Seleccionar caras del techo para inspeccionar propiedades técnicas como pendiente, acimut e información de área
* Seleccionar el edificio para editar o mover el techo y aplanar las caras
* Volver al Modo de Dibujo cuando se necesiten cambios en la geometría

Este modo se recomienda para controles de calidad y validación.

### Modo de Dibujo <a href="#draw-mode" id="draw-mode"></a>

El Modo de Dibujo se utiliza para **crear y editar el contorno del techo en 2D**.

#### Dibujo del Contorno

* Haga clic para colocar vértices
* Continúe haciendo clic para definir los bordes
* Cierre el polígono para completar el contorno
* Las guías naranjas muestran la alineación perpendicular y paralela
* Los vértices se ajustan automáticamente para crear un contorno de techo limpio
* Las longitudes de los bordes se muestran automáticamente
* Los botones de deshacer y rehacer están siempre disponibles

{% hint style="info" %}
El contorno sigue siendo 2D en esta etapa. Se requiere la asignación de pendiente para convertirlo en 3D.
{% endhint %}

Al subdividir o dividir el techo, use la **tecla Escape (Esc)** para completar el dibujo de la línea actual.

### Conversión de 2D a 3D <a href="#converting-from-2d-to-3d" id="converting-from-2d-to-3d"></a>

Una vez que el contorno del techo está completo, se asignan pendientes a las caras del techo.

#### Asignación de Pendiente

* Seleccione una cara o borde
* Ajuste el valor de la pendiente desde el panel derecho
* O arrastre la flecha de pendiente directamente en el modelo
* Cada pendiente transforma esa cara en un plano 3D

> La altura del edificio también se puede ajustar numérica o visualmente.

> Cada pendiente transforma una cara plana en un plano 3D con una orientación definida. Además, diferentes caras pueden tener diferentes pendientes.

## Detector de Bordes Internos <a href="#inner-edge-detector" id="inner-edge-detector"></a>

El **Detector de Bordes Internos** ayuda a los usuarios a dividir rápidamente formas de techo complejas en caras más pequeñas.

### Cómo Funciona <a href="#how-it-works" id="how-it-works"></a>

* Analiza los ángulos del contorno del techo
* Genera una línea interna a lo largo de la bisectriz
* Sugiere estas líneas como posibles divisiones interiores

### Qué Pueden Hacer los Usuarios <a href="#what-users-can-do" id="what-users-can-do"></a>

* Aceptar los bordes internos sugeridos
* Ajustarlos o reposicionarlos
* Eliminar bordes innecesarios
* Agregar manualmente los bordes internos que falten

> Los bordes internos solo definen la geometría; no asignan pendientes automáticamente.

## Obstáculos <a href="#obstacles" id="obstacles"></a>

Los obstáculos representan objetos físicos en el techo donde no se pueden colocar paneles solares.

{% hint style="info" %}
Los obstáculos afectan los cálculos de sombras.
{% endhint %}

### Agregar Obstáculos <a href="#adding-obstacles" id="adding-obstacles"></a>

Puede agregar obstáculos como:

* Rectángulos
* Círculos
* Polígonos

Cada obstáculo puede ser redimensionado, movido y posicionado con precisión.

{% hint style="info" %}
También puede duplicar obstáculos para modelar rápidamente elementos repetitivos en la azotea, o su altura sobre la superficie del techo puede ajustarse manualmente.
{% endhint %}

### Características de los Obstáculos <a href="#obstacle-features" id="obstacle-features"></a>

* Dibujar obstáculos rectangulares
* Redimensionar arrastrando las esquinas
* Mover obstáculos libremente sobre el techo
* Establecer la altura del obstáculo para los cálculos de sombras

{% hint style="info" %}
Los obstáculos pueden alinearse directamente con la superficie del techo usando la opción **Flush**.
{% endhint %}

#### Ejemplos Comunes de Obstáculos

* Chimeneas
* Claraboyas
* Antenas parabólicas

## Buhardillas <a href="#roof-dormers" id="roof-dormers"></a>

Las buhardillas son elementos estructurales del techo que se extienden verticalmente desde la superficie principal del techo y crean caras de techo adicionales.

<div align="left"><figure><img src="/files/vxLH3qtSOW3dA6xeXdp0" alt=""><figcaption></figcaption></figure></div>

En solarVis, las buhardillas se modelan como parte de la geometría del techo, no como simples obstáculos. Esto permite que las caras de la buhardilla participen en la lógica de pendiente y colocación de paneles.

Las buhardillas se utilizan comúnmente en edificios residenciales y de tipo hotel, y deben definirse con precisión para evitar diseños incorrectos de paneles y resultados erróneos de sombreado.

### Agregar una Buhardilla <a href="#adding-a-dormer" id="adding-a-dormer"></a>

Las buhardillas pueden agregarse mientras se trabaja en el Modo de Dibujo.

Para agregar una buhardilla:

* Cambie al Modo de Dibujo
* Seleccione la herramienta de Buhardilla en la barra de herramientas superior
* Elija un tipo de buhardilla
* Haga clic en la cara del techo objetivo para colocar la buhardilla

Una vez colocada, la buhardilla pasa a formar parte de la estructura del techo.

### Tipos de Buhardilla <a href="#dormer-types" id="dormer-types"></a>

SolarVis admite múltiples geometrías de buhardillas para reflejar estructuras de techo reales.

Los tipos de buhardilla disponibles incluyen:

* **Buhardilla de Cobertizo (Shed Dormer)**

  Buhardilla de una sola pendiente con un plano de techo.
* **Buhardilla a Dos Aguas (Gable Dormer)**

  Buhardilla con dos caras inclinadas que forman una cumbrera.
* **Buhardilla a Cuatro Aguas (Hip Dormer)**

  Buhardilla con varias caras inclinadas que convergen en la parte superior.

Cada tipo de buhardilla genera automáticamente sus propias caras de techo.

### Propiedades de las Caras de Techo de la Buhardilla <a href="#dormer-roof-faces-properties" id="dormer-roof-faces-properties"></a>

Cuando se selecciona una buhardilla, sus propiedades se muestran en el panel lateral derecho.

Puede ajustar los siguientes parámetros:

* **Ancho**

  Define el tamaño horizontal de la buhardilla.
* **Longitud**

  Define cuánto se extiende la buhardilla a lo largo de la superficie del techo.
* **Pendiente**

  Define el ángulo de inclinación de las caras del techo de la buhardilla.

Todos los valores se ingresan numéricamente y actualizan el modelo en tiempo real. Las caras de techo de la buhardilla se tratan igual que las caras principales del techo en la colocación de paneles y cálculos de sombras.

### Edición de Buhardilla <a href="#editing-dormer" id="editing-dormer"></a>

Las buhardillas pueden editarse después de su colocación.

Puede:

* Redimensionar la buhardilla cambiando el ancho y la longitud
* Ajustar la pendiente para que coincida con los planos arquitectónicos
* Mover la buhardilla a lo largo de la cara del techo
* Reposicionarla para evitar conflictos con paneles u obstáculos

Las ediciones se aplican instantáneamente a todas las caras de techo de la buhardilla.

### Duplicar una Buhardilla <a href="#duplicating-a-dormer" id="duplicating-a-dormer"></a>

Las buhardillas pueden duplicarse para recrear rápidamente estructuras de techo repetitivas.

**Cómo Funciona la Duplicación**

* Seleccione una buhardilla existente
* Haga clic en la acción **Duplicar** en la barra de herramientas o en el menú contextual
* Se crea una copia de la buhardilla con el mismo:
  * Tipo de buhardilla
  * Dimensiones
  * Valores de pendiente

La buhardilla duplicada puede moverse y ajustarse de forma independiente.

{% hint style="info" %}
**Buhardillas vs Obstáculos**

Las buhardillas no son obstáculos.

Diferencias clave:

* Las buhardillas crean nueva geometría de techo
* Los obstáculos solo bloquean la colocación de paneles

Utilice buhardillas cuando la estructura sea parte del techo.

Utilice obstáculos para objetos sobre el techo, como chimeneas o respiraderos, en la superficie del techo.
{% endhint %}

## Botones Deshacer, Rehacer y Eliminar <a href="#undo-and-redo-and-delete-buttons" id="undo-and-redo-and-delete-buttons"></a>

#### **Deshacer**

Revierte el último dibujo o edición realizada en el diseño del techo.

#### **Rehacer**

Restaura el último dibujo o edición que fue deshecho.

#### **Eliminar**

Elimina todo lo que haya realizado, como obstáculos o dibujos del techo.

## Atajos de Teclado <a href="#keyboard-shortcuts" id="keyboard-shortcuts"></a>

Los atajos de teclado le permiten trabajar más rápido y con mayor precisión al dibujar y editar techos en solarVis.

#### Estados de Vista

* **1:** Vista Superior
* **2:** Vista Frontal
* **3:** Vista Lateral
* **4:** Vista en Perspectiva
* **5:** Vista Isométrica
* **N**: Restablecer Norte

Los atajos de vista cambian la vista de la cámara sin modificar la geometría.

#### Herramientas de Diseño

* **E:** Modo de Edición
* **C**: Modo de Dibujo
* **V:** Modo de Visualización
* **M:** Modo de Movimiento
* **I:** Herramienta de Borde Interno

Estos atajos cambian entre herramientas de dibujo y edición.

#### Controles de Visibilidad

* **L:** Mostrar u ocultar dimensiones
* **G:** Mostrar u ocultar imagen satelital del suelo

Los atajos de visibilidad reducen el desorden visual durante la edición.

#### Acciones

* **Ctrl + Z:** Deshacer
* **Ctrl + Shift + Z:** Rehacer
* **Delete o Retroceso:** Eliminar
* **Ctrl + C:** Duplicar

Los atajos de acción gestionan el historial de edición y los objetos.

#### Agregado Rápido de Obstáculos

* **Alt + C:** Agregar obstáculo circular
* **Alt + R:** Agregar obstáculo rectangular
* **Alt + P:** Agregar obstáculo poligonal

Los atajos de agregado rápido crean instantáneamente obstáculos para zonas de sombra y áreas restringidas.

## Edición de Edificio <a href="#building-editing" id="building-editing"></a>

Permite gestionar la estructura general del modelo de techo después de que el contorno 2D se ha convertido en 3D.

Las ediciones a nivel de edificio afectan a todas las caras de techo conectadas y son críticas para cálculos precisos de sombras, producción y viabilidad.

{% hint style="info" %}
El techo dibujado puede duplicarse fácilmente en lugar de crearlo de nuevo desde cero.
{% endhint %}

### Acceso a la Edición de Edificio <a href="#accessing-building-editing" id="accessing-building-editing"></a>

Para acceder a las herramientas de edición de edificio:

* Cambie del Modo de Dibujo al Modo de Visualización
* Haga clic en el cuerpo del edificio
* El panel de Edificio se abre en el lado derecho

Este panel contiene acciones que se aplican a todo el edificio o a las caras de techo seleccionadas.

### Acciones del Panel de Edificio <a href="#building-panel-actions" id="building-panel-actions"></a>

Desde este panel, puede:

* Editar la geometría del techo y las pendientes numéricamente

{% hint style="info" %}
Puede redimensionar el edificio horizontalmente arrastrando un borde horizontal hacia afuera o hacia adentro. Esto extenderá el borde dibujado y ajustará el tamaño del edificio en consecuencia.
{% endhint %}

{% hint style="info" %}
Arrastrando los bordes hacia arriba, puede establecer la pendiente deseada del techo
{% endhint %}

* Mover todo el techo que ha dibujado

{% hint style="info" %}
El movimiento no cambia la geometría, las pendientes ni las dimensiones.
{% endhint %}

* Aplanar las caras de techo seleccionadas

{% hint style="info" %}
Aplanar es útil para restablecer asignaciones de pendiente incorrectas o bordes internos.
{% endhint %}

* Ajustar la altura del edificio numérica o visualmente en la escena

{% hint style="info" %}
La altura del edificio afecta los cálculos de sombras y el comportamiento de techos multinivel.
{% endhint %}

### Selección de Cara de Techo <a href="#roof-face-selection" id="roof-face-selection"></a>

Las caras individuales del techo pueden seleccionarse para inspección o edición detallada.

Para seleccionar una cara de techo:

* Haga doble clic en la cara
* Se abre el panel de Información de la Cara del Techo

Esto permite el control a nivel de cara sin afectar todo el edificio.

#### **Información de la Cara del Techo**

Cuando se selecciona una cara de techo, se muestran los siguientes datos:

* **Pendiente** representa la inclinación de la cara del techo.
* **Acimut** representa la orientación de la cara del techo respecto a la brújula.
* **Área** representa la superficie utilizable de la cara del techo.

Esto permite un control preciso sobre estructuras de techo complejas o multinivel.

{% hint style="info" %}
**🧷 Mejores Prácticas para la Edición de Edificios**

* Siempre valide la pendiente y el acimut de la cara del techo antes de la colocación de paneles
* Use Aplanar Caras para corregir errores tempranos en lugar de volver a dibujar
* Inspeccione cada cara de techo individualmente en techos complejos

Una edición precisa del edificio garantiza resultados fiables en todos los módulos posteriores.
{% endhint %}

## Proveedor de Mapas y Controles de Imágenes <a href="#map-provider-and-imagery-controls" id="map-provider-and-imagery-controls"></a>

La selección de mapas e imágenes es un primer paso fundamental para un dibujo de techo preciso.

Estos controles se encuentran en la parte inferior izquierda de la pantalla.

### Visibilidad Satelital <a href="#satellite-visibility" id="satellite-visibility"></a>

Puede activar o desactivar la imagen satelital para:

* Reducir el desorden visual
* Centrarse en la geometría y las mediciones
* Mejorar la precisión del dibujo

### Visibilidad de Dimensiones <a href="#dimension-visibility" id="dimension-visibility"></a>

Puede mostrar u ocultar las dimensiones para:

* Validar las longitudes de los bordes
* Reducir el ruido visual durante la edición

{% hint style="info" %}
Las etiquetas de dimensión siguen siendo legibles al hacer zoom dentro y fuera.
{% endhint %}

### Selección de Proveedor de Mapas <a href="#map-provider-selection" id="map-provider-selection"></a>

Puede elegir entre diferentes proveedores de mapas según la disponibilidad y la resolución:

* Google Maps
* Google Maps HD (Google Solar API)
* Azure Maps

{% hint style="info" %}
Cambiar de proveedor puede mejorar la claridad de la imagen, la visibilidad de los bordes o la precisión de la alineación para ubicaciones específicas.
{% endhint %}

{% hint style="info" %}
La disponibilidad de datos solares y de techos para Google Maps HD depende de la cobertura de Google Maps Solar API. Por favor, consulte el mapa de cobertura en el sitio web a continuación para confirmar si los datos están disponibles para su ubicación.

[Consulte el sitio web](https://developers.google.com/maps/documentation/solar/coverage)
{% endhint %}

{% hint style="info" %}
A veces, la configuración predeterminada del navegador puede no admitir “**WebGL**”. Por favor, verifique si su navegador admite WebGL [utilizando el enlace](https://get.webgl.org/).

Si ve el error **“WebGL is not supported”**, el motor de juego utilizado para el dibujo de techos puede no funcionar correctamente. Para evitar este problema, asegúrese de que WebGL esté habilitado en la configuración de su navegador.

Puede seguir los pasos en [el enlace](https://www.youtube.com/watch?v=uhcrK0nl_SM) para actualizar su configuración.
{% endhint %}

### Imágenes Personalizadas <a href="#custom-images" id="custom-images"></a>

Además de los proveedores de mapas, puede cargar imágenes personalizadas.

Los casos de uso comunes incluyen:

* Planos arquitectónicos de techos
* Imágenes de drones
* Fotos del sitio en alta resolución

Las imágenes cargadas pueden alinearse con el sistema de coordenadas y utilizarse como referencia para el dibujo.

Esto es especialmente útil cuando la imagen satelital está desactualizada o no es clara.

#### **Alineación de Imagen (Ajuste Inicial)** <a href="#image-alignment-initial-adjustment" id="image-alignment-initial-adjustment"></a>

Al cargar una imagen personalizada, se le pedirá que la alinee con el mapa base.

<figure><img src="/files/DvmgKhuZVhT0qdNXpzYB" alt=""><figcaption></figcaption></figure>

Para garantizar una alineación precisa:

* Identifique los mismos puntos de referencia en ambas imágenes
* Coloque dos puntos de referencia coincidentes en ambas imágenes
* Utilice elementos claros y fijos como esquinas o bordes del techo
* Haga clic en el botón ‘Ajustar’ para encajar la imagen sobre la imagen satelital

{% hint style="info" %}
La imagen de la izquierda muestra la imagen satelital (por ejemplo, Google Maps), y la imagen de la derecha muestra la imagen personalizada cargada, como imágenes de drones.
{% endhint %}

## Cámara y Navegación <a href="#camera-and-navigation" id="camera-and-navigation"></a>

<figure><img src="/files/DgI9qmhxpSr20TWiZu8C" alt=""><figcaption></figcaption></figure>

Las herramientas de cámara ubicadas en la parte inferior derecha solo afectan la visualización del modelo.

> No cambian la geometría.

#### Brújula de Navegación

La brújula le permite:

* Saltar a vistas predefinidas, como superior o lateral
* Validar la orientación del techo
* Rotar la vista alrededor del edificio

{% hint style="info" %}
Se puede rotar para ver alrededor del edificio haciendo clic derecho y arrastrando el ratón
{% endhint %}

#### Herramientas de Cámara

Puede:

* Desplazar la vista
* Acercar
* Alejar

Estas herramientas ayudan a inspeccionar detalles sin modificar el modelo.

{% hint style="info" %}
El mapa puede desplazarse presionando y arrastrando la rueda del ratón.
{% endhint %}

***

## Páginas Relacionadas <a href="#related-articles" id="related-articles"></a>

* [Página de Colocación de Paneles y Selección de Inverter](/documentation/es/project-design/create-a-project/panel-placement-and-inverter-selection.md)
* [Página de Consumo de Energía](/documentation/es/project-design/create-a-project/consumption/energy-consumption.md)

Si encuentra algún problema, [no dude en contactarnos.](https://www.solarvis.co/en/company/contact)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.solarvis.co/documentation/es/project-design/create-a-project/roof-drawing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
