# Visualizzatore 3D Additive (Vue.js)
- [Visualizzatore 3D Additive (Vue.js)](#visualizzatore-3d-additive-vuejs)
  - [0️⃣ Prerequisiti](#0️⃣-prerequisiti)
  - [1️⃣ Creare un'applicazione Vue.js](#1️⃣-creare-unapplicazione-vuejs)
  - [2️⃣ Includere la libreria nel progetto](#2️⃣-includere-la-libreria-nel-progetto)
  - [3️⃣ Setup del componente vue](#3️⃣-setup-del-componente-vue)
  - [4️⃣ Setup script per richiamare il codice di render](#4️⃣-setup-script-per-richiamare-il-codice-di-render)
  - [5️⃣ Risultato finale](#5️⃣-risultato-finale)
  - [6️⃣ Ulteriori funzioni](#6️⃣-ulteriori-funzioni)
## 0️⃣ Prerequisiti
- Node.js installato 
- file conf x accesso ai nostri repo nexus in cartella utente (.npmrc contenuto in IcarusView)

## 1️⃣ Creare un'applicazione Vue.js

Il primo passo è creare l'applicazione. Aprire il terminale e navigare fino alla directory nella quale si vuole operare e lanciare il comando:

```sh
> npm create vue@latest
```

Questo comando installerà ed eseguirà `create-vue`, lo strumento ufficiale per eseguire lo scaffolding del progetto Vue.

```ps

√ Project name: ... Web3Dviewer
√ Package name: ... web3dviewer
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Scaffolding project in .\Web3Dviewer...
```

> **N.B.:** il nome `Web3Dviewer` è solo per esempio, si può inserire qualsiasi nome progetto si voglia.
> 

Una volta creato il progetto, segui le istruzioni per installare le dipendenze e avviare il server di sviluppo:

```sh
> cd Web3Dviewer
> npm install
> npm run dev
```

In questo modo ora abbiamo un'applicazione web funzionante.

## 2️⃣ Includere la libreria nel progetto

Per includere la libreria nel progetto è necessario copiare la cartella fornita `WebGl` ed incollarla all'interno della cartella `Web3Dviewer/src/`.

![Alt text](image-3.png)

## 3️⃣ Setup del componente vue

Usando il componente di esempio `App.vue` eliminare tutto il contenuto e sostituirlo con il seguente codice:

```html
<template>
  <main>
    <div id = "WebGL-3mfExport">
    </div>
  </main>
</template>

```

Che permetterà di contenere il visualizzatore.

## 4️⃣ Setup script per richiamare il codice di render

Nella pagina `index.html` è necessario aggiungere il seguente codice per poter richiamare le funzioni della libreria: 

```javascript
<script type="module">
    import { webgl_original } from './src/WebGl/draw/webgl_drawVue.js';

    const WGL = new webgl_original();

    let options = {
        _dimX : 960,
        _dimY: 540,
        _fileName: "Cubo.3mf",
        _showCalcGrid: false
    }

    WGL.initcall(options);

  </script>

  
  <script src="./src/WebGl/draw/webgl_drawVue.js" type="module"></script>
```

> La variabile `_showCalcGrid` definisce il tipo di griglia da mostrare (Infinita o Calcolata).


## 5️⃣ Risultato finale

![Gif che mostra il risultato finale](chrome_2023-09-19_08-50-36.gif)

## 6️⃣ 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