Il existe de nombreux langages pour faire de la 3D sur internet, à chaque
langage est associé un ou plusieurs plug-in permettant de les afficher.
Résultat même si ces langages sont très performants, l'internaute
qui n'est pas un fan de 3D n'a jamais le bon plug-in.
Cependant un langage se détache du lot, le VRML pour Virtual Reality
Modeling Language, bien qu'il ne soit pas le plus performant, il a plusieurs
avantages: c'est un standard du net, il existe plus d'une dizaine de plugs-in,
il est reconnu par tout les logiciels de 3D, et surtout il peut
fonctionner avec des afficheurs Java donc sans plug-in. Son évolution se fait au travers du X3D qui permet
de développer des extensions et la communication avec d'autres langages
Le VRML 2 ou VRML 97 (c'est le meme) est un langage simple qui permet de décrire un monde en 3D et de l'animer. Il possède des interfaces avec le Java et le Javascript. Il est possible de programmer en utilisant un logiciel de 3D ou un simple traitement de texte. Bien que la taille des fichiers soient souvent plus importantes avec les logiciels, ils sont de bonne qualité et peuvent être modifiés à la main notamment pour implementer les animations et interfaces Java ou Javascript. La création de ses interfaces nécessite de connaitre le vrml. Voici donc un tutorial en Francais sur le VRML 2 que vous pouvez télécharger.
![]() |
![]() |
![]() |
Pour voir ces deux exemples, la souris et le train, il faut un plug-in vrml, Cortona est l'un d'eux. |
Pour créer des objets ou des scènes complexes, les compacter et les retravailler il est nécessaire d'avoir quelques logiciels. En voici trois, aussi excellents que totalement gratuits:
BLENDER est un logiciel de création graphique 3D qui surpasse largement les capacités du vrml et
se veut un challenger du célèbre 3DSmax. Ce logiciel en open source est incontournable et très
populaire, de nombreux tutoriaux sont disponibles sur internet en anglais mais aussi en français.
Téléchargez le chez www.blender.org
CHISEL est un indispensable pour le programmeur VRML, il corrige, compacte, simplifie et nettoie les fichiers vrml exportés
par les logiciels de 3D. D'une efficacité remarquable, ce logiciel place dans le domaine publique à la fermeture de Trapezium
produit des fichiers tout à fait clair et structurés.
Vous le trouverez à cette adresse: www2.hrp.no/vr/tools/chisel/install.htm
CONTEXT est un éditeur de texte pour programmeur qui a l'avantage de colorer de nombreux langages en fonction de leurs syntaxes (pas le vrml, mais les java, html, javascript, ect)
Il peut ouvrir plusieurs fichiers à la fois, il décale et compte les lignes automatiquement. Je l'utilise pour toutes les retouches sur mes
fichiers VRML et HTML.
Il est disponible chez www.context.cx
* Depuis que le Java n'est plus integré à Windows, il est necessaire d'installer le plug-in Java.
Pour utiliser de la 3D, il est nécessaire d'avoir un afficheur ou moteur 3D. En effet
le vrml ne fait que décrire une scène mais n'est pas un programme
autonome.
L'afficheur peut être une applet Java incorporée dans la page web
et qui sera chargée automatiquement sans que l'utilisateur n'ai rien
a faire.
L'utilisation de ce systeme nécessite des connaissances en html, java,
javascript et bien sur vrml.
Dans cet exemple il y a deux applet: Blaxxun 3D l'afficheur vrml et fauteuil.class qui sert
d'interface avec l'utilisateur.
Il faut bien comprendre que Blaxxun3D ne fait qu'afficher la scène 3D
et renvoyer les évènements de souris. Toutes les interactions
avec l'utilisateur doivent être programmées indépendement.
Ce qui présente un gros avantage: nous pouvons créer une interface
spécifique à chaque demo.
Nous allons voir ici le fonctionnement de fauteuil.java. Je ne décrirai pas le systeme de connection entre cette applet et Blaxxun3D, la documentation fournie avec est très complète quoiqu'en anglais. Voici le code source de cette applet fauteuil.java
Note: pour compiler cette applet il est necessaire d'utiliser la library fournie avec blaxxun 3D.
Voici pour commencer la connection entre le java en bleu et le vrml en rouge.
Le nom situe apres le DEF dans le VRML est utilise dans l'applet pour l'indentifier.Notez qu'il faut se connecter
au noeud fauteuil avec browser.getNode() avant de pouvoir atteindre le champ rotation avec fauteuil.getField(). browser est
le nom donnée a l'applet blaxxun 3D dans son champ name.
private boolean connectNodes(){ try { fauteuil=browser.getNode("fauteuil"); fauteuilRot=fauteuil.getField("rotation"); tempsTable=browser.getNode("TEMPSTABLE"); tempsTableStart=tempsTable.getField("startTime"); tempsEcran=browser.getNode("TEMPSECRAN"); tempsEcranStart=tempsEcran.getField("startTime"); dossier=browser.getNode("dossier"); dossierRot=dossier.getField("rotation"); (...) } } |
#vrml v2.0 utf8 DEF fauteuil Transform { rotation 0 1 0 0 children [ Shape { appearance Appearance { material material { diffuseColor 0 0 1 } } geometry IndexedFaceSet { coord Coordinate { (...) |
Pour la rotation du fauteuil, la fonction onEvent récupere la position de la souris transmise par l'evenement MOUSE_DOWN. La fonction update3D récupère la valeur de rotation dans le champ rotation du noeud fauteuil avec fauteuilRot.getValueFloatArray(), la modifie et la renvoie dans le vrml avec fauteuilRot.setValueFloatArray().
public boolean onEvent(java.awt.Event event){ switch (event.id){ case java.awt.Event.MOUSE_DOWN:{ x=event.x; break; } case java.awt.Event.MOUSE_DRAG:{ update3d(event.x-x); x=event.x; break; } } return false; } public void update3d(int deltax){ float[] rot=new float[4]; rot=fauteuilRot.getValueFloatArray(0,-1); rot[3]+=deltax/40f; fauteuilRot.setValueFloatArray(0,-1,rot); } |
![]() | <#script> function anime(v) { document.applet.anime(v); } function dossier(v){ document.applet.dossier(v); } function doNothing() { } <#/script> |
<#img usemap="#map1" src="textures/boutons.gif" width="153" height="80" border="0"> <#map name="map1"> <#area shape="rect" coords="20,7,45,32" href="Javascript:onClick=doNothing(1);" onMouseDown="dossier(1);" onMouseUp="dossier(5);" > <#area shape="rect" coords="20,40,47,66" href="Javascript:onClick=doNothing(1);" onMouseDown="dossier(2);" onMouseUp="dossier(5);" > <#area shape="rect" coords="66,26,92,51" href="Javascript:onClick=doNothing(1);" onMouseDown="dossier(3);" onMouseUp="dossier(5);" > <#area shape="rect" coords="107,27,133,52" href="Javascript:onClick=doNothing(1);" onMouseDown="dossier(4);" onMouseUp="dossier(5);" > <#/map> comme pour la <#a href="javascript:anime(1);">tablette<#/a> et <#a href="javascript:anime(2);">l'ecran.<#/a>
Animation des dossier et repose-pied
public void moveTo(){ float[] rot=new float[4]; float[] trans=new float[3]; switch (val){ case 1: rot=dossierRot.getValueFloatArray(0,-1); if (rot[3]<1.1) rot[3]+=0.01; dossierRot.setValueFloatArray(0,-1,rot); break; (...) case 3: rot=jambeRot.getValueFloatArray(0,-1); if (rot[3]<1.1) { rot[3]+=0.01; jambeRot.setValueFloatArray(0,-1,rot); trans=piedTrans.getValueFloatArray(0,-1); trans[2]-=0.002; piedTrans.setValueFloatArray(0,-1,trans); } break; (...) } } |
Animation de l'ecran et de la tablette
public void anime(int v){ double arg=(double) System.currentTimeMillis()/1000; if (v==1){ if (!flagTable){ tempsTableStart.setValueDouble(arg); flagTable=true; } } if (v==2){ if (!flagEcran){ tempsEcranStart.setValueDouble(arg); flagEcran=true; } } } #vrml DEF TEMPSTABLE TimeSensor { cycleInterval 5 loop FALSE } |
L'animation du repose pied et du dossier utilise un système similaire à la rotation du fauteuil. Pour la tablette on envoie un startTime au TimeSensor TEMPSTABLE ce qui démarre une animation prégrogrammée dans le fichier vrml. La valeur du startTime est (double) System.currentTimeMillis()/1000 , même chose pour l'écran.
Vous pouvez télécharger Blaxxun3D v2 ici.C'est une version totalement gratuite sans limitation accompagnée de sa documentation. ATTENTION,la version que je propose ici est une version d'évaluation et ne devra pas etre utilisée sur des sites professionnels.
Télécharger Blaxxun3Dv2_0 (1.33 Mo) Pour plus d'informations rendez vous sur le site de Blaxxun: www.blaxxun.comIl existe d'autres visualiseurs 3D en Java: Kaon, 3dAnywhere, Anfy et Sumea. Vous trouverez des details sur ces applets sur le site www.3dvf.com