Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Débuter avec Papervision - Un Carrousel

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par Monsieur Spi, le 21 mars 2010

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Utilisez la souris pour déplacer la caméra autour du carrousel.

Introduction

(Si vous êtes familier avec la 3D et savez déjà utiliser des librairies passez directement au chapitre « Organisation du travail »)

Dans la suite ce cet exercice vous trouverez peu de schémas et d'explications, c’est parce que la plupart des notions que nous allons aborder sont déjà expliquées en détail par Nataly ici : Carrousel pas à pas par Nataly

Je vous recommande de lire son tutorial avant d’aborder celui-ci, surtout si vous débutez.

Grâce au travail de Nataly les notions de bases concernant la création d'un carrousel sont posées et çà tombe bien car tout ce que nous allons voir y fait référence sans pour autant entrer dans le détail.

L'intérêt d'utiliser une librairie comme Papervision c'est avant tout de ne pas avoir à développer complétement un moteur 3D avec ses petites mains. Et comme ce tutoriel n'est pas là pour vous donner un cours magistral sur la programmation d'un tel moteur, ça tombe parfaitement bien. Nous n'allons donc pas nous lancer dans des calculs de malade ou des formules de math hyper complexes (j'entends un gros “oufffff” de soulagement dans le fond de la salle … ;-) … ) mais simplement essayer de faire connaissance avec un outil qui se chargera de ça à votre place.

Rappelons quand même quelques petites choses, tout d'abord le principe majeur de la 3D c’est de réfléchir selon 3 axes (X, Y, Z) au lieu de deux axes pour la 2D (x, y). Un écran d’ordinateur, une image ou une feuille de papier sont de bons représentants de ce qu’on appelle un plan (à lire : Le plan mathématique ), une surface comportant deux dimensions définies par deux axes (x, y). La différence avec un espace à trois dimensions tient à … la dimension supplémentaire, souvent appelée la profondeur, la perspective ou tout simplement l’axe Z.

  • Le plan est une surface en deux dimensions
  • La dimension de la profondeur est un axe supplémentaire sur lequel peut évoluer le plan
  • La projection est le résultat du changement d’axe pour afficher la scène 3D sur un plan (là il s'agit de l'écran)

Je ne vais pas vous mentir, bien que simples les calculs de projection sont loin d’être faciles à mettre en place lorsqu’on débute.
C'est pourquoi on n'en parlera pas :-P. Vous pouvez aller faire un tour sur ce tutorial ( Raycasting de la théorie à la pratique ) pour vous donner une idée de ce qu’implique la mise en place d’une projection 3D.

Fort heureusement des librairies 3D sont là. Mais cela ne vous dispense pas de connaître le dessous des cartes, c'est même une obligation à partir du moment où vous voulez comprendre ce qu'impliquent les opérations que vous effectuez.

Librairies

Les librairies sont des ensembles de scripts sensées vous apporter tous les outils nécessaires à la réalisation d'un type de projet, il en existe pour la 3D mais aussi pour la physique, les mathématiques et tout un tas d'autres choses. Elles sont là pour vous éviter d’avoir à effectuer certaines opérations par vous-même, en ce sens elles vous mâchent le boulot, mais cela ne veut pas dire que vous pourrez vous en servir sans aucune notion préalable. Ceux qui ont vécu la naissance de la calculatrice graphique (obligatoire au bac à l'époque) qui permettait d’enregistrer des fonctions complexes dans un coin de mémoire comprendront facilement de quoi je parle ;-).

Vous aurez invariablement besoin de lire la notice et d’y jeter très fréquemment un œil.
Vous n’avez pas le choix, chaque développeur a sa propre manière de conceptualiser les choses.

Mon propre choix s’est porté sur Papervision, non pas que les autres librairies soient plus mauvaises mais c’est celle pour laquelle j’ai trouvé le plus d’informations et d’exemples de prise en main. Sans doute parce que c’est la plus ancienne, pas forcément parce que c’est la meilleure. A vous de choisir, les pros de la 3D auront certainement des arguments bien plus techniques, mais les pros de la 3D n’ont pas besoin de parcourir un tutoriel pour faire un carrousel non plus…

Lorsque vous serez à l'aise avec une librairie vous aurez tout le loisir de tester les autres et de choisir celle qui sera le plus en adéquation avec vos projets, mais pour la suite de nos petites affaires nous allons nous contenter de Papervision.

Installation de Papervision

C’est la toute première chose à faire et pour ça il faut suivre scrupuleusement les instructions :

C'est assez long, faites bien attention à ce que vous faites et tout devrait bien se passer.
Notez que vous n'avez besoin de l'installer qu'une seule fois et que cela tient plus du paramétrage de votre éditeur AS favoris qu'autre chose.
Tant que vous n'avez pas réussi à installer convenablement Papervision inutile d'aller plus loin.

Organisation du travail

Bien, c’est partit pour … de nouvelles explications.

Tout d'abord si vous êtes plutôt graphiste que développeur il va falloir bousculer un peu vos habitudes, oubliez tout ce qui se fait « à la Timeline », ne cherchez pas à obtenir ce résultat en bidouillant sur une timeline vous n’y arriverez tout simplement jamais (sauf peut être sous CS4 et encore je doute). Ce tutoriel s'adresse à des débutants ayant déjà les connaissances nécessaires à la construction d'un programme, si ce n'est pas votre cas vous allez devoir vous y mettre car la suite est clairement orientée “pur code”, rien dans les mains, rien dans les poches, rien sur la timeline non plus (Regardes maman ! Fans les dents………). Il va sans dire que vous ne pourrez vous lancer dans cette aventure sans avoir les notions de programmation de base, écouteurs, tableaux, variables, etc…

Et pour commencer autant faire les choses bien tout de suite en rendant notre carrousel dynamique, ce qui va nous permettre de changer les vignettes sans retoucher au projet. Pour ça on va travailler avec des images rangées dans un dossier et un fichier XML qui servira pour stocker les infos utiles (titre, lien, emplacement des images, âge du capitaine…).

Si vous n’êtes pas familiers avec l’utilisation des médias externes allez faire un tour sur ces pages :

Les notions de trigonométrie ayant été décrites par Nataly nous ne reviendrons pas non plus dessus, en d'autre mots si vous n'y pitez rien à la trigo passez d'abord chez Nataly pour voir comment tout çà se goupille.

Synthèse du projet

Notre objectif est de réaliser un carrousel comme celui que Nataly nous à présenté dans son tutoriel, à cette différence près que le notre doit évoluer dans un espace en trois dimensions. Nous avons de la chance, Nataly viens de nous donner brillamment toutes les bases utiles pour comprendre le concept, nous n’avons donc pas besoin ni vous, ni moi, de nous retaper toutes les explications. Nous allons juste essayer de pousser un peu le concept de départ en utilisant de la vraie 3D gérée par une librairie prévue à cet effet.

Les grands principes restent les mêmes, si vous avez étudié les schémas donnés par Nataly tout vous semblera très clair; le cercle trigonométrique, les axes, sinus et cosinus ainsi que les notions de profondeur et de z-sorting qui y sont très bien représentées. A ceci près que cette fois nous allons travailler entièrement dans un espace à trois dimensions.

Travailler de la sorte demande un petit effort de raisonnement.
Les calculs d'affichage et de projection étant pré-mâchés par la librairie vous ne vous occuperez bien souvent que des objets contenus dans la scène qu'il vous suffira de placer suivant trois axes. Or il existe un objet incontournable lorsque l'on parle de 3D, la caméra. C'est l'objet qui “capture” l'image, c'est donc un des plus importants (avec le plan de projection qui permet d'afficher l'image et le pivot qui permet à la caméra de pivoter autour d'un point, mais nous reviendrons sur ces objets plus tard). Cela permet d'introduire une autre notion essentielle en 3D : ce que vous affichez change en fonction de l'endroit où vous avez placé la caméra et de la direction vers laquelle elle est pointée. Donc bien souvent on se contente de poser le décor et c'est la caméra qui va se déplacer dans la scène. Attention cela ne veut pas dire que tous les autres objets de votre scène sont figés, ils peuvent eux aussi se déplacer librement, la caméra ne détermine que le regard et la position de l'observateur dans la scène.

Analyse

Voyons de quoi nous allons avoir besoin, imaginons ça comme une recette de cuisine dont voici les ingrédients.

  • 20 images qui serviront à remplir les vignettes du carrousel
  • 20 planes, des plans en deux dimensions, les vignettes du carrousel
  • 1 soupçon de trigonométrie pour placer les vignettes en cercle et déplacer la caméra
  • 1 scène 3D dans laquelle on va faire cuire tout ça
  • 1 caméra, qui filme la scène
  • 1 projection qui affiche à l’écran ce que filme la caméra
  • Quelques écouteurs d’événements

Concept

A présent voici la recette.

  • Dans une scène 3D placer 20 plans (« planes » en anglais) sur un cercle.
  • Chaque plan est rempli par une texture (image) chargée dynamiquement.
  • Chaque plan doit être orienté perpendiculairement au centre du cercle.
  • Chaque plan est doté de propriétés interactives ou d’effets spéciaux.
  • La caméra est toujours orientée vers le centre du cercle et placée au-delà des vignettes.
  • La caméra gravite autour du centre en fonction de la position de la souris.

Medias externes

Tout d’abord les images, je choisis 20 images d’une taille de 176*256. Elles sont stockées dans un dossier « images » placé au même endroit que mon projet.

Je mets tout de suite en place au même endroit le fichier « images.XML » qui va servir pour stocker les données et je le structure de la manière suivante :

<?xml version="1.0" encoding="utf-8"?>
 
<database>
<vignette> 
	<titre>Maroc</titre>
	<adresse>images/01.jpg</adresse>
</vignette>
<vignette> 
	<titre>Croatie</titre>
	<adresse>images/02.jpg</adresse>
</vignette>
 
// ...
 
</database>
  • Pour chaque vignette nous avons un titre et une adresse.
  • Vous pouvez ajouter autant de paramètres que vous voulez.
  • Dans ce tutorial nous ne nous servirons pour l’instant que de l’adresse.

Mise en place du programme

Imports des classes

Il est temps de passer au code proprement dit et d’ouvrir Flash, ou tout autre éditeur Actionscript, puisque nous n'utiliserons pratiquement pas l'IDE de Flash vous pouvez travailler avec ce que vous voulez, assurez-vous en revanche d'avoir accès aux classes de Papervision.

On commence par importer tous les ingrédients de départ :

// imports
import org.papervision3d.objects.primitives.*;// les planes
import org.papervision3d.materials.*; // les textures des planes
import org.papervision3d.events.*; // les événements sur les objets 3D
import org.papervision3d.cameras.*;// la caméra
import org.papervision3d.scenes.*;// la scène 3D
import org.papervision3d.view.*; // la projection
import org.papervision3d.render.*; // le rendu

Voici les définitions de chaque package, gardez les précieusement dans un coin vous y ferez sans doute souvent appel pour savoir comment utiliser telle ou telle classe.

Vous avez ici les packages les plus importants, quel que soit le projet que vous voudrez faire vous ferez certainement appel à eux, je vous recommande donc de les parcourir au moins une fois pour voir ce qu'ils vous permettent de faire.

Les variables

Nous avons besoin de quelques paramètres avant de nous lancer dans les calculs.

// Propriété du carrousel
var nbrImg:int = 20; // nombre de vignettes
var angleVignette:Number = (Math.PI*2)/nbrImg; // angle entre chaque vignette
var w:Number=stage.stageWidth; // largeur de la scène
var h:Number=stage.stageHeight;// hauteur de la scène
var rayonCarrousel:Number=1200; // rayon du carrousel
var angleCam:Number = 0;// angle de la caméra sur Y
var rayonCam:Number= 2000; // rayon de la caméra
var imglist:Array = new Array();// liste des vignettes
var texture:Number=0;// index de la texture à charger

Jusque là rien de bien difficile. Notons que les vignettes sont posées sur un cercle d’un rayon de 1200 pixels tandis que la caméra est posée sur un cercle d’un rayon de 2000 pixels, les deux cercles ont le même centre. Lorsque l’on déplacera la caméra elle gravitera autour des vignettes, ce ne sont donc pas les vignettes qui bougent mais la caméra comme nous l'avons évoqué précédemment.

Paramètres de la projection

On définit les principaux paramètres de la projection.

// paramètres de la projection
var projection:Viewport3D = new Viewport3D(w, h, true, true);// projection
var scene:Scene3D = new Scene3D();// scène 3D
var camera:Camera3D = new Camera3D();// camera
var pointDeFuite:Plane= new Plane();// le pivot
camera.target = pointDeFuite;// arroche la caméra au pivot
projection.buttonMode=true;// affiche l'icone "main" au passage des surface interactives
 
// pose les objets sur la scéne
addChild(new Fond());// le fond
addChild(new FPS());// le compteur de FPS
addChild(projection);// la projection

Précisons quelques points avant d'aller plus loin et avant tout reprenons le schémas que nous avons vu en introduction de ce tutoriel.

Papervision propose des objets prédéfinis pour mettre en place tout ça, tout d'abord l'objet “Camera3D”, simple à comprendre il s'agit de la caméra. Puis l'objet “Scene3D”, il s'agit simplement de la scène dans laquelle les objets sont posés et les calculs effectués, Papervision propose donc de travailler avec une scène (3D) indépendante de la scène dite “principale” de votre projet (qui est en 2D). Et enfin le “Viewport3D” dont la traduction la plus évocatrice serait l'écran de projection ou le résultat de la projection elle même, le ViewPort permet donc d'afficher les calculs liés à la scène 3D et à la caméra.

Donc si on reprend le schémas de la projection et qu'on remplace les noms nous obtenons :

Le dernier objet important est le “pivot 3D”. Papervision nous propose une solution élégante pour placer le pivot de la caméra, c'est-à-dire un point autour duquel la caméra va pivoter et qui va aussi fixer l’axe du regard, c'est un moyen efficace pour “ancrer” la caméra à un point de la scène, il suffit simplement de créer un nouveau plane et d’y « accrocher » la caméra. Le pivot se situera à l’endroit où se trouve votre plane, pour nous ce sera le centre du cercle (X=0, Z=0, Y=0). Ici nous utilisons un plane vide dédié à ça mais vous pouvez très bien choisir n'importe quel autre objet de votre scène 3D. Le pivot est très important car c'est également lui qui va déterminer l'axe du regard, si vous regardez bien l'exemple que j'ai mis en tout premier dans ce tutoriel vous pouvez remarquer que la caméra monte ou descend sur l'axe Y mais que le pivot reste à sa place au centre du carrousel, le résultat c'est que lorsque la caméra monte ou descend elle s'oriente (pour être précis on pourrais dire qu'elle pivote sur son axe X) en même temps vers le pivot d'où cet effet de profondeur que nous obtenons.

Vous remarquerez enfin un dernier paramètre que j'ai placé sur les schémas, il s'agit de “D”.
Ce paramètre représente la distance entre la caméra et l'écran de projection, c'est quelque chose de très important lorsque vous devez faire vous même les calculs de projection, mais comme ici Papervision se charge de tout il se charge aussi de ce paramètre, vous pouvez donc l'ignorer, il est en revanche intéressant de connaître ce genre de petit détail.

Chargement des médias

Parser le fichier XML

Nous avons choisi de travailler avec des images externes et de confier l’organisation des données à un fichier XML, il s’agit maintenant de récupérer ces données pour créer nos vignettes.

On charge d’abord le fichier XML :

// charger la liste XML
var chargeXML:URLLoader = new URLLoader();// objet de chargement
chargeXML.load(new URLRequest("images.xml"));// url du fichier chargé
chargeXML.addEventListener(Event.COMPLETE, parseXML);// récupération des données
var chargeImages:Loader;// chargeur

Puis on le décompose et on stocke les informations dans un tableau.

// récupération des données
function parseXML(e:Event):void {
	var xml:XML = new XML(e.target.data);
	var liste:XMLList = xml.elements();
	for each (var vignette:XML in liste) {
		imglist.push({t:vignette.titre, u:vignette.adresse});//pour chaque enfants 
	}
	chargeImage();// charge la première texture
}

Enfin on charge la première texture, ce qui enclenche le reste du processus de chargement.
Ces différentes opérations n'ont pas de rapport direct avec Papervision, reportez-vous aux autres tutoriels du Wiki cités plus haut si vous souhaitez plus de détails sur la gestion du XML avec Flash.

Charger une texture

Cette fonction va nous permettre de charger une nouvelle texture puis de lancer la création de la vignette associée, elle est réutilisée à chaque chargement d’une nouvelle texture.

// charger une image
function chargeImage():void {
	chargeImages = new Loader();
	chargeImages.load( new URLRequest(imglist[texture].u));
	chargeImages.contentLoaderInfo.addEventListener(Event.COMPLETE, creePlane);
}

Rien de bien compliqué ici non plus, on récupère l'adresse de l'image à charger, on charge l'image, on écoute pour voir lorsque l'image est complétement chargée et lorsque c'est le cas on lance la fonction qui permet de créer la vignette associée à cette image.

Création des vignettes

Créer les planes

On attaque la plus grosse partie, il va donc falloir ralentir la cadence et détailler un peu.
Depuis le début nous n’avons pas beaucoup évoqué les manipulations Papervision, c'est le moment de s'y mettre.

Nos vignettes sont des plans (deux dimensions), donc des « planes » que nous allons manipuler dans un espace à trois dimensions. Les « planes » sont des objets primitifs, en 3D un objet primitif est un objet simple, un plan, un cube, une sphère… qui permettent, en les associant, de créer des objets plus complexes, une voiture, un bonhomme de neige, un robot…

Papervision possède une classe permettant de créer rapidement un objet primitif, nous l’avons importé au début :

import org.papervision3d.objects.primitives.*;

Mais les objets primitifs sont des espaces vierges, vous pouvez les considérer comme des cadres vides dénués de surface, si nous souhaitons que cela devienne de belles images nous devons les remplir avec un matériel. Là encore Papervision a prévu le coup, nous avons importé pour cela une classe qui va gérer le matériel des planes (pour l’instant une texture) :

import org.papervision3d.materials.*;

La manipulation de ces objets est des plus classiques. Il faut cependant se plier aux contraintes de la projection, c'est-à-dire penser selon trois axes (X, Y, Z) à la fois pour chaque objet contenu dans la scène 3D et pour la caméra qui elle aussi est un objet existant dans le monde en trois dimensions.

Allez, c’est parti pour un gros bloc de code que nous allons détailler après :

// créer une vignette
function creePlane(e:Event):void {
 
	// appliquer la texture
	var bd:Bitmap = Bitmap(chargeImages.getChildAt(0));// objet d'affichage de la texture
	var texturePlane:BitmapMaterial = new BitmapMaterial(bd.bitmapData);// texture du plane
	texturePlane.oneSide = false;// cacher la face arrière (non)
	texturePlane.interactive=true;// rendre interactif
 
	// créer le plane
	var p:Plane = new Plane(texturePlane);// plane texturé
	p.useOwnContainer = true;// utilise son propre conteneur
	p.filters = null;// filtres inactifs
 
	// placer le plane
	p.x = Math.cos(texture*angleVignette)*rayonCarrousel;// position sur X
	p.z =  Math.sin(texture*angleVignette)*rayonCarrousel;// position sur Z
	p.rotationY =  (-texture*angleVignette)*(180/Math.PI)-90;// rotation sur Y
 
	// afficher le plane
	p.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, clicVignette);// écouteur
	scene.addChild(p);// ajouter le plane dans la scène
 
	chargeImageSuivante();// on charge l'image suivante
}

Pour créer une nouvelle vignette la fonction commence par préparer le matériel utile, en l’occurrence ici la texture qui va remplir le plane. C’est un Bitmap dont nous allons récupérer tous les pixels. Pour cela on utilise la classe BitmapMaterial de Papervision. Vous verrez plus loin qu'il est possible d'utiliser différentes choses comme matériel, mais pour l'instant nous nous contenterons d'une texture simple.

Sous Papervision c’est le contenu du plane qui est interactif, pas le plane lui-même qui n'est qu'un cadre vide, nous en profitons donc pour préciser que la texture comporte deux faces (ce qui lui permet de s’afficher dans les deux sens) et qu’elle est réactive au actions de la souris. Merci Papervision sans qui se genre de petites manipulations serait bien prise de tête à programmer.

Ensuite on crée le plane, on lui passe simplement son contenu (la texture) en paramètre (oui vous ne rêvez pas c’est aussi simple que çà…). Sous Papervision vous devez indiquer que le plane dispose de son propre conteneur si vous voulez lui appliquer des filtres. Cette particularité va nous intéresser puisque nous utiliserons un filtre sur les planes où l’utilisateur va cliquer, chaque plane disposera donc de son conteneur indépendant.

Le plane est créé il reste à présent à le positionner et l’orienter correctement sur le cercle, là la trigo s’impose, retour au tutorial de Nataly. Chaque plane est positionné à égale distance sur le cercle, chacun séparé par un angle que nous avons défini au départ, à savoir la circonférence du cercle divisé par le nombre de vignettes. Son orientation est donnée par ce même angle auquel on retire 90 degrés pour le rendre perpendiculaire au centre du cercle.

La toute dernière action de la fonction est de vérifier si il reste des images à charger et donc des vignettes à créer, voyons ce que çà dit :

// reste t’il des images à charger ?
function chargeImageSuivante():void {
	// si il reste des textures à charger
	if (texture < imglist.length-1) {
		texture++;
		chargeImage(); // charge la nouvelle image
	} else {
		ajouteLogo(); // au final ajoute le logo
		stage.addEventListener(Event.ENTER_FRAME, render);// boucle permanente
	}
}

Là c’est très simple, on compare le nombre d’images chargées à la longueur de la liste récupérée dans le XML. Si il reste des images à charger on indique que l’on charge une nouvelle texture et on relance le processus de création d’une nouvelle vignette. Si il ne reste plus d’images alors on ajoute le logo (le plane central) et on lance la boucle permanente à l’aide de l’événement ENTER_FRAME.

Le logo est placé au centre du cercle si bien que lorsque la caméra va tourner autour il donnera l’impression de tourner sur lui-même comme un article sur un présentoir, il n’est là que pour la beauté de la chose, et pour apprendre une autre façon de remplir un plane, vous pouvez tout à fait vous en passer. Ce logo est positionné exactement au centre des cercles, on pourrait donc très bien l'utiliser comme pivot pour la caméra, c'est d'ailleurs ce que nous ferons plus tard dans l'exemple de la spirale à la fin de ce document, mais pour le moment on va juste en faire un objet de décoration.

// ajoute le logo
function ajouteLogo():void {
	var log:MovieMaterial = new MovieMaterial(new Logo(),true);
	var logo:Plane = new Plane(log, 520, 600, 4, 4);
	log.oneSide = false;// cacher la face arrière (non)
	logo.y=200;// position du logo sur Y
	logo.useOwnContainer = true;// permet d'appliquer des effets
	scene.addChild(logo);// ajoute le logo à la scéne
}

Nous avons déjà vu en quoi consistait la construction d’un plane, nous ne reviendrons donc pas dessus, notez cependant quelques particularités dans cette fonction. Tout d’abord nous n’allons pas utiliser un Bitmap externe en guise de matériel mais un MovieClip qui se trouve dans la bibliothèque. Ceci vous permettra d’apprendre à utiliser des clips comme matériel pour vos planes, vous noterez que la transparence est repectée. Cette fois vous remarquerez qu’en plus du matériel nous fixons la taille du plane en paramètre, je souhaite afficher le logo à deux fois sa taille, je le spécifie donc au moment de créer le plane. Enfin, comme ce plane est de grande taille je vais utiliser une méthode proposée par la classe Plane qui permet de le subdiviser en segments plus petits. Ceci permet de réduire l’effet « fisheye » qui apparaît parfois sur les surfaces, ici une grille de 4*4 suffira.

Moteur

Rendu et boucle principale

Tous nos objets sont placés, à présent nous allons nous occuper des mouvements de la caméra. Nous l’avons vu plus haut, c’est la caméra qui se déplace et pas les vignettes, nous allons donc commencer par déplacer la caméra en fonction de la position de la souris. Puis nous calculerons tout simplement le résultat de la projection pour l’afficher à l’écran.

// rendu de la scene et boucle principale
function render(e:Event):void {
 
	camera.y += ((stage.mouseY)-h*0.5)*-0.5; // position de la caméra sur Y
	angleCam += ((stage.mouseX)-w*0.5)*0.0005; // angle de rotation de la caméra sur Y
	camera.x = Math.cos(angleCam)*rayonCam;// position de la caméra sur X
	camera.z = Math.sin(angleCam)*rayonCam;// position de la caméra sur Z
 
	// rendu de la projection
	var renderer:BasicRenderEngine = new BasicRenderEngine();
	renderer.renderScene(scene, camera, projection);
}

La fonction « render » s’exécute en permanence, retour à la trigo pour positionner la caméra. Sur deux des axes, nous avons restreint les déplacements à un cercle, pour le troisième nous pourrions également restreindre les mouvements à un cercle, les déplacements de la caméra seraient donc limités à une sphère et le carrousel tournerait alors sur 360 degrés sur les 3 axes, mais on va donc s’amuser un peu en faisant simplement varier la hauteur de la caméra sans modifier le pivot.

Une fois les déplacements effectués on lance le rendu. La méthode renderScene() de la classe BasicRenderEngine() récupère les données provenant de la scène, de la caméra et de la projection, les calcules et mets à jour la projection. Comme vous pouvez le voir çà tient en deux lignes, je vous laisse imaginer ce qu'il faudrait programmer si nous devions effectuer ces calculs à la main… merci Papervision.

Interactivité

Rappelez vous, nous avons placé un écouteur sur chaque vignette lors de leur création.
Cet écouteur lançait (on dit “castait” en langage Geek…) la fonction clicVignette() lorsqu’on cliquait sur l’objet.

Ceci est un simple exemple d’interaction, le plus basique en fait, le clic de souris sur un objet contenu dans la scène3D, référez-vous à cette page pour les différentes interactions possibles : InteractiveScene3DEvent

// interaction simple
function clicVignette(e:Event):void {
	var ob=e.target;
	if (ob.filters == null) {
		// application du filtre de rayonnement
		var glow:GlowFilter = new GlowFilter();
		glow.color = 0x009922;
		glow.blurX = 25;
		glow.blurY = 25;
		ob.filters = [glow];
	} else {
		ob.filters = null;
	}
}

Rien de bien sorcier, on applique ou retire un filtre de rayonnement sur l’objet concerné par le clic.
Notez que vous pouvez affecter des écouteurs classique aux objets contenus dans la scène 3D, cependant certaines fonctionnalités vous imposent de passer par les événements préprogrammés de Papervision, seuls des essais et un parcours de la doc vous permettrons d'être sur que vous écoutez le bon événement.

Conclusion

J’ai pas mal écrit durant ce tutoriel sans trop donner de schémas ou vous permettre de faire des pauses, aussi je vais essayer d’être bref pour cette conclusion. Vous voici à présent sur les rails, si tout va bien votre carrousel fonctionne à merveille. Partant de là de très nombreuses directions et effets sont possibles, il vous suffit de jouer avec la position et l’orientation de vos planes et de votre caméra pour obtenir des spirales, des sphères, des tunnels et que sais-je d’autre. L'ergonomie est encore énormément perfectible, à vous de poser des limites, de ralentir la caméra lorsqu'elle sort d'une limite, de permettre de jouer avec la hauteur de la caméra que si on reste appuyé sur le bouton de la souris, etc… bref à partir de là c’est vous le chef d'orchestre, n’hésitez pas à venir compléter ce tutoriel avec vos évolutions.

Notons une chose particulière au carrousel, les petits malins auront compris tout de suite que l'essentiel du travail dépend du positionnement de départ de vos objets et de la manière dont vous positionnez la caméra. C'est sur cette base que je vous recommande de partir pour toutes les déclinaisons que vous souhaitez mettre en place.

J’espère que ceci vous aura été utile, je tenais à remercier Nataly pour son excellent travail qui m’a évité de tout reprendre à la base.

Have fun.

Sources

Voici la source complète au format CS3 : Carrousel PV3D CS3

Bac à sable

Voici l'occasion de faire des essais, à partir d'ici on se jette joyeusement sur tout un tas de tests amusants sur la base de ce que nous venons de voir, avis aux amateurs, si vous souhaitez ajouter vos propres essais ne vous gênez pas ;-)