Discussion :

[piero5673]

Bonjour,
J'essaye actuellement d'intégrer des modèles 3d, sans flash, dans un site web. J'ai opté pour l'utilisation de webgl, ainsi que de la librairie three.js. Mais voilà, je rencontre un gros problème : les modèles que j'essaye de charger via three.js (ce sont des fichiers .obj associés à un fichier .mtl) n'apparaissent pas, même une fois convertis en json via le convertisseur associé à three.js. Je pense que c'est à cause d'un script qui se bloque dans le fichier de chargement. J'ai essayé de le résoudre, mais je ne vois vraiment pas ce qui cloche ...

Premier blocage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if ( /^usemtl /.test( line ) ) {
   // material
   meshN( undefined, line.substring( 7 ).trim() );
}

Deuxième blocage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
if ( ( result = normal_pattern.exec( line ) ) !== null ) {
   // ["vn 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
   normals.push( vector(
      parseFloat( result[ 1 ] ),
      parseFloat( result[ 2 ] ),
      parseFloat( result[ 3 ] )
   ) );
}

[SylvainPV]

C'est à dire, un script qui se bloque ? Tu n'as rien en console Javascript ? Pas d'exception renvoyée au chargement du .obj ?

[piero5673]

Je n'utilise pas la console javascript (je ne sais pas où la trouver d’ailleurs). J'utilise notepad.
Concernant les messages d'erreurs, je les reçois quand j'essaye de charger le modèle 3d dans mon navigateur (firefox). Je reçois un message comme quoi un script est trop long a l'exécution, j'ai le choix de l’arrêter ou de le laisser. Il me renvoi aussi les lignes où il y a eu un blocage.

[SylvainPV]

Je n'utilise pas la console javascript (je ne sais pas où la trouver d’ailleurs). J'utilise notepad.

C'est un comble de vouloir faire de la 3D en Javascript avant de savoir se servir de la console Ce serait comme vouloir faire une triple rondade arrière avant de savoir marcher. Tu ne t'en sortiras pas sans un minimum de connaissances en matière de debugging Javascript. Je te suggère un peu de lecture avant d'aller plus loin dans ton projet : https://developers.google.com/chrome-developer-tools/

[piero5673]

Merçi, j'ai trouvé où ça bloque. Le script ne prend pas en compte les puissances de 10. Aurais-tu une idée du moyen de régler ce petit problème ?

[SylvainPV]

Il me faudrait un peu plus d'infos

[piero5673]

J'ai finalement résolu le problème avec un petit script python (three.js refusais de lire les lignes du genre "8.86E-03" à cause du "E" qui symbolise la puissance de 10). Mais une résolution amène ... un autre problème je ne sais pas si ça concerne toujours cette partie du forum par contre (la console javascript ne renvoi aucune erreur). Petit screen pour éviter les explication asser longues :


L'assemblage est correcte et ne comporte pas d'erreurs (il s'ouvre sans problème (et sans "trous") avec différents logiciels 3D (solidworks, 3d object converter, ...) et je cale complétement sur les raisons de l'apparition des "trous". Ils se situent toujours au même endroit. Ils apparaissent sur des pièces qui sont considérées comme des blocs, et où la texture est étalée partout.

[p3ga5e]

Salut !

Essaye de désactiver le BackFace Culling de ton pipeline de rendu
Dans Three.js , cela doit ce "flager" sur une des propriétés du prototype Material, un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

material.doubleSide = true

[piero5673]

je suis un peu confus, je ne trouve pas la méthode dont tu parle Les méthodes de l'objet textures se rapprochent de THREE.MTLLoader.X (où X est la méthode utilisée), mais je ne trouve aucune méthode en rapport avec BackFace Culling, doubleSide ou Material
J'en ai profité pour étudier un peu le fonctionnement au passage, et il ne fait que charger les textures. Malheureusement, je ne sais pas où se positionnent les textures utilisées dans le fichier mtl

[p3ga5e]

Peux-tu poster tes bouts de code, car je ne connais pas le loader OBJ de Three.js !

Perso je me suis coder mon propre loader sur un format binaire regroupant géométrie et materiaux dans un même fichier (c’est beaucoup plus simple que ce format OBJ/MTL )

La callback de mon loader reçoit la géométrie et un array de matériaux, à partir duquel j’instancie un Mesh

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var loader = new THREE.Ms3dLoader();
loader.load( "models/ninja.ms3d",
function( geometry, materials)
{
	geometry.computeBoundingSphere();
	camera.position.z = geometry.boundingSphere.radius*-3;
	mesh = new THREE.Ms3dMesh( geometry, materials[0] );
	mesh.position.set( 0, -geometry.boundingSphere.radius/2, 0 );
	scene.add( mesh );
});

Le principe pour du loader OBJ et MTL doit être sensiblement identique ! Non ?

Pour les textures recopies les au même endroit que tes fichiers OBJ/MTL

[piero5673]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {
  var object = event.content;
  object.position.y = 0;
  scene.add( object );
});
loader.load( 'obj/CANARI.obj', 'obj/CANARI.mtl' );

Voilà le petit bout de code qui me permet de charger les objets. Tout ce qui concerne la couleur et les textures se trouve dans le fichier mtl. Le reste du code se charge de la scène, des lumières, de l'animation, ... Les loaders sont disponibles ici (pour le OBJ) et ici (pour le mtl). Les modèles doivent se charger a peu près de la même façon (le format obj est une sorte de langage à balises) mais je n'avais pas le temps (et pas la conaissance) pour créer un loader personnalisé.

J'ai demandé de l'aide sur la partie 3D de ce site, et apparemment, ça vient du modèle (il a des faces mal orientées). Je repasserais pour confirmer que le problème viens bien de là.

[piero5673]

Ca venait de la façon dont je chargeais le modèle. Voici la correction du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {
 
   var object = event.content;
 
   object.position.y = 0;//position de l'objet
 
   object.traverse( function( node ) {
      if( node.material ) {
         node.material.side = THREE.DoubleSide;
      }
   });
   scene.add( object );
 
});
loader.load( 'CANARI.obj', 'CANARI.mtl' );//Chargement de l'assemblage et des textures

Merçi pour votre aide !