瀏覽代碼

Documentation manual italian translation (#24455)

* feat: add italian manual title section

* feat: add creating a scene italian translation

* feat: add installation page italian translation

* feat: add webgl compatibility check page italian translation

* feat: add italian translation of how to run things locally

* feat: add italian translation of drawing lines

* feat: add italin version of creating text

* feat: add italian version of loading £d models

* feat: add italian translation of Libraries and Plugins

* feat: add italian translation of FAQ

* fix: change page name on italian translation

* feat: add italian version of manual

* fix: italian translation

* feat: add italian translation of manual
Angela Busato 3 年之前
父節點
當前提交
89f1f201aa

+ 2 - 1
docs/index.html

@@ -36,6 +36,7 @@
 						<option value="ko">한국어</option>
 						<option value="zh">中文</option>
 						<option value="ja">日本語</option>
+						<option value="it">it</option>
 					</select>
 				</div>
 				<div id="content"></div>
@@ -86,7 +87,7 @@
 
 			if ( /^(api|manual|examples)/.test( hash ) ) {
 
-				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|ja)\//.exec( hash );
+				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|ja|it)\//.exec( hash );
 
 				if ( hashLanguage === null ) {
 

+ 34 - 0
docs/list.json

@@ -1105,6 +1105,40 @@
                 "NPMでテストを実行する": "manual/ja/buildTools/Testing-with-NPM"
             }
         }
+    },
+
+    "it": {
+
+      "Manuale": {
+  
+        "Per iniziare": {
+          "Creare una scena": "manual/it/introduction/Creating-a-scene",
+          "Installazione": "manual/it/introduction/Installation",
+          "Controllo compatibilità WebGL": "manual/it/introduction/WebGL-compatibility-check",
+          "Esecuzione in locale": "manual/it/introduction/How-to-run-things-locally",
+          "Disegnare linee": "manual/it/introduction/Drawing-lines",
+          "Creare testo": "manual/it/introduction/Creating-text",
+          "Caricare modelli 3D": "manual/it/introduction/Loading-3D-models",
+          "Librerie e Plugins": "manual/it/introduction/Libraries-and-Plugins",
+          "FAQ": "manual/it/introduction/FAQ",
+          "Link utili": "manual/it/introduction/Useful-links"
+        },
+  
+        "Prossimi passi": {
+          "Come aggiornare le cose": "manual/it/introduction/How-to-update-things",
+          "Come liberare le risorse": "manual/it/introduction/How-to-dispose-of-objects",
+          "Come creare contenuti VR": "manual/it/introduction/How-to-create-VR-content",
+          "Come utilizzare il post-processing": "manual/it/introduction/How-to-use-post-processing",
+          "Trasformazioni di matrici": "manual/it/introduction/Matrix-transformations",
+          "Sistema di animazione": "manual/it/introduction/Animation-system",
+          "Gestione del colore": "manual/it/introduction/Color-management"
+        },
+  
+        "Strumenti di build": {
+          "Testare con NPM": "manual/it/buildTools/Testing-with-NPM"
+        }
+  
+      }
     }
 
 }

