Egalware/web3d

Fork 0

Files

T

Samuele Locatelli 438399d7a1 Riorganizzazione REPO x multi viewers

2024-03-25 08:51:52 +01:00

6.4 KiB

Raw Permalink Blame History

Visualizzatore 3D Additive (Blazor)

Visualizzatore 3D Additive (Blazor)

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:

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 :

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 :

<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 :

    <!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.

@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.

@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

6.4 KiB Raw Permalink Blame History Unescape Escape