javascript
/
three.js
зеркало из https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!DOCTYPE html>
<html lang="it">
	<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>