Différences

Ci-dessous, les différences entre deux révisions de la page.

--- 3d [2014/11/18 11:11]
tangara créée
+++ — (Version actuelle)
@@ Ligne 1: / Ligne 1: @@
-====== 3D ======
-===== Objectif =====
-  * Initier aux concepts généraux de la 3D
-  * Programmation 3D avec Tangara
-  * Inclure d’autres objets basiques : cube, sphère, quadrilatère
-  * Acquérir une représentation des coordonnées
-===== Préparation de la séance =====
-  * Tangara accessible sur tous les ordinateurs
-  * Fonctions 3D activées (java3D) : consulter le site de tangara pour obtenir des informations sur l’installation de java3D
-  * Un tableau disponible
-===== Déroulement de la séance =====
-Dans cette séance, les élèves devront d’abord apprendre à construire un espace dans lequel inclure les objets 3D puis dans une séance ultérieure, seront vus les principes des coordonnées. Ici, nous ne ferons donc qu’une initiation aux coordonnées.
-==== Construction d'un espace en 3D ====
-  - Principes de programmation
-Pour ajouter un objet à l’espace 3D, il faut donc :
-    * Créer un espace3D
-    * Créer un objet
-    * Ajouter l’objet
-  - Création de l’espace3D
-Le but de la construction est de parvenir à une « boîte à chaussure ».
-Nous allons utiliser un nouvel objet qui contiendra toute la scène 3D
-<code javascript>e=new Espace3D()
-Pour l’instant cette fenêtre 3D est noire car nous n’avons rien mis dedans.
-Nous définissons ensuite la taille de l’espace :
-<code javascript>e.définirHauteur(320)
-e.définirLargeur(512)</code>
-  * Mise en page d’un espace en 3D
-L’espace peut être placé au centre de l’écran avec les commandes habituelles :
-<code javascript>e.avancer(40)
-e.descendre(40)
-e.monter(40)
-e.reculer(40)</code>
-==== Création d'un objetet ajout d'un objet à l'espace 3D ====
-Créons un cube. On donnera la taille du cube entre les parenthèses : ici taille 1 d’arête et ajoutons-le à l’espace3D :
-<code javascript>c3 = new Cube3D(1)
-e.ajouterObjet(c3)</code>
-Il est possible de définir une couleur en même temps que l’arête du cube :
-<code javascript>c3 = new Cube3D(1, « bleu » )</code>
-Voici la liste des couleurs disponibles :
-{{:couleurs_tangara.png?200|}}
-<div exercice>Les élèves doivent  concevoir une scène 3D intégrant un cube. On pourra leur faire remarquer qu’ils peuvent orienter la vue à droite et à gauche à l’aide de la souris en maintenant le clic.</div>
-==== Placement du cube ====
-  - Positionnement
-<div attention>Les coordonnées sont données suivant l'axe des X, l'axe des Z et l'axe des Y.</div>
-On utilisera :
-<code javascript>c3.définirPosition(-1,0,-3)</code>
-<div exercice>Les élèves doivent  placer un cube devant la caméra : on donnera les coordonnées.
-Ils devront trouver comment le déplacer à droite et gauche, devant/derrière, haut et bas en modifiant les coordonnées
-On demandera de déplacer le cube sur les coordonnées X ou Y ou Z de 0.5 unité</div>
-<div attention>Les coordonnées sont mesurées à partir de 0 : elles peuvent aussi être négatives</div>
-Il est possible de changer ensuite, c’est-à-dire après avoir créé le cube, la valeur du côté en utilisant l’action :
-<code javascript>c3.définirRayon(1.5)</code>
-  - Rotation
-On peut tourner un objet avec la commande :
-<code javascript>c3.définirAngle(50)</code>
-L’angle est en degré ; la rotation s’effectue par défaut sur l’axe Y
-Si l’on souhaite réaliser la rotation sur un autre axe on utilisera :
-<code javascript>c3.définirAxeDeRotation(« Z »)</code>
-<div exercice>Les élèves devront faire basculer le cube sur l’axe de leur choix d’un angle de 45°</div>
-{{:cube_tangara.png?200|}}
-==== Ajout d'une sphère ====
-<code javascript>boule = new Sphère3D()</code>
-Cette sphère par défaut est centrée sur l'origine et a pour rayon 1.
-Créer un objet Sphère3D, en précisant son rayon :
-<code javascript>boule = new Sphère3D()</code>
-Les élèves les plus avancés pourront chercher à disposer la sphère à côté du cube, sinon on donnera la position :
-<code javascript>boule.définirPosition(1,0,-3)</code>
-<div exercice>Les élèves doivent ajouter une sphère à la scène avec les indications fournies.</div>
-{{:cube_sphere_tangara.png?200|}}
-==== Ajout d'un cylindre ====
-Le cylindre3D s’ajoute de manière identique au cube3D mais on utilise :
-<code javascript>Cylindre3D(Rayon, hauteur)</code>
-<code javascript>cl3d = new Cylindre3D(1, 2)</code>
-{{:cylindre_cube_shere_tangara.png?200|}}
-==== Ajout de texte ====
-Créer un objet Texte3D sans en préciser le texte :
-<code javascript>unTexte = new Texte3D()</code>
-Pour définir le texte ultérieurement on utilise :
-<code javascript>unTexte.définirTexte("du texte")</code>
-Créer un objet Texte3D, en précisant le texte à afficher :
-<code javascript>unTexte = new Texte3D("du texte")</code>
-Créer un objet Texte3D, en précisant le texte à afficher et l'échelle :
-<code javascript>unTexte = new Texte3D("du texte", 1.5)</code>
-L'échelle est un nombre réel. Par défaut, cette échelle est fixée à 1. Une échelle de 2 rendra le texte 2 fois plus gros.
-Créer un objet Texte3D, en précisant le texte à afficher et la couleur :
-<code javascript>unTexte = new Texte3D("du texte", "rouge")</code>
-Définir le texte à afficher :
-<code javascript>unTexte.définirTexte("du texte")</code>
-===== Annexe:listing du programme de base 3D complété =====
-<code javascript pg3D.js>
-e = new Espace3D();
-e.définirHauteur(320);
-e.définirLargeur(512);
-c3 = new Cube3D(0.5);
-c3.définirPosition(-1,0,-3);
-c3.définirAxeDeRotation("Z");
-c3.définirAngle(50);
-e.ajouterObjet(c3);
-boule = new Sphere3D(0.1, "jaune");
-boule.définirPosition(1,0,-3);
-e.ajouterObjet(boule);
-tronc = new Cylindre3D(0.1,0.5, "vert");
-tronc.définirPosition(0,0,-3);
-e.ajouterObjet(tronc);
-unTexte = new Texte3D("du texte", "rouge", 1.5);
-unTexte.définirPosition(-3,-1,-8);
-e.ajouterObjet(unTexte);
-e.démarrer();</code>

Outils pour utilisateurs

Outils du site

Différences

Outils de la page