# Visualizzatore 3D Additive (Blazor)
- [Visualizzatore 3D Additive (Blazor)](#visualizzatore-3d-additive-blazor)
- [0️⃣ Prerequisiti](#0️⃣-prerequisiti)
- [1️⃣ Creare un'applicazione Web (Blazor server app)](#1️⃣-creare-unapplicazione-web-blazor-server-app)
- [⚠️ IMPORTANTE PER IL CORRETTO FUNZIONAMENTO DEL VISUALIZZATORE](#️-importante-per-il-corretto-funzionamento-del-visualizzatore)
- [2️⃣ Setup helper per la comunicazione](#2️⃣-setup-helper-per-la-comunicazione)
- [3️⃣ Aggiungere i riferimenti ai file `.js`](#3️⃣-aggiungere-i-riferimenti-ai-file-js)
- [4️⃣ Setup componente blazor per il render](#4️⃣-setup-componente-blazor-per-il-render)
- [5️⃣ Setup della chiamata alla funzione di render](#5️⃣-setup-della-chiamata-alla-funzione-di-render)
- [6️⃣ Risultato finale](#6️⃣-risultato-finale)
- [7️⃣ Ulteriori funzioni](#7️⃣-ulteriori-funzioni)
## 0️⃣ Prerequisiti
- .NET SDK installato
## 1️⃣ Creare un'applicazione Web (Blazor server app)
Una volta creata l'applicazione web creare nella cartella wwroot una sottocartella denominandola lib.
Successivamente copiare l'intera cartella WebGl fornita ed incollarla nella cartella lib precedentemente creata.
## ⚠️ IMPORTANTE PER IL CORRETTO FUNZIONAMENTO DEL VISUALIZZATORE
Visual studio riconosce e permette l'utilizzo di alcuni tipi di file. L'estensione `.3mf` non rientra nella categoria perciò è importante ricordarsi di includere quest'ultima nella classe `Program.cs` le seguenti righe di codice:
```c#
var provider = new Microsoft.AspNetCore.StaticFiles.FileExtensionContentTypeProvider();
provider.Mappings[".3mf"] = "model"; // aggiungere l'estensione desiderata e il suo tipo
app.UseStaticFiles(new StaticFileOptions
{
ContentTypeProvider = provider
});
```
## 2️⃣ Setup helper per la comunicazione
Nella cartella lib creare un file `WebGl_helper.js`. Questo sarà il file che farà da tramite tra chi gestisce il visualizzatore ( `WebGl` ) e chi mostrerà il visualizzatore ( `WebGlViewer` )
Il file conterrà le seguenti righe di codice :
```javascript
import { webgl_original } from '../lib/WebGl/draw/webgl_drawCS.js';
const WGL = new webgl_original();
window.setup = function ({ dimX, dimY, fileName }) {
let options = {
_dimX: dimX,
_dimY: dimY,
_fileName: fileName
}
WGL.initcall(options);
}
```
In questo caso sono presenti due funzioni :
- `window.setup` permette di avviare i calcoli che permettono il render del visualizzatore 3D. I parametri richiesti :
- dimX: larghezza del visualizzatore;
- dimY: altezza del visualizzatore;
- fileName: nome del file ( con estensione `.3MF` ) del quale effettuare il render.
> **N.B.:** E' fondamentale caricare i propri modelli da visualizzare nella cartella WebGl/models/3mf.
>
- `window.refresh` dà la possibilità di gestire una simulazione di lavorazione. I parametri richiesti :
- nStart: layer di inizio (primo layer da visualizzare).
- nEnd: layer di fine (ultimo layer da visualizzare).
## 3️⃣ Aggiungere i riferimenti ai file `.js`
Per far si che il codice scritto nel file di base della libreria e nel file **helper** è importante aggiungere le seguenti righe alla pagina
`Pages/_layout.cshtml` :
```html
```
Di seguito il risultato di come si presenterà la pagina :
```html
@RenderBody()
An error has occurred. This application may no longer respond until reloaded.
An unhandled exception has occurred. See browser dev tools for details.
Reload🗙
```
## 4️⃣ Setup componente blazor per il render
Successivamente creiamo un nuovo componente razor nella cartelle delle pagine `Pages/WebGlViewer`.
Nella nuova pagina inserire le seguenti righe di codice che permetteranno di effettuare il render del visualizzatore.
```html
@inject IJSRuntime JSRuntime
@page "/WebGlViewer"
```
`@inject IJSRuntime JSRuntime` permette di usufruire del servizio che si occupa di eseguire chiamate a funzioni javascript direttamente dal codice c#
## 5️⃣ Setup della chiamata alla funzione di render
Nella pagina `Pages/WebGlViewer` aggiungere il seguente codice che, una folta effettuato il render della pagina procederà al disegno del visualizzatore.
```c#
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Task.Delay(1);
if (firstRender)
{
var options = new
{
dimX = 960,
dimY = 540,
fileName = "Cubo.3mf",
_showCalcGrid = false
};
await JSRuntime.InvokeVoidAsync("setup", options);
}
}
}
```
> La variabile `_showCalcGrid` definisce il tipo di griglia da mostrare (Infinita o Calcolata).
>
## 6️⃣ Risultato finale
## 7️⃣ Ulteriori funzioni
La libreria presenta ulteriori funzioni quali:
- `.refreshCall(nStart, nEnd)`: permette di decidere quali layer dell'oggetto mostrare.
- `.resetCamera()`: gestisce il reset della camera alla posizione iniziale.
- `.setCamerType()`: permette di cambiare il tipo di camera tra:
- Prospettica
- ortografica