Passer au contenu

Insérez une animation 3D dans votre site avec Virtools

Logiciel de modélisation 3D pour le web, Virtools facilite la création d’environnements ou d’interfaces de navigation tridimensionnelles. Démonstration avec un petit projet incluant un personnage interactif dans un décor.

Outil de développement 3D pour le web, Virtools se révèle très intuitif et original. Destiné aux e-learning, au e-marketing ou à la simulation, il dispose de fonctions de cinématique inverse, dynamique et génération de particules, offrant un rendu de très bonne qualité. Virtools a déjà séduit plusieurs partenaires.Microsoft a accordé la licence Xbox Tools et Middleware à l’éditeur, qui commercialise désormais un kit de prototypage de jeux à l’intention des développeurs sur Xbox. De son côté, Adobe a annoncé un accord afin que le player web de Virtools soit inclus comme plug-in dans sa plate-forme Atmosphere, conçue pour la création de mondes 3D virtuels.Concrètement, les développements s’effectuent avec Virtools Dev 2.0, dont le langage de description d’interactions, enrichi, communique avec le serveur Virtools Behavioral Server 1.0. Ce dernier personnalise des animations web en 3D (créées avec Virtools Dev) en fonction du profil et du comportement d’un internaute, mais aussi selon le contenu des bases de données de l’entreprise. Par exemple, vous pouvez relier le serveur à une base de données produits.Par ailleurs, un kit de développement C++ autorise l’élaboration de fonctions supplémentaires et l’enrichissement des comportements déjà définis dans l’outil. Notons que les fichiers issus de 3D Studio Max, de LightWave 3D et de Maya sont compatibles, via des plug-in spécifiques chargés de transcrire le format du modeleur (anims/objets) dans le format Virtools. La visualisation des animations nécessite l’installation d’un lecteur d’environ 700 Ko (Virtools Web Player), automatiquement pris en compte par le navigateur de l’internaute.Dans le cadre de cette mise en ?”uvre, vous allez créer une animation Virtools : l’internaute, par le biais d’un personnage, va se promèner de manière interactive dans un laboratoire virtuel.

1 – Installez Virtools

Il s’installe automatiquement par le biais d’un “.exe“. À l’aide de “Démarrez> Programmes>VirtoolsDev> Virtools“, ouvrez l’application, puis importez les scripts et les objets nécessaires.Dans le menu “Ressources“, cliquez sur “Open Data Ressources“, choisissez le répertoire “C:/program files/virtools dev 2.0/documentation” dans la boîte de dialogue, puis sélectionnez “Virtools ressources.rsc“. Un nouvel onglet (“Virtools ressources“) apparaît alors dans la fenêtre de visualisation du projet.

2 – Importez le décor

L’interface de Virtools est intuitive, les assignations de commandes s’effectuent par cliquer-glisser. Dans l’onglet “Virtools ressources>3D Entities/worlds“, sélectionnez “Lab.mno” et faites-le glisser vers la fenêtre de visualisation.Bien que Virtools dispose de sa propre bibliothèque de décors, vous pouvez en créer vous-mêmes à l’aide des logiciels Bryce 3D, Maya ou Adobe Atmosphère.

3 – Ajoutez une caméra

Dans la barre d’outils, choisissez “Create new camera“. Dans l’onglet “Target camera setup>position world“, saisissez les coordonnées de la caméra (x = 6.0, y = 5.0 et z = 6.0), de façon à la placer dans un angle de la pièce.

Positionnez la caméra où vous voulez pour générer la vue de votre choix.

Définition des coordonnées de la caméra.

4 – Déclarez la caméra

Si, lorsque l’animation démarre, vous souhaitez que la caméra créée soit celle utilisée, sélectionnez “>set as active camera” dans l’onglet “Building blocks> camera>montage“, puis faites-le glisser vers “New camera“, situé dans l’onglet “Level manager>level>global>camera“.Dans ce même onglet, cliquez avec le bouton droit de la souris sur “Target new camera” et optez pour “Delete” afin de donner une nouvelle cible à la caméra, autre que celle par défaut. Dans l’onglet “Schematics“, vous constatez qu’un script spécifique a été créé pour la caméra. Ce dernier sert à ajouter de l’interactivité.

5 – Insérez un personnage

