186 lines
6.4 KiB
Markdown
186 lines
6.4 KiB
Markdown
# 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 <b>wwroot</b> una sottocartella denominandola <b>lib</b>.
|
||
|
||
|
||
|
||
Successivamente copiare l'intera cartella <b>WebGl</b> fornita ed incollarla nella cartella <b>lib</b> 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 <b>lib</b> 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.
|
||
|
||
<br />
|
||
|
||
> **N.B.:** E' fondamentale caricare i propri modelli da visualizzare nella cartella WebGl/models/3mf.
|
||
>
|
||
<br />
|
||
|
||
- `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
|
||
<script src="~/lib/WebGl/draw/webgl_drawCS.js" type="module"></script>
|
||
<script src="~/lib/WebGl/draw/webgl_helper.js" type="module"></script>
|
||
```
|
||
|
||
Di seguito il risultato di come si presenterà la pagina :
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<base href="~/" />
|
||
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
|
||
<link href="css/site.css" rel="stylesheet" />
|
||
<link href="test.styles.css" rel="stylesheet" />
|
||
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
|
||
</head>
|
||
<body>
|
||
@RenderBody()
|
||
|
||
<div id="blazor-error-ui">
|
||
<environment include="Staging,Production">
|
||
An error has occurred. This application may no longer respond until reloaded.
|
||
</environment>
|
||
<environment include="Development">
|
||
An unhandled exception has occurred. See browser dev tools for details.
|
||
</environment>
|
||
<a href="" class="reload">Reload</a>
|
||
<a class="dismiss">🗙</a>
|
||
</div>
|
||
|
||
<script src="~/lib/WebGl/draw/webgl_draw.js" type="module"></script>
|
||
<script src="~/lib/WebGl/draw/webgl_helper.js" type="module"></script>
|
||
|
||
<script src="_framework/blazor.server.js"></script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
## 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"
|
||
|
||
<div id="WebGL-3mfExport">
|
||
</div>
|
||
```
|
||
`@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 |