TheRocker7x Ha scritto:Modellare per la visualizzazione Web
Può essere utile inserire un modello tridimensionale in una pagina Web, e consentire all'utente di modificarne la visualizzazione.
Con Blender è possibile grazie allo script 3DNP (3D-No Plugins): un JavaScript che carica una serie di immagini e simula una vista 3D mostrando l'immagine appropriata a seconda dei movimenti del mouse dell'utente. È disponibile anche uno script Python per Blender che serve per produrre le immagini necessarie al JavaScript.
3DNP è completamente gratuito, distribuito con licenza GPL e scaricabile dalla pagina ufficiale.
Creazione del modello
Una volta scaricato e decompresso il file .zip, aprire il file di esempio chiamato 3DNP.blend che si trova nella cartella "Blender".
Figura 1. Il template

Nella Finestra 3D si vede una sfera (evidenziata in rosa perchè selezionata) formata da alcuni vertici. Al centro della scena, invece, c'è un cubo che riporta sui lati le scritte 3D NP.
I vertici della sfera sono i punti in cui verrà spostata la Camera di Blender affinché si possa renderizzare il cubo da diversi punti di vista per creare le immagini necessarie allo script.
Al posto del cubo verrà inseriemo il modello di un globo terrestre. Cancelliamo quindi il cubo, le scritte ai suoi lati e il piano alla sua base.
Al centro della scena, dove c'era il cubo, si inseriamo una UVsphere (Add>Mesh>UVsphere) e dal contesto Editing (F9) impostuiamo SetSmooth.
Figura 2. Inserimento della UVsphere

Applichiamo alla sfera, un materiale e una immagine come texture. Con una breve ricerca su internet, è facile trovare immagini, liberamente utilizzabili, della superficie terrestre.
Figura 3. Immagine piana della Terra

Assegnamo il materiale alla sfera: dal sotto contesto "Material buttons" premiamo il pulsante Add New. Per assegnare la texture, invece, si deve premere F6 per accedere al sotto contesto Texture buttons, premere Add New e selezionare Image come tipo di texture. Dal pannello Image è poi possibile selezionare l'immagine che si vuole utilizzare.
È importante infine impostare la forma alla quale applichiamo la texture, in questo caso abbiamo una sfera, quindi scegliamo "Sphe" dal pannello "Map Input" del sotto contesto Material buttons. Premendo F12 otteniamo un rendering del modello creato.
Figura 4. Risultato dell'applicazione della texture


Gli script: generare le immagini
Una volta creato il globo terrestre si può sfruttare lo script per creare le immagini da utilizzare sul web.
Utilizzo dello script Python in Blender
Per utilizzare lo script, si deve innanzitutto accedere al contesto Script e cliccare sul pulsante Enable Script Links. Per mandare in esecuzione lo script, è necessario cliccare, nell'header della finestra (a destra) in cui vi è il codice dello script, la voce File e successivamente scegliere Run Python Script. Appare così la GUI dello script.
Figura 5. Definire il percorso della Camera

Vi sono quattro parametri modificabili: tutti servono per impostare la sfera formata dai vertici che saranno attraversati dalla Camera:
• Level: definisce le suddivisioni orizzontali
• Degrees: definisce le suddivisioni verticali
• CameraBoss: definisce la grandezza
• CapBuffer: definisce quanto è schiacciata
Per questo tutorial, è sufficiente impostare Level a 5, Degrees a 30 e lasciare i valori degli altri parametri come già impostati di default.Infine si può premere il pulsante Start per ottenere la nuova sfera.
Se premiamo il pulsante Anim del sotto contesto Render buttons, generaimo tutte le immagini necessarie e salvate nella cartella "images".
Configurazione del JavaScript 3DNP
Il file di configurazione è 3DNP_config.js e si trova nella cartella "HTML". È possibile modificare diverse impostazioni, le principali sono:
• total: indica il numero di immagini, per questo tutorial impostare 60
• levels: indica le suddivisioni orizzontali della sfera utilizzata in Blender, per questo tutorial impostare 5
• startlevel: indica il livello di partenza, per questo tutorial impostare 4
• rotomatic: indica la velocità di rotazione, per questo tutorial impostare 150
È necessario poi sostituire le immagini nella cartella "images" (all'interno della cartella "HTML") con quelle renderizzate con Blender.
Infine aprendo il 3DNP_loader.html oppure direttamente 3DNP.html è possibile vedere il risultato ottenuto.
Il codice da inserire nella pagina Web
<iframe src="3DNP.html" name="3DNP" width="300" height="300"
scrolling="auto" marginheight="0" marginwidth="0" frameborder="0">

<p>Your Browser is not able to display IFrames - please <a href="3DNP_click.html">use this link</a>.</p>

</iframe>