Défi ALTEN

Anime la danse de la victoire

Votre défi, si vous l'acceptez, sera d'animer la danse de la victoire de notre personnage avec la librairie ThreeJS.

Concepts de base

Astuces

Pour commencer

Commençons par charger un mesh.

<html>
	<head>
		<script src="http://defi.alten.nuitdelinfo.ovh/js/three.min.js"></script>
		<script type="module" src="http://defi.alten.nuitdelinfo.ovh/js/defi.alten.js"></script>                    
		<meta charset="UTF-8" />  
		<script>
			// Nous nous assurons que le DOM est complètement chargé avant de créer l'animation.
			window.addEventListener('DOMContentLoaded', (event) => {

				// Définition d'un objet settings
				let settings = {                                                                 
					container : document.getElementById("defi-alten"), // Div qui accueillera l'animation
					sequences : [
						{mesh : 'http://defi.alten.nuitdelinfo.ovh/meshes/Oni_Chan_anim_fin.glb'} // Ajout d'un mesh
					]
				};

				// Instanciation de l'objet Défi
				defi  = new DefiAlten(settings);
			});
		</script>
	</head>
	<body>
		<div id="defi-alten"><div>
	</body>
			
</html>
			

Animer

Les meshs peuvent contenir des actions, qui sont numérotées en partant de 0.
dans cet exemple, les actions sont les suivantes :

L'enchaînement des actions se définit dans un tableau comme celui-ci :
/* ... */
let animation_lady = {
	mesh     : 'http://defi.alten.nuitdelinfo.ovh/meshes/Oni_Chan_anim_fin.glb', // charger le mesh lady
	position : {x:15, y:0, z:0}, // Le positionner en x=15, y=0 ,z=0 
	sequence : [
		{action:0, duration:6},  // Courir pendant 6 secondes             
		{action:3, duration:3},  // Sauter pendant 3 secondes
		{action:7, duration:1},  // Tomber au sol pendant 1 seconde.
	]
} 
/* ... */
				

Exemple complet :

		

Composer une scène

Il est possible de composer une scène avec plusieurs mesh.
Pour cela, chaque mesh doit être ajouté dans le tableau "sequence"

/* ... */
sequences : [
	// Chargement de la lune
	{
		mesh     : 'http://defi.alten.nuitdelinfo.ovh/meshes/moon.gltf',
		position : {x:70, y:60, z:-50},
		scale    : 25,  // Utiliser l'attribut 'scale' pour grossir l'objet.
		/* Si pas de tableau d'enchaînements, l'objet restera statique */
	},
	
	// Chargement de la petite fille
	{
		mesh : 'http://defi.alten.nuitdelinfo.ovh/meshes/Oni_Chan_anim_fin.glb',
		position : {x:15, y:0, z:0},
		sequence : [
			//Le temps de transition est celui qui précède l'animation
			// /!\ Ce temps de transition ne peut pas être supérieur à duration 
			{action:2, duration:5, transition:0.1}, // Ici, 0.1 sec pour passer de l'action 6 à l'action 2
			{action:6, duration:3, transition:2} 	// Ici, 2 sec pour passer de l'action 2 à l'action 6
		]
	}
]
/* ... */
			
Exemple complet :


		

Ajouter du son

Attention : certains navigateurs modernes ajoutent une protection contre la lecture automatique de son.
Vous devrez donc ajouter un bouton pour lancer l'animation comme dans l'exemple.


		

Utiliser les événements


		

Aide problèmes techniques

Si vous rencontrez des problèmes techniques, voir cette page.