Dans l’onglet “Virtools ressources>characters>skin characters“, cliquez sur “Pierre” et faites-le glisser n’importe où dans la scène. Le personnage se retrouve au centre de la pièce. Il s’agit maintenant de le positionner correctement sur la scène.Dans l’onglet “Character setup>world“, insérez les coordonnées du personnage : x = 2.0, y = 1.8028 (celle par défaut) et z = 0.0.

Le décor se met en place aisément dans la scène.

6 – Centrez la vue sur le personnage

L’objectif de cette étape consiste à contraindre la caméra à suivre le personnage lors de ses déplacements dans la scène. Dans l’onglet “Building blocks>3D transformations>constraints>“, sélectionnez “Look at” et faites-le glisser vers “New camera” situé dans l’onglet “Level manager>level>global> camera“.Une boîte de dialogue apparaît. Dans le menu “Referential“, choisissez “Pierre“. Lorsque l’animation démarrera, la caméra sera centrée sur Pierre, mais il est nécessaire d’activer la commande “Look at” à chaque image. Pour cela, vous devez créer une boucle de commande. Dans l’onglet “Schematics“, activez la commande “Link” et reliez la flèche à gauche du bloc “Look at” à celle de droite.Si l’opération est effectuée correctement, le lien se surligne en vert, avant de redevenir noir. Vérifiez que la valeur sous le bloc “Look at” est égale à 1, ce qui permet à la boucle d’être effective à chaque image. Maintenant, quelle que soit la position du personnage dans la scène, la caméra le suit instantanément.

La création d’une boucle pour le script s’effectue très facilement.

7 – Donnez du mouvement

Il s’agit d’ajouter des scripts de mouvement au personnage, qui seront liés à des commandes du clavier. Dans “Virtoolsressources>characters>animation> skin characters animation>pierre“, sélectionnez ?” avec la souris et en appuyant simultanément sur la touche CTRL ?” “Run.cmo“, “Walk.cmo“, “Wait.cmo” et “Walkbckwd.cmo“, puis glissez la sélection vers le personnage. Un rectangle jaune apparaît autour de lui ; relâchez le bouton de la souris. Les scripts ont été assignés au personnage.

Voici le résultat final dans une page web. L’utilisateur fait évoluer le personnage à l’aide des touches du pavé numérique.

8 – Apportez de l’interactivité

Dans l’onglet “Buildingblocks>characters>movements“, cliquez sur “Character controller” et faites-le glisser vers le personnage. Une boîte de dialogue s’affiche alors. Sélectionnez-y les commandes “Wait” (menu “Stand animation“), “Walk” (menu “Walk animation“), “Walkbckwd” (menu “Walk backward animation“) et “Run” (menu “Run animation“).Dans “Building blocks> controllers>keyboard“, sélectionnez “Keyboard controller” et faites-le glisser vers le personnage. Désormais, lorsque vous lancez la commande “Play“, vous pouvez contrôler le personnage à partir des touches du clavier numérique. Pour l’instant, le personnage ne “ressent” pas l’environnement, mais “traverse” les objets de la scène.

9 – Déclarez les obstacles

Dans l’onglet “Level manager>level> global>3D objects“, une liste d’objets apparaît. Cliquez avec le bouton droit de la souris sur “3D objects” et optez pour la commande “Select children“. Tous les objets du menu “3D objets” sont alors sélectionnés. Cliquez dans la sélection et choisissez “Place in new group“, de façon à regrouper tous les objets de l’environnement. Dans “Level manager> level> global>groups“, effectuez un clic droit sur “New group” et renommez-le “Obstacles“.

10 – Faites interagir le personnage et les obstacles

Dans “Building blocks>collisions>3D entity“, sélectionnez “Object slider” et faites-le glisser vers le personnage. Dans la boîte de dialogue, choisissez “Obstacles” (menu “Group“). Cliquez sur “Reset IC” afin de réinitialiser la scène, puis sur “Play“.Votre personnage évite désormais tous les obstacles lorsque vous le déplacez avec les touches du clavier. Enregistrez votre projet (“File>save“), puis exportez-le sous forme d’une page HTML en sélectionnant “File>Export web page“.Pour lire le fichier, l’utilisateur devra télécharger le lecteur propriétaire de Virtools (Virtools Player) dans son navigateur.

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.


Emeline Jabs