Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Modellare per la visualizzazione Web

Creare elementi texturizzati all'interno dei un template per la generazione delle immagini
Creare elementi texturizzati all'interno dei un template per la generazione delle immagini
Link copiato negli appunti

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
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
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
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
Risultato dell'applicazione della texture

Per ruotare in una posizione migliore la sfera, la si può selezionare (in Object Mode) e premere 'N' : in questo modo appare il pannello Transform Properties che riporta le proprietà fondamentali della sfera. Per ottene un orientamento migliore, è indicato impostare RotX=0, RotY=0 e RotZ=90.

Ti consigliamo anche