Tutoriel 1 - Comment créer un patron de cube tronqué ?

Il s'agit de l'animation qu'on peut voir sur la page d'accueil et dans la galerie de patrons. Ce tutoriel vous guidera pas à pas : création du cube tronqué, couleurs, noms des points, ouverture du patron, jusqu'à l'insertion finale dans une page web.

1. Créer le fichier obj de description de l'objet.

Pour faire une section plane, on utilise le générateur de sections planes, et dans la liste solides prédéfinis on choisit le cube :

Il va falloir donner précisément le plan de coupe, pour cela on doit savoir où se situe notre cube. On a les coordonnées des 8 sommets au début du texte généré.
Pour fixer les idées et savoir où on va, faisons un petit dessin vite fait de ce qu'on cherche à obtenir, en utilisant ces coordonnées et en ajoutant notre plan de coupe (ABC) :
On choisit les coordonnées des 3 points A(0.6 ; 1 ; 1) , B(1 ; 0.7 ; 1) et C(1 ; 1 ; 0.4).
On coche le bouton radio "plan passant par les points", on entre ces coordonnées, on clique sur le bouton Calculer la section puis on choisit l'option Partie du solide sous le plan.
Il ne reste plus qu'à ouvrir le bloc-notes et à enregistrer ce fichier sous le nom cube_tronque.obj. Ne PAS utiliser un traitement de texte pour ça.

2. Insertion dans une page web.

Maintenant notre objet est prêt à être affiché. Tout ce qui concerne son apparence, y compris le développement du patron, sera précisé dans le code HTML de l'applet.
D'abord on va juste insérer l'applet sans aucune option. Pour cela voir ici. Voici ce qu'on obtient.

On veut que les faces carrées aient une couleur, les faces coupées une autre, et qu'enfin la section triangulaire soit d'une troisième couleur. Encore un coup d'oeil au fichier OBJ pour voir les numéros des faces, sur les lignes commençant par un f.
On voit que la section triangulaire est la dernière face, soit la 7^e. Pour la colorier avec la couleur #5050ff, on ajoute un paramètre couleursfaces dans le script d'insertion de l'applet :

var parametres = { model:"cube_tronque.obj", couleursfaces:"7:#5050ff" };

On obtient ceci : On voit ensuite dans le fichier que les faces n°1, 4 et 5 ont chacune 4 sommets, ce sont donc les faces carrées. On va leur attribuer la couleur #c0c0ff. Les faces n°2, 3 et 6 sont les faces coupées et auront la couleur #8080ff. On modifie le paramètre de couleur en conséquence (on ne peut pas mettre plusieurs fois le même paramètre avec des valeurs différentes) :

var parametres = { model:"cube_tronque.obj", couleursfaces:"1:#c0c0ff 4à5:#c0c0ff 2à3:#8080ff 6:#8080ff 7:#5050ff" };

Résultat : Les faces claires sont bien là, mais elles sont cachées derrière. On peut vérifier en faisant tourner la vue.
On voudrait donner un nom à la section. Elle est composée des points 8, 9 et 10. Un coup d'oeil (encore) aux coordonnées dans le fichier obj pour voir la correspondance 8=C, 9=A et 10=B. Les autres points ne seront pas nommés. On ajoute un paramètre nomspoints (ne pas oublier les espaces qui séparent un nom du suivant - un point signale une absence de nom).

var parametres = { model:"cube_tronque.obj", couleursfaces:"1:#c0c0ff 4à5:#c0c0ff 2à3:#8080ff 6:#8080ff 7:#5050ff", nomspoints=". . . . . . . A B C" };

Comme cette ligne devient un peu longue, on peut la couper pour mettre un paramètre par ligne :

var parametres = { model:"cube_tronque.obj",
		couleursfaces:"1:#c0c0ff 4à5:#c0c0ff 2à3:#8080ff 6:#8080ff 7:#5050ff",
		nomspoints=". . . . . . . A B C" };

Pour finir, développons le patron en ajoutant le paramètre patron:

var parametres = { model:"cube_tronque.obj",
		couleursfaces:"1:#c0c0ff 4à5:#c0c0ff 2à3:#8080ff 6:#8080ff 7:#5050ff",
		nomspoints=". . . . . . . A B C",
		patron:"0.5" };

La valeur est le coefficient d'ouverture. 0 pour un patron complètement refermé, 1 pour un patron complètement déplié. Vous remarquerez que si vous avez tout suivi à la lettre jusqu'ici, le patron ne se développe pas exactement comme sur cette capture. Pour corriger cela, changer l'ordre des points dans la définition de la première face du fichier obj (f 4 3 2 1) en f 2 1 4 3. JMath3D cherchera à développer le solide plus vers l'arête 2-1 à gauche que l'arête 4-3 à droite.

On peut ajouter un curseur pour que le visiteur puisse développer lui-même le patron à volonté en précisant curseur dans le paramètre patron :

	patron:"0.5 curseur"

On peut aussi animer le développement automatiquement grâce au paramètre animation :

	animation:"0 0 0.01"

Les deux premiers nombres donnent la rotation de caméra, avec des 0 on a une caméra fixe. Le dernier paramètre donne la vitesse d'ouverture, positive pour ouvrir, négative pour refermer le patron.