Samuele Locatelli
298 lines
12 KiB
Markdown
298 lines
12 KiB
Markdown
# Visualizzatore 3D Doors (Blazor)
|
||
|
||
- [Visualizzatore 3D Doors (Blazor)](#visualizzatore-3d-doors-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)
|
||
|
||
|
||
## 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>. Se si importa localmente inl pacchetto npm viene creata alla fase di definizione del path di destinazione
|
||
|
||
|
||
|
||
|
||
E' possibile importare il pacchetto npm che si traova sul nostro repository nexus (https://nexus.steamware.net/#browse/browse:npm-hosted:webgl-door-visualizer) con il comando seguente
|
||
|
||
npm install webgl-door-visualizer@1.2.240622.1216
|
||
|
||
Dove il numero versione va modificato di conseguenza a quanto voluto.
|
||
|
||
|
||
|
||
Successivamente copiare l'intera cartella <b>src</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 `.3dm` 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[".3dm"] = "model"; // aggiungere l'estensione desiderata e il suo tipo
|
||
|
||
app.UseStaticFiles(new StaticFileOptions
|
||
{
|
||
ContentTypeProvider = provider
|
||
});
|
||
```
|
||
|
||
inoltre ma aggiunta la configurazione per distribuire file 3dm dalla cartella appositamente prevista (ed esterna al programma epr "sopravvivere" agli update dello stesso)
|
||
|
||
```c#
|
||
string path3dm = configuration.GetValue<string>("ServerConf:path3dm") ?? configuration.GetValue<string>("OptConf:path3dm") ?? "";
|
||
if (!string.IsNullOrEmpty(path3dm))
|
||
{
|
||
// verifico esista folder disegni
|
||
if (Directory.Exists(path3dm))
|
||
{
|
||
// gestione cartella x PDF
|
||
app.UseStaticFiles(new StaticFileOptions
|
||
{
|
||
FileProvider = new PhysicalFileProvider(path3dm),
|
||
RequestPath = "/3dm",
|
||
ContentTypeProvider = provider
|
||
});
|
||
}
|
||
}
|
||
```
|
||
|
||
## 2️⃣ Setup helper per la comunicazione
|
||
|
||
Nella cartella <b>lib</b> dovrebbe trovarsi il file `draw_call.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 './webgl_draw.js';
|
||
|
||
const WGL = new webgl_original();
|
||
|
||
const infoDiv = document.getElementById( "infoDiv") ;
|
||
const doorDiv = document.getElementById( "DoorRender") ;
|
||
const cubeDiv = document.getElementById( "Ref1Render") ;
|
||
infoDiv.style.display = "none";
|
||
|
||
var isAnimated = true;
|
||
var isRotating = true;
|
||
var showQuote = true;
|
||
var showGrid = true;
|
||
|
||
let options ={
|
||
modelPath: "https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models",
|
||
fName: getUrlParameter("src")
|
||
}
|
||
|
||
// init controllo
|
||
WGL.initcall(options);
|
||
```
|
||
In questo caso sono presenti due funzioni :
|
||
|
||
- `initcall` permette di avviare i calcoli che permettono il render del visualizzatore 3D. I parametri richiesti :
|
||
- modelPath: path da dove vengono restituiti i file 3dm (da configurare nel program.cs come sopra);
|
||
- fName: nome del file ( con estensione `.3dm` ) del quale effettuare il render.
|
||
|
||
<br />
|
||
|
||
> **N.B.:** E' fondamentale caricare i propri modelli da visualizzare nella cartella sopra definita in program.cs.
|
||
>
|
||
|
||
|
||
|
||
## 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/node_modules/webgl-door-visualizer/webgl_draw.js" type="module"></script>
|
||
<script src="~/lib/node_modules/webgl-door-visualizer/draw_call.js"></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 class="d-flex justify-content-between bg-dark bg-opacity-75">
|
||
<div class="p-2">
|
||
<div class="btn-group" role="group" aria-label="Mode">
|
||
<button id="btnOrto" class="btn btn-lg btn-light" onclick="setOrtho()" title="Ortho/ISO View"><i class="fas fa-cube"></i></button>
|
||
<button id="btnPers" class="btn btn-lg btn-secondary" onclick="setPersp()" title="Perspective View"><i class="fab fa-unity"></i></button>
|
||
</div>
|
||
<div class="btn-group" role="group" aria-label="Animation">
|
||
<button id="btnRotate" class="btn btn-lg btn-light" onclick="toggleRotate()" title="Toggle Rotate"><i class="fas fa-globe"></i></button>
|
||
<button id="btnQuote" class="btn btn-lg btn-light" onclick="toggleQuote()" title="Show Quotation"><i class="fas fa-ruler"></i></button>
|
||
<button id="btnGrid" class="btn btn-lg btn-light" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i></button>
|
||
</div>
|
||
</div>
|
||
<div id ="divMenu2" class="p-2">
|
||
<div>
|
||
<button id="btnHelp" class="btn btn-lg btn-light" onclick="toggleHelp()" title="Hide/Show Menu"><i class="fas fa-question"></i></button>
|
||
<div class="btn-group" role="group" aria-label="Animation">
|
||
<button id="btnPause" class="btn btn-lg btn-secondary" onclick="toggleAnim()" title="Freeze model"><i class="fas fa-pause"></i></button>
|
||
<button id="btnPlay" class="btn btn-lg btn-light" onclick="toggleAnim()" title="Animation Active"><i class="fas fa-play"></i></button>
|
||
</div>
|
||
<button id="btnReset" class="btn btn-lg btn-secondary" onclick="resetCamera()" title="Reset"><i class="fas fa-sync-alt"></i></button>
|
||
</div>
|
||
<div id = "infoDiv">
|
||
<ul class="list-group list-group-sm small" style="font-size: 0.75em;">
|
||
<li class="list-group-item p-1 active text-start">
|
||
<b>Camera settings</b>
|
||
</li>
|
||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||
<b>Zoom</b> Wheel-Scroll
|
||
</li>
|
||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||
<b>Pan</b> Drag Mouse-Wheel
|
||
</li>
|
||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||
<b>Rotate</b> CTRL + Drag Mouse-Wheel
|
||
</li>
|
||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||
<div><b>Iso / Ortho</b></div>
|
||
<div>
|
||
<i class="fas fa-cube"></i> | key : <b>O</b>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||
<div><b>Perspective</b></div>
|
||
<div>
|
||
<i class="fab fa-unity"></i> | key : <b>P</b>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||
<div><b>AutoRotate</b></div>
|
||
<div>
|
||
<i class="fas fa-globe"></i> | key : <b>R</b>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||
<div><b>Quotes</b></div>
|
||
<div>
|
||
<i class="fas fa-ruler"></i> | key : <b>Q</b>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||
<div><b>Grid</b></div>
|
||
<div>
|
||
<i class="fas fa-border-all"></i> | key : <b>G</b>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||
<div><b>Reset</b></div>
|
||
<div>
|
||
<i class="fas fa-sync-alt"></i> | key: <b>SpaceBar</b>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||
<div><b>Menu</b></div>
|
||
<div>
|
||
<i class="fas fa-question"></i> | key : <b>H</b>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="divLogo" class="bg-dark bg-opacity-50 bg-gradient p-1 small text-light text-center">
|
||
<img class="img-fluid" src ="Images/LogoEgw.png" height="32" />
|
||
<small>EgalWare</small>
|
||
</div>
|
||
<div id = "DoorRender"></div>
|
||
<div id = "RefRender"></div>
|
||
<div id = "Ref1Render"></div>
|
||
<div class="fixed-bottom small">
|
||
<div class="d-flex justify-content-between bg-dark text-light">
|
||
<div class="px-2">
|
||
WebDoor 3D
|
||
</div>
|
||
<div class="px-2">
|
||
Egalware | <a class="text-light text-decoration-none" href="https://www.egalware.com/" target="_blank"><img class="img-fluid" width="16" src="images/LogoEgw.png" /></a>
|
||
</div>
|
||
</div>
|
||
</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
|
||
|
||
... probabilmente non necessario con secondo modulo...
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
```
|