+ 239 - 0
docs/manual/it/buildTools/Testing-with-NPM.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Testare con NPM ([name])</h1>
+
+		<p class="desc">
+			Questo articolo mostra come inserire three.js in un ambiente
+			[link:https://nodejs.org/en/ node.js] così che tu possa eseguire test
+			automatici. I test possono essere eseguiti da linea di comando o da
+			strumenti CI automatici come [link:https://travis-ci.org/ Travis].
+		</p>
+
+		<h2>Versione breve</h2>
+
+		<p>
+			Se sei a tuo agio con node e npm, installa npm
+			<code> $ npm install three --save-dev </code>
+			e aggiungi
+			<code> const THREE = require('three'); </code>
+			al tuo test.
+		</p>
+
+		<h2>Creare un progetto testabile da zero</h2>
+		<p>
+			Se non sei familiare con questi strumenti, ecco una guida rapida per
+			linux (il processo di installazione sarà leggermente diverso usando
+			Windows, ma i comandi NPM saranno uguali).
+		</p>
+
+		<h3>Configurazione di base</h3>
+		<div>
+			<ol>
+				<li>
+					Installa [link:https://www.npmjs.org/ npm] e nodejs. Il percorso più
+					breve in genere assomiglia a qualcosa del simile:
+					<code>
+$ sudo apt-get install -y npm nodejs-legacy
+# fix any problems with SSL in the default registry URL
+$ npm config set registry http://registry.npmjs.org/
+					</code>
+				</li>
+
+				<li>
+					Crea una nuova cartella per il progetto
+					<code> $ mkdir test-example; cd test-example </code>
+				</li>
+
+				<li>
+					Crea un nuovo file di progetto tramite npm:
+					<code> $ npm init </code>
+					e accetta tutti i valori suggeriti premendo Enter per ogni richiesta.
+					Con queste richieste si creerà il file package.json.
+				</li>
+				<br />
+
+				<li>
+					Prova ad avviare la funzione di test con:
+					<code> $ npm test </code>
+					fallirà, come ci aspettiamo. Se controlli nel file package.json la
+					definizione dello script di test è:
+					<code> "test": "echo \"Error: no test specified\" && exit 1" </code>
+				</li>
+			</ol>
+		</div>
+
+		<h2>Aggiungere mocha</h2>
+		<div>
+			Utilizzeremo [link:https://mochajs.org/ mocha].
+
+			<ol>
+				<li>
+					Installare mocha con:
+					<code> $ npm install mocha --save-dev </code>
+					Si noti che è stata creata la cartella node_modules/ e le tue
+					dipendenze sono state installate al suo interno. Inoltre, si noti che
+					il file package.json è stato aggiornato: è stata aggiunta la proprietà
+					devDependencies, aggiornata dal comando --save-dev.
+				</li>
+				<br />
+
+				<li>
+					Modificare il file package.json per usare mocha per i test. Quando
+					viene invocato il test, vogliamo eseguire mocha e specificare un
+					reporter dettagliato. Per impostazione predefinita questo eseguirà
+					qualsiasi cosa nella cartella test/ (non avendo una cartella test/ si può
+					incorrere in un npm ERR!, bisogna crearla con il comando mkdir test)
+					<code> "test": "mocha --reporter list" </code>
+				</li>
+
+				<li>
+					Rilanciare il test con:
+					<code> $ npm test </code>
+
+					Adesso il test dovrebbe essere eseguito con successo, riportando "0 passing (1ms) or
+					similar".
+				</li>
+			</ol>
+		</div>
+
+		<h2>Aggiungere three.js</h2>
+		<div>
+			<ol>
+				<li>
+					Inseriamo la nostra dipendenza three.js con il comando:
+					<code> $ npm install three --save-dev </code>
+					<ul>
+						<li>
+							Se hai bisogno di una versione di three.js diversa, usa
+							<code> $ npm show three versions </code>
+							per vedere quali sono le versioni disponibili. Per dire ad npm la versione
+							scelta, usa
+							<code> $ npm install [email protected] --save </code>
+							(0.84.0 nell'esempio). --save fa sì che sia una dipendenza del
+							progetto piuttosto che una devDependecy. Per maggiori informazioni
+							consulta il documento
+							[link:https://docs.npmjs.com/cli/v8/configuring-npm/package-json qui].
+						</li>
+					</ul>
+				</li>
+
+				<li>
+					Mocha cercherà i test nella cartella test/, quindi creiamola
+					<code> $ mkdir test </code>
+				</li>
+
+				<li>
+					Infine abbiamo effettivamente bisogno di un test JS per l'esecuzione.
+					Aggiungiamo un semplice test il quale verificherà che l'oggetto
+					three.js sia disponibile e funzionante. Crea il file
+					test/verify-three.js contenente:
+					<code>
+const THREE = require('three');
+const assert = require('assert');
+
+describe('The THREE object', function() {
+  it('should have a defined BasicShadowMap constant', function() {
+    assert.notEqual('undefined', THREE.BasicShadowMap);
+  }),
+
+  it('should be able to construct a Vector3 with default of x=0', function() {
+    const vec3 = new THREE.Vector3();
+    assert.equal(0, vec3.x);
+  })
+})
+					</code>
+				</li>
+
+				<li>
+          Adesso rieseguiamo il test con il comando $ npm test. Questo dovrebbe
+          eseguire i test sopra definiti e terminare con successo, mostrando qualcosa del tipo:
+					<code>
+The THREE object should have a defined BasicShadowMap constant: 0ms
+The THREE object should be able to construct a Vector3 with default of x=0: 0ms
+2 passing (8ms)
+					</code>
+				</li>
+			</ol>
+		</div>
+
+		<h2>Aggiungere il tuo codice</h2>
+		<div>
+      Hai bisogno di fare tre cose:
+
+			<ol>
+				<li>
+          Scrivere un test per il comportamento che di aspetti dal tuo codice, e 
+          metterlo all'interno della cartella test/.
+					[link:https://github.com/air/encounter/blob/master/test/Physics-test.js Qui] un esempio di un progetto reale.
+				</li>
+
+				<li>
+          Esportare il tuo codice funzionale in modo tale che nodejs possa vederlo
+          per usarlo insieme a require. Controlla
+					[link:https://github.com/air/encounter/blob/master/js/Physics.js qui].
+				</li>
+
+				<li>
+          Richiamare il tuo codice nel file di test, allo stesso modo in cui
+          abbiamo fatto per richiamare three nell'esempio sopra `require('three')`
+				</li>
+			</ol>
+
+			<p>
+        Il punto 2 e 3 saranno molto dipendenti da come hai gestito il tuo codice.
+        Nell'esempio di Physics.js fornito sopra, la parte di esportazione si trova giustamente
+        alla fine. Assegniamo un oggetto a module.exports:
+			</p>
+			<code>
+//=============================================================================
+// make available in nodejs
+//=============================================================================
+if (typeof exports !== 'undefined') { module.exports = Physics; }
+			</code>
+		</div>
+
+		<h2>Affrontare le dipendenze</h2>
+		<div>
+			<p>
+        Se stai già utilizzando qualcosa di smart come require.js o browserify,
+        salta questa parte.
+			</p>
+			<p>
+        Tipicamente un progetto three.js verrà eseguito nel browser. Il caricamento
+        del modulo viene quindi eseguito dal browser che esegue una serie di tag 
+        di script. I tuo singoli file non si devono preoccupare per le dipendenze.
+        Tuttavia, in un contesto nodejs non è presente il file index.html che lega tutto
+        insieme, quindi devi essere esplicito.
+			</p>
+			<p>
+        Se stai esportando un modulo che dipende da altri file, dovrai dire a node 
+        di caricarli. Di seguito un approccio:
+			</p>
+			<ol>
+				<li>
+          All'inizio del tuo  modulo, controlla se ti trovi in un ambiente nodejs.
+				</li>
+				<li>Se è così, dichiara esplicitamente le tue dipendenze.</li>
+				<li>
+          In caso contrario, probabilmente sei in un browser e quindi non devi fare
+          nient'altro.
+				</li>
+			</ol>
+			Esempio di codice da Physics.js:
+			<code>
+//=============================================================================
+// setup for server-side testing
+//=============================================================================
+if (typeof require === 'function') // test for nodejs environment {
+  const THREE = require('three'); const MY3 = require('./MY3.js'); }
+			</code>
+		</div>
+	</body>
+</html>

+ 122 - 0
docs/manual/it/introduction/Animation-system.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Sistema di animazione ([name])</h1>
+
+		<h2>Panoramica</h2>
+
+		<p class="desc">
+      Con il sistema di animazione di three.js si possono animare varie proprietà dei modelli:
+      le ossa di un [page:SkinnedMesh modello skinned], i target morph, le diverse proprietà dei materiali 
+      (colori, opacità, booleani), la visibilità e le trasformazioni. Le proprietà di animazione possono essere 
+      sfumate, incrociate e deformate. Il peso e la scala temporale di diverse animazioni simultanee sullo stesso 
+      oggetto o su oggetti diversi possono essere modificate in modo indipendente. È possibile sincronizzare 
+      diverse animazioni sullo stesso oggetto e su oggetti diversi.<br /><br />
+
+      Per ottenere tutto questo in un sistema omogeneo, il [link:https://github.com/mrdoob/three.js/issues/6881 sistema di animazione di three.js] 
+      è stato cambiato completamente nel 2015 (attenzione alle informazioni non aggiornate!), ed ora ha un'architettura simile a quella di Unity/Unreal Engine 4.
+      Questa pagina fornisce una breve panoramica dei componenti principali del sistema e di come lavorano insieme.
+		</p>
+
+		<h3>Clip di animazione (AnimationClips)</h3>
+
+		<p class="desc">
+      Se si è importato con successo un oggetto 3D animato (non importa se ha ossa o target morph o entrambi)
+      - per esempio esportandolo da Blender con [link:https://github.com/KhronosGroup/glTF-Blender-IO l'exporter glTF Blender] e caricandolo
+      nella scena three.js usando [page:GLTFLoader] - uno dei campi di risposta dovrà essere un array chiamato "animations", contenente
+      gli [page:AnimationClip AnimationClips] per questo modello (vedi l'elenco dei possibili loader qui sotto).<br /><br />
+
+      Ogni `AnimationClip` contiene solitamente i dati per una certa attività dell'oggetto. Se la mesh è un personaggio,
+      per esempio, ci può essere un AnimationClip per la camminata, un altro per il salto e un terzo per il salto laterale e così via.
+		</p>
+
+		<h3>Keyframe Tracks</h3>
+
+		<p class="desc">
+      All'interno di un `AnimationClip` i dati, per ogni propietà di animazione, sono memorizzati in un [page:KeyframeTrack] separato.
+      Supponendo che un oggetto personaggio abbia uno [page:Skeleton scheletro], un keyframe track potrebbe memorizzare i dati relativi alle variazioni di 
+      posizione dell'osso inferiore del braccio nel tempo, un'altra traccia potrebbe memorizzare i dati relativi alle variazioni di rotazione dello stesso osso,
+      una terza traccia la posizione, la rotazione e la scala di un altro osso e così via. Dovrebbe essere chiaro, che un AnimationClip può essere composto
+      da molte tracce di questo tipo.<br /><br />
+
+      Supponendo che il modello abbia dei target morph (per esempio un target morph che mostra una faccia amichevole e un altro che mostra una faccia arrabbiata),
+      ogni traccia contiene le informazioni su come l'influenza di un certo target morph cambia durante l'esecuzione del clip.
+		</p>
+
+		<h3>Mixer di Animazioni</h3>
+
+		<p class="desc">
+      I dati memorizzati costituiscono solo la base per le animazioni - la riproduzione vera e propria è controllata dall'[page:AnimationMixer].
+      È possibile immaginarlo non solo come un lettore di animazioni, ma come un simulatore di un hardware come una vera e propria console di mixaggio,
+      che può controllare diverse animazioni simultaneamente, mescolandole e fondendole.
+		</p>
+
+		<h3>Azioni di Animazioni</h3>
+
+		<p class="desc">
+      Lo stesso `AnimationMixer` ha pochissime proprietà e metodi (generali), perché può essere controllato dall'[page:AnimationAction AnimationActions].
+      Per configurare un `AnimationAction` è necessario specificare quando un `AnimationClip` deve essere eseguito, messo in pausa o stoppato su uno dei mixer, 
+      se e con quale frequenza la clip deve essere ripetuta, se deve essere eseguita con una dissolvenza o una scala temporale e altre cose aggiuntive come 
+      dissolvenza incrociata o sincronizzazione. 
+		</p>
+
+		<h3>Gruppi di oggetti Animati</h3>
+
+		<p class="desc">
+      Se si desidera che un gruppo di oggetti riceva uno stato di animazione condiviso, è possibile utilizzare un [page:AnimationObjectGroup].
+		</p>
+
+		<h3>Formati supportati e Loader</h3>
+
+		<p class="desc">
+      Si noti che non tutti i formati includono le animazioni (in particolare OBJ non lo fa) e che solo alcuni loader di three.js
+      supportano le sequenze [page:AnimationClip AnimationClip]. Di seguito alcuni che supportano questo tipo di animazioni:
+		</p>
+
+			<ul>
+				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
+				<li>THREE.BVHLoader</li>
+				<li>THREE.ColladaLoader</li>
+				<li>THREE.FBXLoader</li>
+				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
+				<li>THREE.MMDLoader</li>
+			</ul>
+
+		<p class="desc">
+      Si noti che 3ds max e Maya attualmente non possono esportare più animazioni (ovvero animazioni che non si trovano nella stessa timeline)
+      direttamente in un singolo file.
+		</p>
+
+		<h2>Esempio</h2>
+
+		<code>
+		let mesh;
+
+		// Create an AnimationMixer, and get the list of AnimationClip instances
+		const mixer = new THREE.AnimationMixer( mesh );
+		const clips = mesh.animations;
+
+		// Update the mixer on each frame
+		function update () {
+			mixer.update( deltaSeconds );
+		}
+
+		// Play a specific animation
+		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
+		const action = mixer.clipAction( clip );
+		action.play();
+
+		// Play all animations
+		clips.forEach( function ( clip ) {
+			mixer.clipAction( clip ).play();
+		} );
+		</code>
+
+	</body>
+</html>

+ 417 - 0
docs/manual/it/introduction/Color-management.html

@@ -0,0 +1,417 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+		<style>
+			blockquote {
+				font-size: 0.8em;
+				line-height: 1.5em;
+				margin-left: 0;
+				border-left: 4px solid #cccccc;
+				padding: 1em 2em 1em 2em;
+			}
+
+			blockquote p:first-child {
+				margin-top: 0;
+			}
+
+			blockquote p:last-child {
+				margin-bottom: 0;
+			}
+
+			figure {
+				width: 100%;
+				margin: 1em 0;
+				font-style: italic;
+			}
+
+			figure img {
+				width: 100%;
+			}
+
+			figure.float {
+				float: right;
+				max-width: 30%;
+				margin: 1em;
+			}
+
+			@media all and (max-width: 640px) {
+				figure.float {
+					float: none;
+					max-width: 100%;
+				}
+			}
+		</style>
+	</head>
+
+	<body>
+		<h1>Gestione del colore ([name])</h1>
+
+		<h2>Cos'è lo spazio colore?</h2>
+
+		<p>
+			Ogni spazio colore è una collezione di diverse decisioni progettuali,
+			scelte insieme per supportare un'ampia gamma di colori e al contempo
+			soddisfare i vincoli tecnici legati alla precisione e alle tecnologie di
+			visualizzazione. Quando si crea una risorsa 3D, o si assemblano delle
+			risorse 3D insieme in una scena, è importante sapere quali sono queste
+			proprietà e come le proprietà di uno spazio colore si relazionano con
+			altri spazi colore nella scena.
+		</p>
+
+		<figure class="float">
+			<img src="resources/srgb_gamut.png" alt="" />
+			<figcaption>
+				Colori sRGB e il punto di bianco (D65) visualizzati nel diagramma
+				cromatico di riferimento CIE 1931. La regione colorata rappresenta una
+				proiezione 2D della gamma sRGB, che è un volume 3D. Fonte:
+				<a
+					href="https://en.wikipedia.org/wiki/SRGB"
+					target="_blank"
+					rel="noopener"
+					>Wikipedia</a
+				>
+			</figcaption>
+		</figure>
+
+		<ul>
+			<li>
+				<b>Colori primari:</b> I colori primari (rosso, verde, blu) non sono
+				assoluti; vengono selezionati dallo spettro visibile in base ai vincoli
+				di precisione limitata e alla capacità dei dispositivi di
+				visualizzazione disponibili. I colori sono espressi come rapporto tra i
+				colori primari.
+			</li>
+			<li>
+				<b>Punto di bianco:</b> La maggior parte degli spazi colore è progettata
+				in modo tale che una somma equamente ponderata di primari
+				<i>R = G = B</i> appaia priva di colore o "acromatica". L'aspetto dei
+				valori cromatici (come il bianco o il grigio) dipende dalla percezione
+				umana, che a sua volta dipende fortemente dal contesto dell'osservatore.
+				Uno spazio colore specifica il suo "punto di bianco" per bilanciare
+				queste esigenze. Il punto di bianco definito dallo spazio colore sRGB è
+				<a href="https://en.wikipedia.org/wiki/Illuminant_D65" target="_blank"
+					>D65</a
+				>.
+			</li>
+			<li>
+				<b>Funzioni di trasferimento (transfer functions):</b> Dopo aver scelto
+				la gamma cromatica e un modello di colore, dobbiamo ancora definire le
+				mappature ("funzioni di trasferimento") dei valori numerici da/verso lo
+				spazio colore. R = 0,5 rappresenta il 50% in meno di illuminazione
+				fisica rispetto a <i>r = 1,0</i>? O il 50% in meno di luminosità, come
+				percepito da un occhio umano medio? Sono cose diverse e questa
+				differenza può essere rappresentata come una funzione matematica. Le
+				funzioni di trasferimento possono essere <i>lineari</i> o
+				<i>non lineari</i>, a seconda degli obiettivi dello spazio colore. sRGB
+				definisce funzioni di trasferimento non lineari. Queste funzioni sono
+				talvolta approssimate come <i>funzioni gamma</i>, ma il termine "gamma"
+				è ambiguo e dovrebbe essere evitato in questo contesto.
+			</li>
+		</ul>
+
+		Questi tre parametri - colori primari, punto di bianco e funzioni di
+		trasferimento - definiscono uno spazio colore, ognuno scelto per obiettivi
+		specifici. Dopo aver definito i parametri, sono utili alcuni termini
+		aggiuntivi:
+
+		<ul>
+			<li>
+				<b>Modello di colore:</b> Sintassi per identificare numericamente i
+				colori all'interno della gamma cromatica scelta - un sistema di
+				coordinate per i colori. In three.js ci occupiamo principalmente del
+				modello di colore RGB, con tre coordinate
+				<i>r, g, b ∈ [0,1]</i> ("dominio chiuso") o
+				<i>r, g, b ∈ [0,∞]</i> ("dominio aperto") che rappresentano ciascuna una
+				frazione di un colore primario. Altri modelli di colore (HSL, Lab, LCH)
+				sono comunemente utilizzati per il controllo artistico.
+			</li>
+			<li>
+				<b>Gamma di colori:</b> Quando i colori primari e il punto di bianco
+				sono stati scelti, questi rappresentano un volume all'interno dello
+				spettro visibile (un "gamut"). I colori che non rientrano in questo
+				volume ("fuori gamut") non possono essere espressi dai valori RGB del
+				dominio chiuso [0,1]. Nel dominio aperto [0,∞], il gamut è tecnicamente
+				infinito.
+			</li>
+		</ul>
+
+		<p>
+			Consideriamo due spazi colori comuni: [page:SRGBColorSpace] ("sRGB") e
+			[page:LinearSRGBColorSpace] ("Linear-sRGB"). Entrambi usano gli stessi
+			colori primari e lo stesso punto di bianco, e quindi hanno la stessa gamma
+			di colori. Entrambi utilizzano il modello di colore RGB. Sono diversi solo
+			nelle funzioni di trasferimento - Linear-sRGB è lineare rispetto
+			all'intensità della luce fisica, mentre sRGB utilizza le funzioni di
+			trasferimento non lineari di sRGB e si avvicina maggiormente al modo in
+			cui l'occhio umano percepisce la luce e alla reattività dei comuni
+			dispositivi di visualizzazione.
+		</p>
+
+		<p>
+			Questa differenza è importante. I calcoli di illuminazione e altre
+			operazioni di rendering devono generalmente avvenire in uno spazio di
+			colore lineare. Tuttavia, i colori lineari sono meno efficienti da
+			memorizzare in un'immagine o in un framebuffer e non hanno un aspetto
+			corretto quando vengono osservati da un osservatore umano. Di conseguenza,
+			le texture di input e l'immagine finale renderizzata utilizzano
+			generalmente lo spazio di colore sRGB non lineare.
+		</p>
+
+		<blockquote>
+			<p>
+				ℹ️
+				<i
+					><b>ATTENZIONE:</b> Anche se alcuni display moderni supportano gamme
+					più ampie come Display-P3, le API grafiche della piattaforma web si
+					basano in gran parte su sRGB. Le applicazioni che utilizzano three.js
+					oggi utilizzano in genere solo gli spazi colore sRGB e Linear-sRGB.
+				</i>
+			</p>
+		</blockquote>
+
+		<h2>Ruoli degli spazi colore</h2>
+
+		<p>
+			Un flusso di lavoro lineare - richiesto per moderni metodi di rendering -
+			generalmente coinvolge più di uno spazio di colore, ognuno assegnato ad un
+			ruolo specifico. Spazi colore lineari o non lineari sono adatti a ruoli
+			diversi, come spiegato di seguito.
+		</p>
+
+		<h3>Input color space</h3>
+
+		<p>
+			I colori forniti a three.js - dai color picker, dalle texture, dai modelli
+			3D e da altre risorse - hanno ciascuno uno spazio colore associato. Quelli
+			che non sono già nello spazio colore di lavoro Linear-sRGB devono essere
+			convertiti e alle texture deve essere assegnata la corretta assegnazione
+			<i>texture.encoding</i>. Alcune conversioni (per i colori esadecimali e
+			CSS in sRGB) possono essere effettuate automaticamente se la modalità di
+			gestione del colore legacy è disabilitata prima dell'inizializzazione dei
+			colori:
+		</p>
+
+		<code> THREE.ColorManagement.legacyMode = false; </code>
+
+		<ul>
+			<li>
+				<b>Materiali, luci, e shader:</b> I colori nei materiali, nelle luci e
+				negli shader memorizzano i componenti RGB nello spazio colore di lavoro
+				Linear-sRGB.
+			</li>
+			<li>
+				<b>Colori dei vertici:</b> [page:BufferAttribute BufferAttributes]
+				memorizza i componenti RGB nello spazio colore di lavoro Linear-sRGB.
+			</li>
+
+			<li>
+				<b>Colori delle texture:</b> Le [page:Texture Texture] PNG o JPEG
+				contenti informazioni sul colore (come .map o .emissiveMap) usano lo
+				spazio colore sRGB a dominio chiuso, e devono essere annotate con
+				<i>texture.encoding = sRGBEncoding</i>. I formati come OpenEXR (a volte
+				usati per .envMap o .lightMap) utilizzano lo spazio colore Linear-sRGB
+				indicato con <i>texture.encoding = LinearEncoding</i>, e possono
+				contenere valori nel dominio aperto [0,∞].
+			</li>
+			<li>
+				<b>Texture non a colori:</b> Le texture che non memorizzano informazioni
+				relative ai colori (come .normalMap o .roughnessMap) non hanno associato
+				uno spazio colore, e generalmente usano l'annotazione (predefinita)
+				<i>texture.encoding = LinearEncoding</i>. In rari casi, i dati non a
+				colori possono essere rappresentati con altre codifiche non lineari per
+				motivi tecnici.
+			</li>
+		</ul>
+
+		<blockquote>
+			<p>
+				⚠️
+				<i
+					><b>ATTENZIONE:</b> [page:Scene.fog], [page:Scene.background], e
+					[page:WebGLRenderer.setClearColor] sono eccezioni alla regola. Queste
+					proprietà non sono interessate da [page:WebGLRenderer.outputEncoding]
+					e quindi devono memorizzare i componenti RGB nello spazio colore di
+					<u>output</u> del renderer.</i
+				>
+			</p>
+		</blockquote>
+
+		<blockquote>
+			<p>
+				⚠️
+				<i
+					><b>ATTENZIONE:</b> Molti formati per modelli 3D non definiscono
+					correttamente o in modo coerente le informazioni sullo spazio colore.
+					Sebbene three.js tenti di gestire la maggior parte dei casi, i
+					problemi sono spesso con i file con formati meno recenti. Per ottenere
+					un miglior risultato bisogna utilizzare il formato glTF 2.0
+					([page:GLTFLoader]) e prima bisogna testare i modelli 3D in
+					visualizzatori online per confermare che la risorsa stessa sia
+					corretta.
+				</i>
+			</p>
+		</blockquote>
+
+		<h3>Spazio colore di lavoro</h3>
+
+		<p>
+			Rendering, interpolazione e molte altre operazioni devono essere eseguite
+			in uno spazio colore di lavoro lineare, nel quale i componenti RGB sono
+			proporzionali all'illuminazione fisica. In three.js, lo spazio colore di
+			lavoro è Linear-sRGB.
+		</p>
+
+		<h3>Output color space</h3>
+
+		<p>
+			L'output su un dispositivo di visualizzazione, a un'immagine o a un video,
+			può comportare la conversione dallo spazio colore di lavoro Linear-sRGB di
+			dominio aperto a un altro spazio di colore. Questa conversione può essere
+			eseguita nel passaggio di rendering principale
+			([page:WebGLRenderer.outputEncoding]), o durante il post-processing.
+		</p>
+
+		<code>
+			renderer.outputEncoding = THREE.sRGBEncoding; // optional with post-processing
+		</code>
+
+		<ul>
+			<li>
+				<b>Display:</b> I colori scritti in un canvas WebGL per i display devono
+				essere nello spazio colore sRGB.
+			</li>
+			<li>
+				<b>Immagine:</b> I colori scritti su un'immagine devono utilizzare lo
+				spazio colore appropriato per il formato e per il suo uso. Le immagini
+				completamente renderizzate scritte per texture PNG o JPEG generalmente
+				usano lo spazio colore sRGB. Immagini contenenti emissioni, mappe di
+				luce, o altri dati non limitati all'intervallo [0,1] utilizzaranno
+				generalmente lo spazio colore Linear-sRGB a dominio aperto, e un formato
+				immagine compatibile come OpenEXR.
+			</li>
+		</ul>
+
+		<blockquote>
+			<p>
+				⚠️
+				<i
+					><b>ATTENZIONE:</b> I target di rendering possono utilizzare sia sRGB
+					che Linear-sRGB. sRGB utilizza meglio la precisione limitata. Nel
+					dominio chiuso, 8 bit sono sufficienti per sRGB mentre ≥12 (mezzo
+					float) possono essere richiesti per Linear-sRGB. Se gli stadi
+					successivi delle pipeline richiedono un ingresso Linear-sRGB, le
+					conversioni aggiuntive possono avere un piccolo costo in termini di
+					prestazioni.</i
+				>
+			</p>
+		</blockquote>
+
+		<h2>Lavorare con le istanze di THREE.Color</h2>
+
+		<p>
+			I metodi di lettura o modifica delle istanze [page:Color] presuppongono
+			che i dati siano già nello spazio colore di lavoro di three.js,
+			Linear-sRGB. I componenti RGB e HSL sono rappresentazioni dirette dei dati
+			memorizzati dall'istanza Color, e non sono mai convertiti implicitamente.
+			I dati di Color possono essere esplicitamenre convertiti con
+			<i>.convertLinearToSRGB()</i> o <i>.convertSRGBToLinear()</i>.
+		</p>
+
+		<code>
+		// RGB components (no change).
+		color.r = color.g = color.b = 0.5;
+		console.log( color.r ); // → 0.5
+
+		// Manual conversion.
+		color.r = 0.5;
+		color.convertSRGBToLinear();
+		console.log( color.r ); // → 0.214041140
+		</code>
+
+		<p>
+			Con <i>ColorManagement.legacyMode = false</i> impostato (consigliato),
+			alcune conversioni vengono effettuate automaticamente. Poiché i colori
+			esadecimali e CSS sono generalmente sRGB, i metodi [page:Color]
+			convertiranno automaticamente questi input da sRGB a Linear-sRGB nei
+			setter, oppure convertiranno da Linear-sRGB a sRGB quando restituiscono
+			output esadecimali o CSS dai getter.
+		</p>
+
+		<code>
+		// Hexadecimal conversion.
+		color.setHex( 0x808080 );
+		console.log( color.r ); // → 0.214041140
+		console.log( color.getHex() ); // → 0x808080
+
+		// CSS conversion.
+		color.setStyle( 'rgb( 0.5, 0.5, 0.5 )' );
+		console.log( color.r ); // → 0.214041140
+
+		// Override conversion with 'colorSpace' argument.
+		color.setHex( 0x808080, LinearSRGBColorSpace );
+		console.log( color.r ); // → 0.5
+		console.log( color.getHex( LinearSRGBColorSpace ) ); // → 0x808080
+		console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
+		</code>
+
+		<h2>Errori comuni</h2>
+
+		<p>
+			Quando un singolo colore o una texture non sono configurati correttamente,
+			apparirà più scuro o più chiaro del previsto. Quando lo spazio colore di
+			output del renderer non è configurato correttamente, l'intera scena
+			potrebbe essere più scura (ad es. manca la conversione ad sRGB) o più
+			chiara (ad es. una doppia conversione a sRGB con post-processing). In ogni
+			caso il problema potrebbe non essere uniforme e semplicemente
+			aumentare/dimunire la luminosità non lo risolverebbe.
+		</p>
+
+		<p>
+      Un problema più sottile si verifica quando <i>entrambi</i> lo spazio colore di
+      input e quello di output non sono corretti - i livelli di luminosità complessivi
+      potrebbero andare bene, ma i colori potrebbero cambiare in modo imprevisto in 
+      condizioni di illuminazione diversa o l'ombreggiatura potrebbe apparire più sbiadita 
+      e meno morbida del previsto. Questi due errori non fanno una cosa giusta, ed è importante
+      che lo spazio colore di lavoro sia lineare ("riferito alla scena") e che lo spazio di colore 
+      dell'output sia non lineare ("riferito alla visualizzazione").
+		</p>
+
+		<h2>Ulteriori letture</h2>
+
+		<ul>
+			<li>
+				<a
+					href="https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear"
+					target="_blank"
+					rel="noopener"
+					>GPU Gems 3: The Importance of Being Linear</a
+				>, di Larry Gritz and Eugene d'Eon
+			</li>
+			<li>
+				<a
+					href="https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/"
+					target="_blank"
+					rel="noopener"
+					>What every coder should know about gamma</a
+				>, di John Novak
+			</li>
+			<li>
+				<a href="https://hg2dc.com/" target="_blank" rel="noopener"
+					>The Hitchhiker's Guide to Digital Color</a
+				>, di Troy Sobotka
+			</li>
+			<li>
+				<a
+					href="https://docs.blender.org/manual/en/latest/render/color_management.html"
+					target="_blank"
+					rel="noopener"
+					>Color Management</a
+				>, Blender
+			</li>
+		</ul>
+	</body>
+</html>

+ 184 - 0
docs/manual/it/introduction/Creating-a-scene.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Creare una scena ([name])</h1>
+
+		<p>Lo scopo di questa sezione è quello di fornire una breve introduzione di three.js. 
+      Inizieremo impostando una scena con un cubo rotante. 
+      Se sei bloccato e hai bisogno di aiuto, in fondo alla pagina troverai un esempio funzionante.</p>
+
+		<h2>Prima di iniziare</h2>
+
+		<p>Prima di poter utilizzare three.js hai bisogno di un posto dove visualizzarlo. 
+      Salva il seguente codice HTML in un file sul tuo computer insieme ad una copia 
+      di [link:https://threejs.org/build/three.js three.js] nella cartella js/, e aprilo nel browser.</p>
+
+		<code>
+		&lt;!DOCTYPE html&gt;
+		&lt;html&gt;
+			&lt;head&gt;
+				&lt;meta charset="utf-8"&gt;
+				&lt;title&gt;My first three.js app&lt;/title&gt;
+				&lt;style&gt;
+					body { margin: 0; }
+				&lt;/style&gt;
+			&lt;/head&gt;
+			&lt;body&gt;
+				&lt;script src="js/three.js"&gt;&lt;/script&gt;
+				&lt;script&gt;
+					// Il nostro Javascript andrà qui
+				&lt;/script&gt;
+			&lt;/body&gt;
+		&lt;/html&gt;
+		</code>
+
+		<p>Questo è quanto. Tutto il codice seguente va nel tag vuoto &lt;script&gt;.</p>
+
+		<h2>Creare la scena</h2>
+
+		<p>Per poter visualizzare qualsiasi cosa con three.js abbiamo bisogno di tre cose: scena, 
+      telecamera e renderer, in modo da poter renderizzare la scena con la telecamera.</p>
+		
+    <code>
+		const scene = new THREE.Scene();
+		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+
+		const renderer = new THREE.WebGLRenderer();
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		document.body.appendChild( renderer.domElement );
+		</code>
+
+		<p>Spieghiamo un attimo cosa sta succedendo. Abbiamo impostato la scena, la telecamera e il renderer.</p>
+
+		<p>Esistono diverse telecamere in three.js. Per ora usiamo una `PerspectiveCamera`.</p>
+
+		<p>Il primo attributo è il `field of view` (campo visivo). Il FOV è l'estensione della scena che 
+      viene vista sul display in qualsiasi momento. Il valore è espresso in gradi.</p>
+
+		<p>Il secondo attributo è l'`aspect ratio` (rapporto di aspetto). 
+      È quasi sempre consigliabile usare la larghezza dell'elemento divisa per l'altezza, 
+      altrimenti si otterrà lo stesso risultato di quando si riproducono vecchi film su un televisore widescreen - l'immagine appare schiacciata.</p>
+
+		<p>I successivi due attributi sono il piano di ritaglio, `near` (il vicino) e `far` (il lontano). 
+      Ciò significa che gli oggetti più lontani dalla telecamera rispetto al valore `far` o più vicini 
+      rispetto al valore `near` non saranno renderizzati. Non è neccessario preoccuparsi di questo 
+      aspetto adesso, ma potresti voler usare altri valori nella tua applicazione per avere delle prestazioni migliori.</p>
+
+		<p>Il prossimo passo è il renderer. È qui che avviene la magia. Oltre al WebGLRenderer che usiamo qui, 
+      three.js fornisce altri renderer, spesso usati come alternativa per utenti che usano browser più vecchi 
+      o per quelli che, per qualche motivo, non hanno il supporto WebGL. </p>
+
+		<p>Oltre a creare l'istanza del renderer, abbiamo bisogno di impostare le dimensioni con cui vogliamo che l'applicazione venga visualizzata. È una buona idea usare la larghezza e l'altezza dell'area che vogliamo riempire con la nostra applicazione - in questo caso, la larghezza e l'altezza della finestra del browser. Per le applicazioni ad alte prestazioni si possono dare a `setSize` dei valori più piccoli, come `window.innerWidth/2` e `window.innerHeight/2`, che faranno si che l'applicazione venga renderizzata ad una dimensione di un quarto.</p>
+
+		<p>Se si desidera mantenere la dimensione dell'applicazione ma visualizzarla ad una risoluzione minore, è possibile farlo aggiungendo a `setSize` il valore false, corrispondente a `updateStyle` (il terzo parametro). Per esempio, `setSize(window.innerWidth/2, window.innerHeight/2, false)` visualizzerà l'applicazione a metà risoluzione, dato che il &lt;canvas&gt; ha larghezza e altezza del 100%.</p>
+
+		<p>Infine, aggiungiamo l'elemento `renderer` al nostro documento HTML. Si tratta di un elemento &lt;canvas&gt; che il renderer utilizza per visualizzare la scena.</p>
+
+		<p><em>"Va bene, ma dov'è il cubo che ci avevi promesso?"</em> Aggiungiamolo ora.</p>
+
+		<code>
+		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
+		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+		const cube = new THREE.Mesh( geometry, material );
+		scene.add( cube );
+
+		camera.position.z = 5;
+		</code>
+
+		<p>Per creare un cubo abbiamo bisogno di una `BoxGeometry`. Un oggetto che contiene tutti i punti (`vertices`) e le facce (`faces`) del cubo. Lo esploreremo meglio in futuro.</p>
+
+		<p>Oltre alla geometria, abbiamo bisogno di un materiale per colorarla. Three.js mette a disposizione molti materiali, ma per ora ci limiteremo al `MeshBasicMaterial`. Tutti i materiali come parametro accettano un oggetto al cui interno avrà delle proprietà che li verrano applicate. Per mantenere le cose molto semplici, impostiamo solo un attributo di colore verde `0x00ff00`. Questo funziona come i colori nei CSS o in Photoshop (`hex colors`).</p>
+
+		<p>La terza cosa di cui abbiamo bisogno è una `Mesh`. Una mesh è un oggetto che prende una geometria, e le applica un materiale, che possiamo, poi, inserire nella scena e spostare liberamente. </p>
+
+		<p>Per impostazione predefinita, quando chiamiamo `scene.add()`, la cosa che sarà aggiunta verrà posizionata nelle coordinate `(0,0,0)`. In questo modo la telecamera e il cubo si troveranno l'uno dentro l'altro. Per evitare questo inconveniente, è sufficiente spostare la telecamera un po' più in là.</p>
+
+		<h2>Renderizzare la scena</h2>
+
+		<p>Se si copiasse il codice qui sopra nel file HTML creato in precedenza, non si vedrebbe nulla. Questo perché ancora non stiamo visualizzando nulla. Per questo abbiamo bisogno di quello che viene chiamato un ciclo `render o animate`.</p>
+
+		<code>
+		function animate() {
+			requestAnimationFrame( animate );
+			renderer.render( scene, camera );
+		}
+		animate();
+		</code>
+
+		<p>Questa funzione creerà un loop che fa sì che il renderer disegni la scena ogni volta che la scena viene aggiornata 
+      (su uno schermo tipico questo vuol dire 60 volte al secondo). Se sei nuovo nella scrittura di giochi su browser, 
+      potresti dire <em>"perché non creiamo semplicemente un setInterval?"</em> Il fatto è che potremmo ma `requestAnimationFrame` 
+      ha una serie di vantaggi. Forse il più importante è che si interrompe quando l'utente passa ad un'altra scheda del browser, 
+      così da non sprecare la preziosa potenza di elaborazione e la vita della batteria del computer.</p>
+
+		<h2>Animare il cubo</h2>
+
+		<p>Se inserisci tutto il codice sopra nel file che hai creato prima di iniziare, dovresti vedere un box verde. 
+      Rendiamo tutto un po' più interessante ruotandolo.</p>
+
+		<p>Aggiungi quanto segue proprio sopra la chiamata `renderer.render` nella tua funzione `animate`:</p>
+
+		<code>
+		cube.rotation.x += 0.01;
+		cube.rotation.y += 0.01;
+		</code>
+
+		<p>Verrà eseguito per ogni frame (normalmente 60 volte per secondo) e darà al cubo un'animazione di rotazione. 
+      Fondamentalmente, tutto ciò che vuoi spostare o modificare mentre l'applicazione è in esecuzione deve passare 
+      attraverso il ciclo di animazione. Ovviamente, si possono chiamare altre funzioni all'interno di `animate`, 
+      in modo da non avere una funzione con centinaia di righe.</p>
+
+		<h2>Il risultato</h2>
+		<p>Congratulazioni! Hai completato la tua prima applicazione three.js. È semplice, ma da qualche parte devi pur iniziare.</p>
+
+		<p>Il codice completo è disponibile di seguito e come esempio modificabile [link:https://jsfiddle.net/fxurzeb4/ live example]. Giocaci per capire meglio come funziona.</p>
+
+		<code>
+		&lt;!DOCTYPE html&gt;
+		&lt;html&gt;
+			&lt;head&gt;
+				&lt;meta charset="utf-8"&gt;
+				&lt;title&gt;My first three.js app&lt;/title&gt;
+				&lt;style&gt;
+					body { margin: 0; }
+				&lt;/style&gt;
+			&lt;/head&gt;
+			&lt;body&gt;
+				&lt;script src="js/three.js"&gt;&lt;/script&gt;
+				&lt;script&gt;
+					const scene = new THREE.Scene();
+					const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+
+					const renderer = new THREE.WebGLRenderer();
+					renderer.setSize( window.innerWidth, window.innerHeight );
+					document.body.appendChild( renderer.domElement );
+
+					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
+					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+					const cube = new THREE.Mesh( geometry, material );
+					scene.add( cube );
+
+					camera.position.z = 5;
+
+					function animate() {
+						requestAnimationFrame( animate );
+
+						cube.rotation.x += 0.01;
+						cube.rotation.y += 0.01;
+
+						renderer.render( scene, camera );
+					};
+
+					animate();
+				&lt;/script&gt;
+			&lt;/body&gt;
+		&lt;/html&gt;
+		</code>
+	</body>
+</html>

+ 138 - 0
docs/manual/it/introduction/Creating-text.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Creare testo ([name])</h1>
+		<div>
+			<p>
+				Spesso si ha la necessità di utilizzare del testo nella propria applicazione three.js - ecco un paio di modi per farlo.
+			</p>
+		</div>
+
+		<h2>1. DOM + CSS</h2>
+		<div>
+			<p>
+				L'uso dell'HTML è generalmente il modo più facile e veloce per aggiungere testo. Questo è il metodo
+        usato per gli overlay descrittivi in quasi tutti gli esempi di three.js.
+			</p>
+			<p>È possibile aggiungere contenuto ad un div:</p>
+			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
+
+			<p>
+        e usare il markup CSS per posizionare l'elemento in modo assoluto, in una posizione sopra tutti gli altri elementi
+        con la proprietà z-index, specialmente se three.js viene eseguito in modalità full screen.
+			</p>
+
+			<code>
+#info {
+	position: absolute;
+	top: 10px;
+	width: 100%;
+	text-align: center;
+	z-index: 100;
+	display:block;
+}
+			</code>
+
+		</div>
+
+		
+		<h2>2. Usare [page:CSS2DRenderer] o [page:CSS3DRenderer]</h2>
+		<div>
+			<p>
+				Questi renderer vengono utilizzati per disegnare testo di alta qualità all'interno di elementi del DOM nella scena three.js.
+        Questo metodo è simile al punto 1 eccetto per il fatto che con questi renderer è possibile integrare più facilmente e dinamicamente gli elementi nella scena three.js.
+			</p>
+		</div>
+		
+
+		<h2>3. Disegnare il testo nel canvas e usarlo come [page:Texture]</h2>
+		<div>
+			<p>Utilizza questo metodo se desideri disegnare testo facilmente su un piano nella scena three.js.</p>
+		</div>
+
+
+		<h2>4. Disegnare un modello nella tua applicazione 3D preferita ed esportarlo in three.js</h2>
+		<div>
+			<p>Utilizza questo metodo se preferisci lavorare con la tua applicazione 3D e importare i modelli in three.js.</p>
+		</div>
+
+
+		<h2>5. Text Geometry Procedurale</h2>
+		<div>
+			<p>
+				Se preferisci lavorare solo in three.js o creare geometrie di testo 3D dinamiche e procedurali, è possibile creare una mesh che abbia come geometria
+        un'istanza di THREE.TextGeometry:
+			</p>
+			<p>
+				<code>new THREE.TextGeometry( text, parameters );</code>
+			</p>
+      <p>
+				In modo tale che questo funzioni correttamente, TextGeometry necessita che un'istanza di THREE.Font venga impostata come valore del parametro "font".
+        Per avere maggiori informazioni su come implementare questo metodo, consulta la pagina [page:TextGeometry], contenente la descrizione di ogni
+        parametro che la classe accetta e una lista di font JSON che vengono forniti con la distribuzione di three.js. 
+			</p>
+
+			<h3>Esempi</h3>
+
+			<p>
+				[example:webgl_geometry_text WebGL / geometry / text]<br />
+				[example:webgl_shadowmap WebGL / shadowmap]
+			</p>
+
+      <p>
+        TextGeometry utilizza i font generati da <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.json</a>.
+				Se Typeface è inattivo, o si preferisce usare un font che non è presente, esiste un tutorial che mostra come con uno script python
+        per blender è possibile esportare il testo nel formato JSON di Three.js:
+				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
+			</p>
+
+		</div>
+
+
+		<h2>6. Font Bitmap</h2>
+		<div>
+			<p>
+				BMFont (font bitmap) consente di raggruppare glyphs in un unico BufferGeometry. Il rendering di BMFont
+				supporta il word-wrapping, letter spacing, kerning, signed distance fields with standard derivatives, multi-channel signed distance fields, multi-texture fonts, ed altro ancora.
+				Per saperne di più consulta [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] o [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
+			</p>
+			<p>
+				I font sono disponibili in progetti come
+				[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], o puoi creare il tuo personale partendo da qualsiasi font .TTF, 
+        ottimizzazione per includere solo caratteri richiesti per il progetto.
+			</p>
+			<p>
+				Alcuni strumenti utili:
+			</p>
+			<ul>
+				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
+				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(commandline)</i></li>
+				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop app)</i></li>
+			</ul>
+		</div>
+
+
+		<h2>7. Troika Text</h2>
+		<div>
+			<p>
+				Il pacchetto [link:https://www.npmjs.com/package/troika-three-text troika-three-text] esegue il rendering
+        del testo con antialias utilizzando una tecnica simile a BMFont, ma funziona direttamente con font di tipo .TTF o .WOFF
+        in modo da non dover pregenerare una texture glyph offline. Ha anche altre funzionalità, tra cui:
+			</p>
+			<ul>
+				<li>Effetti come pennellate, ombreggiature e curvature</li>
+				<li>La capacità di applicare qualsiasi materiale three.js, anche un ShaderMaterial personalizzato</li>
+				<li>Supporto per le legature dei font, script con lettere unite e il layout da destra-a-sinistra/bidirezionale</li>
+				<li>Ottimizzazione per grandi quantità di testo dinamico, eseguendo la maggior parte del lavoro fuori dal thread principale in un web worker</li>
+			</ul>
+		</div>
+
+
+	</body>
+</html>

+ 64 - 0
docs/manual/it/introduction/Drawing-lines.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Disegnare linee ([name])</h1>
+		<div>
+      <p>
+				Diciamo che tu voglia disegnare una linea o un cerchio, non un wireframe [page:Mesh].
+        Prima bisogna impostare il [page:WebGLRenderer renderer], la [page:Scene scene] e la camera (vedi la pagina Creare una scena).
+			</p>
+
+			<p>Di seguito il codice che utilizzeremo:</p>
+			<code>
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+document.body.appendChild( renderer.domElement );
+
+const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
+camera.position.set( 0, 0, 100 );
+camera.lookAt( 0, 0, 0 );
+
+const scene = new THREE.Scene();
+			</code>
+			<p>La prossima cosa da fare è definire il materiale. Per le linee possiamo usare [page:LineBasicMaterial] o [page:LineDashedMaterial].</p>
+			<code>
+//crea una LineBasicMaterial blu
+const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
+			</code>
+
+			<p>
+				Dopo la definizione del materiale abbiamo bisogno di una geometria con alcuni vertici:
+			</p>
+
+			<code>
+const points = [];
+points.push( new THREE.Vector3( - 10, 0, 0 ) );
+points.push( new THREE.Vector3( 0, 10, 0 ) );
+points.push( new THREE.Vector3( 10, 0, 0 ) );
+
+const geometry = new THREE.BufferGeometry().setFromPoints( points );
+			</code>
+
+			<p>Da notare che le linee vengono tracciate tra ogni coppia consecutiva di vertici, ma non tra il primo e l'ultimo vertice (la linea non è chiusa).</p>
+
+			<p>Ora che abbiamo i punti per due linee e un materiale, possiamo unirli per formare una linea.</p>
+			<code>
+const line = new THREE.Line( geometry, material );
+			</code>
+			<p>Non resta che aggiungerlo alla scena e chiamare il [page:WebGLRenderer.render render].</p>
+
+			<code>
+scene.add( line );
+renderer.render( scene, camera );
+			</code>
+
+			<p>Ora dovresti vedere una freccia che punta verso l'alto formata da due linee blu.</p>
+		</div>
+	</body>
+</html>

+ 64 - 0
docs/manual/it/introduction/FAQ.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>FAQ ([name])</h1>
+
+		<h2>Qual è il formato per i modelli 3D meglio supportato?</h2>
+		<div>
+			<p>
+        Il formato raccomandato per importare ed esportare modelli 3D è il glTF (GL Transmission Format). 
+        Poiché è focalizzato sulla distribuzione di risorse in runtime, è compatto da trasmettere e veloce da caricare. 
+			</p>
+			<p>
+        Three.js mette a disposizione loader per molti altri formati popolari come FBX, Collada o OBJ.
+        Tuttavia, si dovrebbe, nei propri progetti, sempre cercare di stabilire prima un flusso di lavoro basato su glTF.
+        Per maggiori informazioni consultare la guida sul [link:#manual/introduction/Loading-3D-models caricamento dei modelli 3D].
+			</p>
+		</div>
+
+		<h2>Perché negli esempi sono presenti meta tag viewport?</h2>
+		<div>
+				<code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
+
+				<p>Questi tag controllano le dimensioni e la scala del viewport per i browser su mobile (dove il contenuto della pagina può essere visualizzato con dimensioni diverse rispetto al viewport).</p>
+
+				<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Usare il Viewport]</p>
+
+				<p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Usare il meta tag viewport]</p>
+		</div>
+
+		<h2>Come si può conservare la scala della scena durante il ridimensionamento?</h2>
+		<p>
+      Vogliamo che tutti gli oggetti indipendentemente dalla loro distanza dalla camera, siano visualizzati con le stesse dimensioni anche se la finestra viene ridimensionata.
+
+      L'equazione chiave per risolvere questo problema è data da questa formula per l'altezza visibile ad una data distanza:
+
+			<code>
+visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
+			</code>
+      Se aumentiamo l'altezza della finestra di una certa percentuale, vogliamo che l'altezza visibile a tutte le distanze aumenti della stessa percentuale.
+
+      Questo non può essere fatto cambiando la posizione della camera. È invece necessario modificare il valore del campo visivo (fov) della camera.
+			[link:http://jsfiddle.net/Q4Jpu/ Esempio].
+		</p>
+
+		<h2>Perché una parte del mio oggetto è invisibile?</h2>
+		<p>
+      Questo comportamento può essere causato dal "face culling" (eliminazione delle facce). Le facce hanno un orientamento che decide quale lato è quello giusto.
+      E il culling (eliminazione) rimuove il lato posteriore in circostanze normali. Per verificare se il problema è questo cambia la proprietà side del materiale con THREE.DoubleSide.
+
+			<code>material.side = THREE.DoubleSide</code>
+		</p>
+
+		<h2>Perché three.js a volte restituisce strani risultati per input non validi?</h2>
+		<p>
+      Per ragioni di performance three.js nella maggior parte dei casi non convalida gli input. È responsabilità della tua applicazione di controllare i dati che vengono passati a three.js.
+		</p>
+	</body>
+</html>

+ 79 - 0
docs/manual/it/introduction/How-to-create-VR-content.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<base href="../../../" />
+	<script src="page.js"></script>
+	<link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+	<h1>Come creare contenuti VR ([name])</h1>
+
+	<p>
+    Questa guida fornisce una breve panoramica sui componenti di base di un'applicazione VR basata sul web realizzata con three.js.
+	</p>
+
+	<h2>Workflow</h2>
+
+	<p>
+    Prima di tutto devi includere [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js] nel tuo progetto.
+	</p>
+
+	<code>
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+	</code>
+
+	<p>
+    *VRButton.createButton()* fa due cose importanti: Crea un bottone per indicare la compatibilità con il VR.
+    Inoltre, se l'utente attiva il bottone, viene avviata una sessione VR. L'unica cosa che devi fare è aggiungere la seguente
+    linea di codice al tuo progetto.
+	</p>
+
+	<code>
+document.body.appendChild( VRButton.createButton( renderer ) );
+	</code>
+
+	<p>
+    Successivamente, hai bisogno di dire alla tua istanza di `WebGLRenderer` di abilitare il rendering XR.
+	</p>
+
+	<code>
+renderer.xr.enabled = true;
+	</code>
+
+	<p>
+    Infine, devi regolare il ciclo di animazione poiché non possiamo utilizzare la nota funzione *window.requestAnimationFrame()*.
+    Per i progetti VR viene utilizzato il metodo [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
+    Il codice minimo si presenta così:
+	</p>
+
+	<code>
+renderer.setAnimationLoop( function () {
+
+	renderer.render( scene, camera );
+
+} );
+	</code>
+
+	<h2>Prossimi passi</h2>
+
+	<p>
+    Dai un'occhiata ad uno degli esempi ufficiali di WebVR per vedere questo flusso di lavoro in azione. <br /><br />
+
+		[example:webxr_vr_ballshooter WebXR / VR / ballshooter]<br />
+		[example:webxr_vr_cubes WebXR / VR / cubes]<br />
+		[example:webxr_vr_dragging WebXR / VR / dragging]<br />
+		[example:webxr_vr_paint WebXR / VR / paint]<br />
+		[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
+		[example:webxr_vr_panorama WebXR / VR / panorama]<br />
+		[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
+		[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
+		[example:webxr_vr_sculpt WebXR / VR / sculpt]<br />
+		[example:webxr_vr_video WebXR / VR / video]
+	</p>
+
+</body>
+
+</html>

+ 124 - 0
docs/manual/it/introduction/How-to-dispose-of-objects.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<base href="../../../" />
+	<script src="page.js"></script>
+	<link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+	<h1>Come liberare le risorse ([name])</h1>
+
+	<p>
+    Un aspetto importante per migliorare le prestazioni ed evitare perdite di memoria nella tua applicazione è l'eliminazione delle entità della libreria non utilizzate.
+    Ogni volta che viene creata un'istanza di un tipo *three.js*, viene allocata una certa quantità di memoria. Tuttavia, *three.js* crea per oggetti specifici
+    come le geometrie o i materiali, entità correlate WebGL, come buffer o programmi shader, necessari per il rendering. È importante sottolineare che
+    questi oggetti non vengono rilasciati automaticamente. Invece, l'applicazione utilizza una speciale API per liberare tali risorse. Questa guida fornisce
+    una breve panoramica su come l'API viene utilizzata e quali oggetti sono rilevanti in questo contesto.
+	</p>
+
+	<h2>Geometrie</h2>
+
+	<p>
+    Una geometria solitamente rappresenta le informazioni sui vertici come una collezione di attributi. *three.js* internamente crea un oggetto di tipo [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer]
+    per ogni attributo. Queste entità vengono cancellate solo se viene chiamato il metodo [page:BufferGeometry.dispose](). Se una geometria, nella tua applicazione,
+    diventa obsoleta, esegui questo metodo per liberare tutte le risorse correlate.
+	</p>
+
+	<h2>Materiali</h2>
+
+	<p>
+    Un materiale definisce come sono visualizzati gli oggetti. *three.js* utilizza le informazioni di una definizione di materiale per costruire un programma shader per il rendering.
+    I programmi shader possono essere cancellati solo se il respettivo materiale è eliminato. Per ragioni di prestazioni, *three.js* prova, se possibile, a riutilizzare 
+    il programma shader già esiste. Quindi un progamma di shader può essere cancellato solo se tutti i relativi materiali sono eliminati. Puoi eseguire l'eliminazione
+    di un materiale eseguendo il metodo [page:Material.dispose]().
+	</p>
+
+	<h2>Texture</h2>
+
+	<p>
+    L'eliminazione di un materiale non ha effetti sulle texture. Queste vengono gestite separatamente, poiché una singola texture può essere usata da più materiali contemporaneamente.
+    Ogni volta che crei un'istanza di [page:Texture], three.js internamente crea un'istanza di [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture].
+    Come per i buffer, questo oggetto può essere eliminato  solo chiamando il metodo[page:Texture.dispose]().
+	</p>
+
+	<p>
+    Se stai usando `ImageBitmap` come origine dati della texture, devi chiamare il metodo [link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close ImageBitmap.close]() a livello applicativo per liberare le risorse lato CPU.
+    Una chiamata automatica di `ImageBitmap.close()`in [page:Texture.dispose]() non è possibile, poiché il bitmap dell'immagine diventa inutilizzabile, e l'engine non ha modo di sapere se il bitmap dell'immagine è utilizzata da altre parti.
+	</p>
+
+	<h2>Render Target</h2>
+
+	<p>
+    Oggetti di tipo [page:WebGLRenderTarget] non allocano solo un'istanza di [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] ma anche 
+    di [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer] e di [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer]
+    per realizzare destinazioni di rendering personalizzate. Questi oggetti vengono solo deallocati eseguendo il metodo [page:WebGLRenderTarget.dispose]().
+	</p>
+
+	<h2>Varie</h2>
+
+	<p>
+    Ci sono altre classi nella cartella degli esempi come i control o passaggi di post-processing che forniscono metodi `dispose()` per rimuovere i listener di eventi interni o 
+    renderizzare i target. In generale, viene raccomandato di controllare le API o la documentazione della classe e controllare il metodo `dispose()`. Se presente dovresti utilizzarlo per liberare le risorse.
+	</p>
+
+	<h2>FAQ</h2>
+
+	<h3>Perché *three.js* non può eliminare gli oggetti automaticamente?</h3>
+
+	<p>
+    Questa domanda è stata fatta spesso dalla community, quindi è importante chiarire la questione. Il fatto è che *three.js* non conosce il ciclo di vita o lo scopo 
+    delle entità create dall'utente come le geometrie o i materiali, questa è una responsabilità dell'applicazione. Per esempio, anche se un materiale non è momentamenente utilizzato per il 
+    rendering, potrebbe essere necessario per il prossimo frame. Quindi se l'applicazione decide che un determianto oggetto può essere cancellato lo notifica all'engine tramite la chiamata 
+    al rispettivo metodo `dispose()`.
+	</p>
+
+	<h3>La rimozione di una mesh dalla scena elimina anche la sua geometria e il suo materiale?</h3>
+
+  <p>
+		No, devi eliminare esplicitamente la geometria e il materiale chiamando il metodo *dispose()*. Tieni a mente che le geometrie e i materiali possono essere condivisi tra oggetti 3D come le mesh.
+	</p>
+
+	<h3>*three.js* fornisce informazioni sulla quantità di oggetti memorizzati nella cache?</h3>
+  
+	<p>
+    Si, è possibile consultare [page:WebGLRenderer.info]. Una proprietà speciale del renderer con una serie di informazioni statistiche sulla memoria della scheda grafica
+    e il processo di rendering. Tra le altre cose, riporta anche quante texture, geometrie e programmi shader sono internamente memorizzati. Se noti che ci sono problemi 
+    di performance nell'applicazione, è una buona idea debuggare questa proprietà per identificare facilmente se c'è una perdita di memoria.
+	</p>
+
+	<h3>Che cosa succede quando il metodo `dispose()` viene chiamato su una texture ma l'immagine non è ancora stata caricata?</h3>
+
+	<p>
+    Le risorse interne di una texture vengono allocate solo se l'immagine è caricata con successo. Se elimini una texture prima che l'immagine venga caricata
+    non succede niente. Nessuna risorsa è stata allocata, quindi niente deve essere pulito.
+	</p>
+
+	<h3>Cosa succede quando chiamo `dispose()` e poi utilizzo il rispettivo oggetto in un secondo momento?</h3>
+
+	<p>
+    Le risorse interne che sono state cancellate saranno ricreate dall'engine, in questo modo non ci saranno errori a runtime. Probabilmente, però, noterai un impatto negativo sulle performance nel 
+    frame corrente quando il programma shader sarà compilato.
+	</p>
+
+	<h3>Come devo gestire gli oggetti *three.js* nella mia app? Quando so che devo eliminare le risorse?</h3>
+
+	<p>
+    In generale non c'è una raccomandazione definitiva per questo. Dipende molto dal caso d'uso specifico. È importante sottolineare che non è sempre necessario 
+    eliminare oggetti tutto il tempo. Un buon esempio esemplificativo è un gioco a più livelli. Un buon momento per eliminare gli oggetti è quando viene cambiato il livello.
+    L'applicazione può attraversare tutta la vecchia scena (livello) ed eliminare tutti i vecchi materiali, geometrie e texture. Come accennato nella sezione precedente,
+    se viene cancellato un oggetto che è attualmente in uso non produce un errore a runtime. La cosa peggiore che può accadere è un calo delle prestazioni in un singolo frame. 
+	</p>
+
+	<h2>Esempi che mostarno l'uso del metodo dispose()</h2>
+
+	<p>
+		[example:webgl_test_memory WebGL / test / memory]<br />
+		[example:webgl_test_memory2 WebGL / test / memory2]<br />
+	</p>
+
+</body>
+
+</html>

+ 167 - 0
docs/manual/it/introduction/How-to-run-things-locally.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Esecuzione in locale ([name])</h1>
+    <p>
+      Se si usano solo geometrie procedurali e non si caricano texture, le pagine web dovrebbero funzionare direttamente
+      dal file system, basta fare doppio click sul file HTML in un file manager e la pagina dovrebbe apparire funzionante nel browser
+      (si vedrà <em>file:///yourFile.html</em> nella barra degli indirizzi del browser).
+		</p>
+
+		<h2>Contenuto caricato da file esterni</h2>
+		<div>
+       <p>
+				Se si caricano modelli o texture da file esterni, a causa delle restrizioni di sicurezza del [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy] del browser,
+        il caricamento da un file system fallirà con un'eccezione di sicurezza.
+		 	</p>
+
+      <p>
+				Per risolvere questo problema, conviene eseguire i file da un server locale. Questo permette di accedere alla pagina come:
+			</p>
+			
+			<p>
+				<code>http://localhost/yourFile.html</code>
+			</p>
+
+      <p>
+        Anche se è possibile cambiare le impostazioni di sicurezza del browser invece di lanciare un server in locale,
+        non lo raccomandiamo. Utilizzando questo approccio si potrebbe esporre il proprio dispositivo a molte vulnerabilità soprattutto se
+        lo stesso browser viene utilizzato per la regolare navigazione sul web. Usare un server locale è una pratica standard nello sviluppo
+        web. Qui sotto, spieghiamo come si installa e utilizza un server locale.
+			</p>
+		</div>
+
+
+		<h2>Eseguire un server locale</h2>
+		<div>
+      <p>
+				Molti linguaggi di programmazione hanno semplici server HTTP integrati. Non sono completi come i server di produzione 
+        come ad esempio [link:https://www.apache.org/ Apache] o [link:https://nginx.org NGINX], ma sono sufficienti per testare la tua applicazione three.js. 
+			</p>
+
+			<h3>Plugin per i principali editor</h3>
+			<div>
+				<p>Alcuni editor hanno plugin che genereranno un semplice server su richiesta.</p>
+				<ul>
+					<li>[link:https://marketplace.visualstudio.com/items?itemName=yandeu.five-server Five Server] per Visual Studio Code.</li>
+					<li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] per Visual Studio Code.</li>
+					<li>[link:https://atom.io/packages/atom-live-server Live Server] per Atom.</li>
+				</ul>
+			</div>
+
+			<h3>Servez</h3>
+			<div>
+				<p>
+					[link:https://greggman.github.io/servez Servez] è un semplice server con GUI.
+				</p>
+			</div>
+
+			<h3>Node.js five-server</h3>
+			<div>
+				<p>Server di sviluppo con un reload in tempo reale. Installazione:</p>
+				<code>
+# Eliminare live-server (se è presente)
+npm -g rm live-server
+
+# Installare five-server
+npm -g i five-server
+
+# Aggiornare five-server (di volta in volta)
+npm -g i five-server@latest
+				</code>
+
+				<p>Esecuzione (dalla tua cartella locale):</p>
+				<code>five-server . -p 8000</code>
+			</div>
+
+			<h3>Node.js http-server</h3>
+			<div>
+				<p>Node.js ha un semplice server HTTP. Installazione:</p>
+				<code>npm install http-server -g</code>
+
+				<p>Esecuzione (dalla tua cartella locale):</p>
+				<code>http-server . -p 8000</code>
+			</div>
+
+			<h3>Python server</h3>
+			<div>
+        <p>
+					Se hai installato [link:http://python.org/ Python], dovrebbe essere sufficiente eseguire
+          i seguenti comandi da terminale (dalla cartella di lavoro):
+				</p>
+				<code>
+//Python 2.x
+python -m SimpleHTTPServer
+
+//Python 3.x
+python -m http.server
+				</code>
+
+				<p>Questo servirà i file dalla cartella corrente a localhost sotto la porta 8000, cioè nella barra degli indirizzi digita:</p>
+
+				<code>http://localhost:8000/</code>
+			</div>
+
+			<h3>Ruby server</h3>
+			<div>
+				<p>Se hai installato Ruby, puoi avere lo stesso risultato eseguendo il seguente comando:</p>
+				<code>
+ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
+				</code>
+			</div>
+
+			<h3>PHP server</h3>
+			<div>
+				<p>Anche PHP ha un server web integrato, a partire da php 5.4.0:</p>
+				<code>php -S localhost:8000</code>
+			</div>
+
+			<h3>Lighttpd</h3>
+			<div>
+        <p>
+					Lighttpd è un server web generico molto leggero. Tratteremo l'installazione su OSX con HomeBrew.
+          Diversamente dagli altri server di cui abbiamo discusso qui, lighttpd è un server di produzione completo
+          pronto per la produzione.
+				</p>
+
+				<ol>
+					<li>
+						Installazione tramite homebrew
+						<code>brew install lighttpd</code>
+					</li>
+          <li>
+            Creare un file di configurazione chiamato lighttpd.conf nella cartella in cui vuoi eseguire il server.
+            [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration Qui] trovi un esempio.
+          </li>
+          <li>
+						Nel file di configurazione deve essere cambiato il valore di server.document-root con la directory da cui vuoi servire i file.
+					</li>
+					<li>
+						Avvialo con
+						<code>lighttpd -f lighttpd.conf</code>
+					</li>
+					<li>
+						Inserisci l'indirizzo http://localhost:3000/ nella barra degli indirizzi del browser, questo servirà file statici 
+            dalla cartella che hai scelto.
+					</li>
+				</ol>
+			</div>
+			<h3>IIS</h3>
+			<div>
+				<p>Se usi Microsoft IIS come web server. Per favore aggiungi le impostazioni del MIME type relative all'estensione .fbx prima del caricamento.</p>
+				<code>File name extension: fbx        MIME Type: text/plain</code>
+				<p>Per impostazione predefinita IIS blocca i download di file .fbx, .obj. È necessario configurare IIS per abilitare il download di questo tipo di file</p>
+			</div>
+			<p>
+        Altre semplici alternative sono [link:http://stackoverflow.com/q/12905426/24874 trattate qui] su Stack Overflow.
+			</p>
+		</div>
+
+	</body>
+</html>

+ 223 - 0
docs/manual/it/introduction/How-to-update-things.html

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Come aggiornare le cose ([name])</h1>
+		<div>
+			<p>Tutti gli oggetti di default, automaticamente aggiornano le loro matrici se vengono aggiunti alla scena seguendo il codice qui sotto:</p>
+			<code>
+const object = new THREE.Object3D();
+scene.add( object );
+			</code>
+      o se sono figli di un altro oggetto che è stato aggiunto alla scena:
+			<code>
+const object1 = new THREE.Object3D();
+const object2 = new THREE.Object3D();
+
+object1.add( object2 );
+scene.add( object1 ); // object1 e object2 aggiorneranno automaticamente le loro matrici
+			</code>
+		</div>
+
+		<p>Comunque, se sai che l'oggetto sarà statico, puoi disabilitare questo automatismo e aggiornare manualmente la matrice di trasformazione, solo quando necessario.</p>
+
+		<code>
+object.matrixAutoUpdate = false;
+object.updateMatrix();
+		</code>
+
+		<h2>BufferGeometry</h2>
+		<div>
+			<p>
+        Le BufferGeometry memorizzano le informazioni (come le posizioni dei vertici, gli indici delle facce, le normali, i colori,
+        le coordinate UV, e qualsiasi attributo personalizzato) nel [page:BufferAttribute buffer] - cioè in 
+        [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays array tipizzati].
+        Ciò le rende generalmente più veloci delle Geometry standard, al costo di essere un po' più difficili da lavorare.
+			</p>
+			<p>
+        Per quanto riguarda l'aggiornamento delle BufferGeometry, la cosa più importante da capire è che 
+        il buffer non può essere ridimensionato (questo è molto costoso e basicamente equivalente a creare una nuova geometria).
+        Indipendetemente da questo il contenuto dei buffer può essere comunque aggiornato.
+			</p>
+			<p>
+        Questo significa che se sai che un attributo della BufferGeometry crescerà, ad esempio il numero di vertici,
+        è necessario preallocare un buffer sufficientemente grande per contenere i nuovi vertici che potrebbero essere creati. 
+        Ovviamente, questo significa anche che ci sarà una dimensione massima per la tua BufferGeometry - non è possibile
+        creare una BufferGeometry che possa essere estesa in modo efficiente indefinitamente.
+			</p>
+			<p>
+        Useremo l'esempio di una linea che viene estesa al momento del rendering. Allocheremo spazio nel buffer per contenere 500 vertici
+        ma all'inizio ne disegneremo soltanto due, usando [page:BufferGeometry.drawRange].
+			</p>
+			<code>
+const MAX_POINTS = 500;
+
+// geometry
+const geometry = new THREE.BufferGeometry();
+
+// attributes
+const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
+geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+
+// draw range
+const drawCount = 2; // draw the first 2 points, only
+geometry.setDrawRange( 0, drawCount );
+
+// material
+const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
+
+// line
+const line = new THREE.Line( geometry, material );
+scene.add( line );
+			</code>
+		 	<p>
+        Quindi, aggiungeremo punti alla linea in maniera random usando un pattern come questo:
+			</p>
+			<code>
+const positions = line.geometry.attributes.position.array;
+
+let x, y, z, index;
+x = y = z = index = 0;
+
+for ( let i = 0, l = MAX_POINTS; i < l; i ++ ) {
+
+    positions[ index ++ ] = x;
+    positions[ index ++ ] = y;
+    positions[ index ++ ] = z;
+
+    x += ( Math.random() - 0.5 ) * 30;
+    y += ( Math.random() - 0.5 ) * 30;
+    z += ( Math.random() - 0.5 ) * 30;
+
+}
+			</code>
+			<p>
+				Se vuoi cambiare il <em>numero di punti</em> visualizzati dopo il primo render, procedi come segue;
+			</p>
+			<code>
+line.geometry.setDrawRange( 0, newValue );
+			</code>
+			<p>
+        Se vuoi cambiare i valori dei dati di posizione dopo il primo render, è necessario
+        impostare il flag di needsUpdate come segue:
+			</p>
+			<code>
+line.geometry.attributes.position.needsUpdate = true; // required after the first render
+			</code>
+
+			<p>
+        Se vuoi modificare i valori dei dati di posizione dopo il rendering iniziale, è necessario
+        ricalcolare i volumi di delimitazione (bounding volumes) in modo che altre funzionalità dell'engine
+        come l'eliminazione del frustum di visualizzazione o gli helpers possano funzionare correttamente. 
+			</p>
+			<code>
+line.geometry.computeBoundingBox();
+line.geometry.computeBoundingSphere();
+			</code>
+
+			<p>
+				[link:https://jsfiddle.net/t4m85pLr/1/ Qui un fiddle] che mostra una linea animata che può essere adattata al tuo caso d'uso.
+			</p>
+
+			<h3>Esempi</h3>
+
+			<p>
+				[example:webgl_custom_attributes WebGL / custom / attributes]<br />
+				[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
+			</p>
+
+		</div>
+
+		<h2>Materiali</h2>
+		<div>
+			<p>Tutti i valori costanti possono essere cambiati liberamente (come i colori, le texture, l'opacità, etc), valori che vengono inviati allo shader ad ogni frame.</p>
+
+			<p>Anche i parametri relativi a GLstate possono essere cambiati in qualsiasi momento (depthTest, blending, polygonOffset, etc).</p>
+
+			<p>Invece, le proprietà seguenti non possono essere modificare facilmente in fase di esecuzione (una volta che il materiale è stato renderizzato almeno una volta):</p>
+			<ul>
+				<li>numero e tipi di costanti</li>
+				<li>presenza oppure no di
+					<ul>
+						<li>texture</li>
+						<li>fog</li>
+						<li>vertex colors</li>
+						<li>morphing</li>
+						<li>shadow map</li>
+						<li>alpha test</li>
+						<li>transparent</li>
+					</ul>
+				</li>
+			</ul>
+
+			<p>Le modifiche di questi richiedono la creazione di un nuovo programma di shader. Dovrai impostare:</p>
+			<code>material.needsUpdate = true</code>
+
+			<p>Tieni presente che questa operazione potrebbe essere piuttosto lenta e causare scatti nel framerate (specialmente su Windows, poiché la compilazione degli shader è più lenta in DirectX che in OpenGL).</p>
+
+			<p>Per creare un'esperienza più fluida puoi emulare in una certa misura le modifiche a queste funzionalità avendo valori "fittizi" come luci ad intensità zero, texture bianche, o fog a zero densità.</p>
+
+			<p>È possibile cambiare liberamente il materiale utilizzato per i blocchi di geometria, tuttavia non è possibile modificare il modo in cui un oggetto è diviso in blocchi (in base ai materiali della faccia).</p>
+
+			<h3>Se è necessario disporre di diverse configurazioni dei materiali durante l'esecuzione:</h3>
+			<p>Se il numero di materiali / blocchi è piccolo, puoi dividere l'oggetto in anticipo (per esempio capelli / faccia / corpo / vestiti superiori / pantaloni per un umano / davanti / dietro / parte superiore / occhiali / pneumatico / interni di una macchina). </p>
+
+			<p>Se, invece, il numero è grande (per esempio, ogni faccia potrebbe essere potenzialmente diversa), considera una soluzione divera, come usare attributi / texture per ottenere un aspetto diverso per faccia.</p>
+
+			<h3>Esempi</h3>
+			<p>
+				[example:webgl_materials_car WebGL / materials / car]<br />
+				[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
+			</p>
+		</div>
+
+
+		<h2>Texture</h2>
+		<div>
+			<p>Se immagini, canvas, video e texture vengono modificate devono avere il flag <em>needsUpdate</em> impostato come segue:</p>
+			<code>
+				texture.needsUpdate = true;
+			</code>
+			<p>Le destinazioni di rendering si aggiornano automaticamente.</p>
+
+			<h3>Esempi</h3>
+			<p>
+				[example:webgl_materials_video WebGL / materials / video]<br />
+				[example:webgl_rtt WebGL / rtt]
+			</p>
+
+		</div>
+
+
+		<h2>Telecamere</h2>
+		<div>
+			<p>La posizione e il target di una camera vengono aggiornati automaticamente. Se hai bisogno di cambiare</p>
+			<ul>
+				<li>
+					fov
+				</li>
+				<li>
+					aspect
+				</li>
+				<li>
+					near
+				</li>
+				<li>
+					far
+				</li>
+			</ul>
+			<p>
+        dovrai ricalcolare la matrice di proiezione:
+			</p>
+			<code>
+camera.aspect = window.innerWidth / window.innerHeight;
+camera.updateProjectionMatrix();
+			</code>
+		</div>
+	</body>
+</html>

+ 113 - 0
docs/manual/it/introduction/How-to-use-post-processing.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Come utilizzare il post-processing (How to use post-processing)</h1>
+
+		<p>
+      Molte applicazioni 3D visualizzano i loro oggetti 3D direttamente sullo schermo. A volte, tuttavia, si vuole applicare uno o più effetti grafici
+      come Depth-Of-Field, Bloom, Film Grain o vari tipi di Anti-aliasing. Il Post-processing è una soluzione ampiamente utilizzata per implementare questi effetti.
+      Prima di tutto, la scena viene renderizzata su un target di rendering che rappresenta un buffer nella memoria della scheda video.
+      Nella fase successiva, uno o più passaggi di post-processing applicano filtri ed effetti al buffer dell'immagine prima che questa venga infine renderizzata 
+      sullo schermo.
+		</p>
+		<p>
+      three.js fornisce una soluzione di post-processing completa tramite [page:EffectComposer] per implementare tale flusso di lavoro.
+		</p>
+
+		<h2>Workflow</h2>
+
+		<p>
+      Il primo step, nel processo, è quello di importare tutti i file necessari dalla cartella degli esempi. La guida presuppone che si utilizzi 
+      il [link:https://www.npmjs.com/package/three pacchetto npm] ufficiale di three.js. Per la nostra demo di base in questa guida abbiamo 
+      bisogno dei seguenti file:
+		</p>
+
+		<code>
+		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
+		</code>
+
+		<p>
+      Dopo che tutti i file sono stati importati con successo, possiamo creare il nostro composer passandogli un'istanza di [page:WebGLRenderer].
+		</p>
+
+		<code>
+		const composer = new EffectComposer( renderer );
+		</code>
+
+		<p>
+      Quando viene usato un composer è necessario modificare il ciclo di animazine dell'applicazione. Invece di chiamare il metodo render di
+      [page:WebGLRenderer], usiamo la rispettiva controparte di [page:EffectComposer].
+		</p>
+
+		<code>
+		function animate() {
+
+			requestAnimationFrame( animate );
+
+			composer.render();
+
+		}
+		</code>
+
+		<p>
+      Il composer è pronto, ed è possibile configurare la catena di passaggi di post-processing. Questi passaggi sono i responsabili per la creazione
+      dell'output visivo finale dell'applicazione. Vengono elaborati nello stesso ordine in cui sono stati aggiunti/inseriti. Nel nostro esempio, l'istanza
+      di `RenderPass` viene eseguita per prima, poi l'istanza di `GlitchPass`. L'ultimo passaggio abilitato della catena viene automaticamente renderizzato sullo schermo.
+      La configurazione dei passaggi è la seguente:
+		</p>
+
+		<code>
+		const renderPass = new RenderPass( scene, camera );
+		composer.addPass( renderPass );
+
+		const glitchPass = new GlitchPass();
+		composer.addPass( glitchPass );
+		</code>
+
+		<p>
+      `RenderPass` viene normalmente posizionata all'inizio della catena per fornire la scena renderizzata come input per il passaggio successivo di post-processing. 
+      Nel nostro caso `GlitchPass` utilizzarà questi dati di immagine per applicare un effetto glitch selvaggio. Guarda questo [link:https://threejs.org/examples/webgl_postprocessing_glitch esempio live]
+      per vederli in azione.
+		</p>
+
+		<h2>Passi Built-in</h2>
+
+		<p>
+      È possibile utilizzare un'ampia gamma di passaggi di post-processing predefiniti forniti dall'engine. Si possono trovare nella 
+      cartella di [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].
+		</p>
+
+		<h2>Passi personalizzati</h2>
+
+		<p>
+      A volte si desidera scrivere uno shader di post-processing personalizzato e includerlo nella catena dei passi di post-processing.
+      Per questo scenario puoi utilizzare `ShaderPass`. Dopo aver importato il file e lo shader personalizzato, si può usare il seguente codice per 
+      impostare i passaggi:
+		</p>
+
+		<code>
+		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
+		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
+
+		// later in your init routine
+
+		const luminosityPass = new ShaderPass( LuminosityShader );
+		composer.addPass( luminosityPass );
+		</code>
+
+		<p>
+      Il repository fornisce un file chiamato [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader], il quale è un ottimo
+      punto di partenza per il tuo shader personalizzato. `CopyShader` copia semplicemente il contenuto dell'immagine del buffer di lettura dell'[page:EffectComposer]
+      nel buffer di scrittura senza applicare alcun effetto.
+		</p>
+
+	</body>
+</html>

+ 148 - 0
docs/manual/it/introduction/Installation.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Installazione ([name])</h1>
+
+    <p>
+			È possibile installare three.js con [link:https://www.npmjs.com/ npm] e i moderni strumenti di compilazione, o iniziare rapidamente con un hosting statico o un CDN. Per la maggior parte degli utenti fare l'installazione usando npm è la scelta migliore.
+		</p>
+
+    <p>
+			Qualsiasi soluzione venga scelta, sii coerente e importa tutti i file della stessa versione della libreria. 
+      Mescolare file provenienti da fonti diverse può causare l'inclusione di codice duplicato o addirittura rompere l'applicazione in modo imprevisto.
+		</p>
+
+    <p>
+			Tutti i metodi di installazione di three.js dipendono dai moduli ES (vedi [link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent JavaScript: ECMAScript Modules]), i quali permettono di includere nel progetto finale solo le parti della libreria necessarie.
+		</p>
+
+		<h2>Installazione tramite npm</h2>
+
+    <p>
+			Per installare il modulo npm di [link:https://www.npmjs.com/package/three three], apri il terminale nella cartella del progetto ed esegui:
+		</p>
+
+		<code>
+		npm install three
+		</code>
+
+    <p>
+			Il pacchetto verrà scaricato e installato. Quindi sarà pronto per essere importato nel tuo codice:
+		</p>
+
+		<code>
+		// Opzione 1: Importa l'intera libreria di base di three.js
+		import * as THREE from 'three';
+
+		const scene = new THREE.Scene();
+
+
+		// Opzione 2: Importa solo le parti di cui hai bisogno
+		import { Scene } from 'three';
+
+		const scene = new Scene();
+		</code>
+
+    <p>
+			Quando la libreria viene installata da npm, verrà quasi sempre utilizzato uno [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC strumento di bundling] per combinare tutti i pacchetti richiesti dal tuo progetto in un unico file JavaScript. Sebbene con three.js si possa utilizzare qualsiasi moderno strumento di bundling, la scelta più popolare è [link:https://webpack.js.org/ webpack].
+		</p>
+
+		<p>
+			Non tutte le funzioni sono accessibili direttamente attraverso il modulo <em>three</em> (chiamato anche "bare import"). Altre parti popolari della libreria — come i controls, i loaders e gli effetti di post-processing — devono essere importati dalla sottocartella [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Per saperne di più si vedano gli <em>Esempi</em> qui sotto.
+		</p>
+
+    <p>
+			Per saperne di più sui moduli npm, consultare [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installing with npm].
+		</p>
+
+		<h2>Installazione da CDN o hosting statico</h2>
+
+    <p>
+			La libreria three.js può essere usata senza alcun sistema di building, sia caricando i file sul tuo server web o usando un CDN esistente. Poiché la libreria si basa su moduli ES, qualsiasi script che fa riferimento ad essa deve usare <em>type="module"</em> come mostrato di seguito.
+      Inoltre è necessario anche definire un Import Map che risolva il bare module `three`.
+		</p>
+
+		<code>
+		&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js">&lt;/script>
+
+		&lt;script type="importmap">
+		  {
+		    "imports": {
+		      "three": "https://unpkg.com/three@&lt;version&gt;/build/three.module.js"
+		    }
+		  }
+		&lt;/script>
+
+		&lt;script type="module">
+
+		  import * as THREE from 'three';
+
+		  const scene = new THREE.Scene();
+
+		&lt;/script>
+		</code>
+
+		<p>
+      Poiché le mappe di importazione non sono ancora supportate da tutti i browser, è necessario aggiungere il polyfill *es-module-shims.js*.
+		</p>
+
+		<h2>Esempi</h2>
+
+		<p>
+			Il core di three.js è incentrato sui componenti più importanti di un engine 3D. Molti altri componenti utili - come i controls, i loaders e gli effetti post-processing - sono parte della sottocartella [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Vengono definiti "esempi" perché, pur potendo essere utilizzati in modo immediato, sono anche destinati a essere remixati e personalizzati. Questi componenti vengono sempre mantenuti sincronizzati con la libreria principale, mentre i pacchetti di terze parti su npm sono gestiti da persone differenti e potrebbero non essere aggiornati. 
+		</p>
+
+    <p>
+			Non è necessario <em>installare</em> gli esempi separatamente, ma dovranno essere <em>importati</em> separatamente. Se three.js è stato installato con npm, è possibile caricare il componente [page:OrbitControls] con:
+		</p>
+
+		<code>
+		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+		const controls = new OrbitControls( camera, renderer.domElement );
+		</code>
+
+		<p>
+			Se three.js è stato installato da un CDN, usare lo stesso CDN per installare altri componenti:
+		</p>
+
+		<code>
+		&lt;script type="module">
+
+		  import { OrbitControls } from 'https://unpkg.com/three@&lt;version&gt;/examples/jsm/controls/OrbitControls.js';
+
+		  const controls = new OrbitControls( camera, renderer.domElement );
+
+		&lt;/script>
+		</code>
+
+		<p>
+			È importante che tutti i file usino la stessa versione. Non devono essere importati esempi diversi con versioni diverse, o usare esempi che derivano da una versione differente di three.js.
+		</p>
+
+		<h2>Compatibilità</h2>
+
+		<h3>Import CommonJS</h3>
+
+		<p>
+			La maggior parte dei bundler JavaScript moderni supportano i moduli ES di default, ma questo non è detto per bundler più vecchi. In questo caso è possibile configurare il bundler per riconoscere i moduli ES. Ad esempio [link:http://browserify.org/ Browserify] ha solo bisogno del plugin [link:https://github.com/babel/babelify babelify].
+		</p>
+
+		<h3>Node.js</h3>
+
+		<p>
+			Poiché three.js è stato creato per il web, dipende dal browser e dalle API del DOM che non sempre esistono in Node.js. Alcuni di questi problemi possono essere risolti usando dei "tappa buchi" come [link:https://github.com/stackgl/headless-gl headless-gl], o sostituendo i componenti come [page:TextureLoader] con alternative personalizzate. Altre API del DOM potrebbero essere profondamente intrecciate con il codice che le utilizza e potrebbe essere più difficile aggirarle. Accettiamo benvolentieri le pull request semplici e gestibili per migliorare il supporto di Node.js, ma raccomandiamo di aprire prima una issue per discutere dei tuoi miglioramenti.  
+		</p>
+
+		<p>
+			Assicurati di aggiungere `{ "type": "module" }` al tuo `package.json` per abilitare i moduli ES nel tuo progetto Node.
+		</p>
+
+	</body>
+</html>

+ 107 - 0
docs/manual/it/introduction/Libraries-and-Plugins.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Librerie e Plugin ([name])</h1>
+
+		<p class="desc">
+      Di seguito sono elencate librerie e plugin, sviluppati esternamente, compatibili con three.js.
+      Questo elenco e i pacchetti associati sono mantenuti e gestiti dalla community e non è garantito che siano
+      aggiornati. Se vuoi aggiornare questa lista apri una PR!
+		</p>
+
+		<h3>Fisica</h3>
+
+		<ul>
+			<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
+			<li>[link:https://enable3d.io/ enable3d]</li>
+			<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
+			<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
+		</ul>
+
+		<h3>Post-processing</h3>
+
+		<p>
+			Oltre agli [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing effetti di post-processing ufficiali di three.js] 
+      è disponibile tramite librerie esterne il supporto per alcuni effetti e framework aggiuntivi.
+		</p>
+
+		<ul>
+			<li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
+		</ul>
+
+		<h3>Intersezione e Performance Raycast</h3>
+
+		<ul>
+			<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
+		</ul>
+
+		<h3>Path Tracing</h3>
+		
+		<ul>
+			<li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
+		</ul>
+		
+		<h3>File Formats</h3>
+
+		<p>
+      Oltre [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders ai loaders ufficili di three.js], 
+      è disponibile tramite librerie esterne il supporto per alcuni formati aggiuntivi.
+		</p>
+
+		<ul>
+			<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
+			<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
+			<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
+			<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
+		</ul>
+
+		<h3>Geometria</h3>
+
+		<ul>
+			<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
+		</ul>
+
+		<h3>Layout e Testo 3D</h3>
+
+		<ul>
+			<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
+			<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
+		</ul>
+
+		<h3>Sistemi di particelle</h3>
+
+		<ul>
+			<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
+		</ul>
+
+		<h3>Cinematica inversa</h3>
+
+		<ul>
+			<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
+			<li>[link:https://github.com/lo-th/fullik fullik]</li>
+			<li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
+		</ul>
+
+		<h3>Game AI</h3>
+
+		<ul>
+			<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
+			<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
+		</ul>
+
+		<h3>Wrappers e Frameworks</h3>
+
+		<ul>
+			<li>[link:https://aframe.io/ A-Frame]</li>
+			<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber]</li>
+			<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
+		</ul>
+
+	</body>
+</html>

+ 155 - 0
docs/manual/it/introduction/Loading-3D-models.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<base href="../../../" />
+	<script src="page.js"></script>
+	<link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+	<h1>Caricare modelli 3D ([name])</h1>
+
+  <p>
+		I modelli 3D sono disponibili in centinai di formati, ognuno con uno scopo differente, diverse funzioni
+    e complessità varie. Sebbene <a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
+    three.js metta a disposizione molti loader</a>, la scelta del formato e del flusso di lavoro giusti farà risparmiare tempo e frustrazione in seguito. 
+    Con alcuni formati è difficile lavorare, possono essere inefficienti per le esperienze in tempo reale, o semplicemente non supportati al momento.
+	</p>
+
+  <p>
+		Questa guida mette a dispozione un flusso di lavoro consigliato per la maggior parte degli utenti, e dei suggerimenti
+    per affrontare i malfunzionamenti nel caso in cui non funzionasse come ci si aspetta.
+	</p>
+
+	<h2>Prima di iniziare</h2>
+
+	<p>
+		Se siete alle prime armi con la gestione di un server locale, 
+    iniziate prima di tutto a capire [link:#manual/introduction/How-to-run-things-locally come gestire le cose a livello locale].
+    Molti errori comuni nella visualizzazione dei modelli 3D possono essere evitati gestendo correttamente l'hosting dei file.
+	</p>
+
+	<h2>Workflow consigliato</h2>
+
+  <p>
+    Dove possibile, consigliamo di utilizzare il formato glTF (GL Transmission Format).
+    Entrambe le versioni <small>.GLB</small> e <small>.GLTF</small> sono supportate.
+    Il formato glTF è incentrato sulla distribuzione di asset in runtime, è compatto da trasmette e veloce da caricare.
+		Le carattestistiche includono mesh, materiali, texture, skin, skeleton, morph target, animazioni, luci, e camera.
+	</p>
+
+	<p>
+    Modelli glTF pubblici sono disponibili su siti come <a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
+      Sketchfab</a>, o vari strumenti di sviluppo di modelli includono l'esportazione glTF:
+	</p>
+
+	<ul>
+		<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> di the Blender Foundation</li>
+		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> di Allegorithmic</li>
+		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> di Foundry</li>
+		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> di Marmoset</li>
+		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> di SideFX</li>
+		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> di MAXON</li>
+		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a>di the Khronos Group</li>
+		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> di Facebook</li>
+		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> di Analytical Graphics Inc</li>
+		<li>&hellip;e <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">molti altri</a></li>
+	</ul>
+
+	<p>
+    Se i tuoi strumenti preferiti di sviluppo dei modelli, non supportano il formato glTF, 
+    considera di richiedere l'esportazione glTF agli autori, 
+    o di fare un post <a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">sul thread della roadmap di glTF</a>.
+	</p>
+
+	<p>
+    Quando il formato glTF non è disponibile, i formati popolari come FBX, OBJ, o COLLADA
+    sono comunque disponibili e mantenuti regolarmente.
+	</p>
+
+	<h2>Caricamento</h2>
+
+  <p>
+    Solo alcuni loader (ad es. [page:ObjectLoader]) sono inclusi di default con three.js — altri devono essere aggiunti all'applicazione individualmente.
+	</p>
+
+	<code>
+		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+	</code>
+
+	<p>
+    Una volta importato un loader, sei pronto per aggiungere e caricare un modello alla scena. La sintassi 
+    varia a seconda del loader utilizzato - quando vengono utilizzati altri formati, contralla gli esempi e la 
+    documentazione del loader. Per il formato glTF, l'utilizzo con gli script globali sarebbe:
+	</p>
+
+	<code>
+		const loader = new GLTFLoader();
+
+		loader.load( 'path/to/model.glb', function ( gltf ) {
+
+			scene.add( gltf.scene );
+
+		}, undefined, function ( error ) {
+
+			console.error( error );
+
+		} );
+	</code>
+
+	<p>
+		Per maggiori dettagli consulta la [page:GLTFLoader documentazione GLTFLoader].
+	</p>
+
+	<h2>Troubleshooting</h2>
+
+	<p>
+    Hai passato ore a modellare un capolavoro artigianale, lo carichi nella pagina web e — oh no! 😭
+    è distorto, scolorito o mancante.
+    Inizia con questi passaggi per la risoluzione dei problemi:
+	</p>
+
+	<ol>
+		<li>
+      Controlla la console JavaScript per vedere se ci sono errori,
+      ed accertati di aver usato la funzione di callback `onError` del meotodo `.load()`
+      per visualizzare il risultato nella console.
+		</li>
+		<li>
+      Visualizza il modello in un'altra applicazione. Per il formato glTF, sono disponibili visualizzatori drag-and-drop per
+			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> e
+			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. 
+      Se il modello viene visualizzato correttamente in una o più applicazioni,
+      <a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">segnala il bug a three.js</a>.
+      Se il modello non è visualizzabile in nessuna applicazione, incoraggiamo vivamente di segnalare un bug 
+      all'applicazione utilizzata per creare il modello.
+		</li>
+		<li>
+      Prova a scalare il modello verso l'alto o il basso di un fattore di 1000. Molti modelli sono scalati diversamente,
+      e molti modelli di grandi dimensioni non vengono visualizzati se la telecamera si trova all'interno del modello.
+		</li>
+		<li>
+      Prova ad aggiungere e posizionare una luce nella scena. Il modello potrebbe essere nascosto nell'oscurità.
+		</li>
+		<li>
+      Cerca le richieste delle texture fallite nel tab network degli strumenti per sviluppatori del browser, 
+      come `"C:\\Path\To\Model\texture.jpg"`. Utilizza path relativi al tuo modello come `images/texture.jpg` - 
+      ciò potrebbe richiedere una modifica del file del modello in un editor di testo.
+		</li>
+	</ol>
+
+	<h2>Chiedere aiuto</h2>
+
+	<p>
+		Se hai eseguito la procedura di risoluzione dei problemi qui sopra e il tuo modello ancora non funziona,
+    il giusto approccio è chiedere aiuto per una soluzione più veloce. Scrivi una domanda sul 
+    <a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum three.js</a> e, quando possibile, 
+    includi il tuo modello (o un modello più semplice con lo stesso problema) in qualsiasi formato disponibile.
+    Includi informazioni sufficienti per consentire a qualcun altro di riprodurre rapidamente il problema - idealmente, una demo dal vivo.
+	</p>
+
+</body>
+
+</html>

+ 78 - 0
docs/manual/it/introduction/Matrix-transformations.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Trasformazioni di matrici ([name])</h1>
+
+		<p>
+      Three.js utilizza le `matrici` per codificare le trasformazioni 3D, traslazioni (posizione), rotazioni e ridimensionamento. Ogni istanza di [page:Object3D]
+      ha una [page:Object3D.matrix matrice] che memorizza la posizione, la rotazione e il ridimensionamento. Questa pagina descrive come aggiornare la trasformazione 
+      di un oggetto.
+		</p>
+
+		<h2>Proprietà di convenienza e `matrixAutoUpdate`</h2>
+
+		<p>
+      Ci sono due modi per aggiornare la trasformazione di un oggetto:
+		</p>
+		<ol>
+			<li>
+        Modificare le proprietà `position`, `quaternion` e `scale` dell'oggetto e lasciare che three.js ricalcoli la 
+        matrice dell'oggetto da queste proprietà:
+				<code>
+object.position.copy( start_position );
+object.quaternion.copy( quaternion );
+				</code>
+        Per impostazione predefinita, la proprietà `matrixAutoUpdate` è impostata su true e la matrice viene ricalcolata automaticamente.
+        Se l'oggetto è statico, o desideri controllare manualmente quando avviene il ricalcolo, è possibile ottenere prestazioni migliori se la 
+        proprietà è impostata a false.
+				<code>
+object.matrixAutoUpdate = false;
+				</code>
+        E dopo aver modificato le proprietà, aggiornare manualmente la matrice:
+				<code>
+object.updateMatrix();
+				</code>
+			</li>
+			<li>
+        Modificare direttamente la matrice dell'oggetto. La classe [page:Matrix4] possiede vari metodi per modificare la matrice:
+				<code>
+object.matrix.setRotationFromQuaternion( quaternion );
+object.matrix.setPosition( start_position );
+object.matrixAutoUpdate = false;
+				</code>
+				Nota che, in questo caso, `matrixAutoUpdate` <em>deve</em> essere impostata a `false`, e devi essere sicuro di <em>non</em> chiamare `updateMatrix`.
+        La chiamata di `updateMatrix` eliminerà le modifiche manuali apportate alla matrice, ricalcolando la matrice da `position`, `scale`, e così via.
+			</li>
+		</ol>
+
+		<h2>Oggetto e matrici del mondo (world matrices)</h2>
+		<p>
+      La [page:Object3D.matrix matrice] dell'oggetto memorizza la trsformazione dell'oggetto <em>relativa</em> al [page:Object3D.parent genitore] dell'oggetto:
+      per ottenere la trasformazione dell'oggetto nelle coordinate del <em>mondo</em>, è necessario accedere alla [page:Object3D.matrixWorld] dell'oggetto.
+		</p>
+		<p>
+      Quando la trasformazione dell'oggetto padre o dell'oggetto figlio cambia, puoi richiedere che la [page:Object3D.matrixWorld matrixWorld] dell'oggetto
+      figlio venga aggiornata chiamando il metodo [page:Object3D.updateMatrixWorld updateMatrixWorld]().
+		</p>
+
+		<h2>Rotazione e Quaternione</h2>
+		<p>
+      Three.js fornisce due modi per rappresentare le rotazioni 3D: [page:Euler angoli di Eulero] e [page:Quaternion Quaternioni],
+      nonché metodi per la conversione tra i due. Gli angoli di Eulero sono soggetti ad un problema chiamato "gimbal lock", in cui alcune 
+      configurazioni possono perdere un grado di libertà (impedendo all'oggetto di essere ruotato su un asse). Per questo motivo, le 
+      rotazioni degli oggetti sono <em>sempre</em> memorizzate nei [page:Object3D.quaternion quaternioni] dell'oggetto.
+		</p>
+		<p>
+      Le versioni precedenti della libreria includevano una proprietà `useQuaternion` che, se impostata a false, faceva si che la 
+      [page:Object3D.matrix matrix] dell'oggetto fosse calcolata da un angolo di Eulero. Questa pratica è deprecata, si deve invece
+      usare il metodo [page:Object3D.setRotationFromEuler setRotationFromEuler], il quale aggiornerà il quaternione.
+		</p>
+
+	</body>
+</html>

+ 176 - 0
docs/manual/it/introduction/Useful-links.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Link utili ([name])</h1>
+
+		<p class="desc">
+      Quella che segue è una raccolta di link che potresti trovare utili durante lo studio di three.js.<br />
+      Se trovi qualcosa che ti piacerebbe aggiungere a questa lista o se pensi che uno dei link qui sotto non sia rilevante o non funzioni,
+      sentiti libero di modificare la pagina cliccando sul bottone 'edit' in basso a destra.<br /><br />
+
+      Considera anche che, essendo three.js in rapida crescita, molti di questi link conterranno informazioni non aggiornate - 
+      se qualcosa non funziona come ti aspetti o come uno di questi link dice che dovrebbe, controlla la console
+      del browser per verificare la presenza di warning o errori. Controlla anche le pagine dei documenti pertinenti.
+		</p>
+
+		<h2>Forum di supporto</h2>
+		<p>
+      Three.js ufficialmente utilizza il [link:https://discourse.threejs.org/ forum] e [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] per richieste di aiuto.
+      Se hai bisogno di assistenza con qualcosa, questi sono i posti dove andare a chiedere e cercare una soluzione. NON aprire una issue su Github per richieste di aiuto.
+		</p>
+
+		<h2>Corsi e tutorial</h2>
+
+		<h3>Iniziare con three.js</h3>
+		<ul>
+			<li>
+				[link:https://threejs.org/manual/#en/fundamentals Three.js Fundamentals starting lesson]
+			</li>
+			<li>
+				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] di [link:https://codepen.io/rachsmith/ Rachel Smith].
+			</li>
+			<li>
+				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
+			</li>
+		</ul>
+
+		<h3>Articoli e corsi avanzati</h3>
+		<ul>
+			<li>
+				[link:https://threejs-journey.com/ Three Journey] Corso di [link:https://bruno-simon.com/ Bruno Simon] - Insegna ai beginners come usare Three.js step by step
+			</li>
+			<li>
+				[link:https://discoverthreejs.com/ Discover three.js]
+			</li>
+			<li>
+				[link:http://blog.cjgammon.com/ Collection of tutorials] di [link:http://www.cjgammon.com/ CJ Gammon].
+			</li>
+			<li>
+				[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
+			</li>
+		  <li>
+			 [link:https://www.udacity.com/course/cs291 Interactive 3D Graphics] - un corso gratuito su Udacity che insegna i fondamenti della grafica 3D,
+       utilizza three.js come strumenti di coding.
+		  </li>
+		  <li>
+			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorial di [link:https://github.com/paullewis/ Paul Lewis].
+		  </li>
+		  <li>
+			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Stai cercando più risorse relative a three.js o alla computer graphics in generale?
+			 Controlla la selezione di letteratura suggerita dalla community.
+		  </li>
+		</ul>
+
+		<h2>News e Aggiornamenti</h2>
+		<ul>
+			<li>
+				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
+			</li>
+			<li>
+				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
+			</li>
+			<li>
+				[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
+			</li>
+		</ul>
+
+		<h2>Esempi</h2>
+		<ul>
+			<li>
+				[link:https://github.com/edwinwebb/three-seed/ three-seed] - starter kit di un progetto three.js con ES6 e Webpack
+			</li>
+			<li>
+				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - una raccolta di esempi per principianti creati utilizzando three.js r60.
+			</li>
+			<li>
+				[link:https://threejs.org/examples/ Esempi three.js ufficiali] - questi esempi sono gestiti come parte del repository di three.js e usano sempre l'ultima versione della libreria.
+			</li>
+			<li>
+				[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Esempi three.js ufficiali del branch di dev]  -
+        Come sopra, tranne che questi usano il branch di dev di three.js, e vengono utilizzati per verificare 
+        che tutto funzioni mentre viene sviluppato three.js.
+			</li>
+		</ul>
+
+	<h2>Strumenti</h2>
+	<ul>
+		<li>
+			[link:https://github.com/tbensky/physgl physgl.org] - Applicazione front-end JavaScript con un wrapper per three.js, per avvicinare la grafica WebGL
+			agli studenti che stanno imparando fisica e matematica.
+		</li>
+		<li>
+			[link:https://whsjs.readme.io/ Whitestorm.js] – Framework modulare three.js con plugin per la fisica AmmoNext.
+		</li>
+		<li>
+			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
+		</li>
+		<li>
+			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
+		</li>
+		<li>
+			[link:https://marketplace.visualstudio.com/items?itemName=slevesque.shader vscode shader] - Syntax highlighter per il linguaggio dello shader.
+			<br />
+			[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates vscode comment-tagged-templates] - Syntax highlighting per le stringhe di template etichettate
+      usando i commenti al linguaggio shader, come: glsl.js.
+		</li>
+		<li>
+			[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
+		</li>
+	</ul>
+
+	<h2>Riferimenti WebGL</h2>
+		<ul>
+			<li>
+			[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Riferimento di tutte le parole chiave, terminologia, sintassi e definizioni WebGL e GLSL.
+			</li>
+		</ul>
+
+	<h2>Vecchi Link</h2>
+	<p>
+    Questi link sono conservati per scopi storici - potresti trovarli utili, ma tieni presente che 
+    potrebbero contenere informazioni relative a versioni molto vecchie di three.js.
+	</p>
+
+	<ul>
+		<li>
+			<a href="https://www.youtube.com/watch?v=Dir4KO9RdhM" target="_blank">AlterQualia at WebGL Camp 3</a>
+		</li>
+		<li>
+			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - una collezione di esempi che utilizza la versione r45 di three.js.
+		</li>
+		<li>
+			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] di [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
+		</li>
+		<li>
+			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] di [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
+		</li>
+		<li>
+			<a href="https://www.youtube.com/watch?v=VdQnOaolrPA" target="_blank">Trigger Rally</a> di [link:https://github.com/jareiko jareiko] (video).
+		</li>
+		<li>
+			[link:http://blackjk3.github.io/threefab/ ThreeFab] - editor di scene, mantenuto fino alla versione r50 di three.js.
+		</li>
+		<li>
+			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] di [link:https://github.com/BKcore BKcore]
+		</li>
+		<li>
+			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
+			di [link:http://github.com/nrocy Paul King]
+		</li>
+		<li>
+			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
+			di [link:https://github.com/BKcore BKcore]
+		</li>
+		<li>
+			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - tutorial di three.js in Giapponese
+		</li>
+	 </ul>
+
+	</body>
+</html>

+ 35 - 0
docs/manual/it/introduction/WebGL-compatibility-check.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>Controllo compatibilità WebGL ([name])</h1>
+    <p>
+      Anche se questo sta diventano sempre meno un problema, alcuni dispositivi o browser potrebbero ancora non supportare WebGL.
+      Il seguente codice è utile per controllare se WebGL è supportato, infatti se non lo fosse viene mostrato un messaggio di errore all'utente.
+		</p>
+
+    <p>
+			Aggiungere il seguente link [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/capabilities/WebGL.js]
+			al file javascript ed inserire il seguente codice prima di provare a renderizzare qualsiasi cosa:
+		</p>
+
+		<code>
+		if ( WebGL.isWebGLAvailable() ) {
+
+			// Avviare qui la funzione o altre inizializzazioni
+			animate();
+
+		} else {
+
+			const warning = WebGL.getWebGLErrorMessage();
+			document.getElementById( 'container' ).appendChild( warning );
+
+		}
+		</code>
+	</body>
+</html>