Les normales des faces de trois.js ne sont pas rendues correctement

Question

Je veux créer mon propre format de modèle. Pour ce faire, j'essaie de créer une géométrie personnalisée. Je peux importer la géométrie correctement. Les normales de face de Bur ne sont pas rendues même si je les ajoute à la géométrie.

fichier d'entrée est ici:

# Coordinates 
    0e+0 0e+0 0e+0 
    1e+0 0e+0 0e+0 
    1e+0 0e+0 1e+0 
    0e+0 0e+0 1e+0 
    0e+0 1e+0 0e+0 
    1e+0 1e+0 0e+0 
    1e+0 1e+0 1e+0 
    0e+0 1e+0 1e+0 
# Normals 
0e+0 0e+0 -1e+0 
0e+0 -1e+0 0e+0 
0e+0 0e+0 1e+0 
0e+0 1e+0 0e+0 
1e+0 0e+0 0e+0 
-1e+0 0e+0 0e+0 

# Connectivity List 
1 2 6 5 
1 2 3 4 
3 4 8 7 
6 5 8 7 
2 6 7 3 
1 5 8 4 

Voici la façon dont je l'importer.

var geometry = new THREE.Geometry(); 

    //Add all positions to geometry 
    for (var g=0;g<coordinates.length;g++){ 
     geometry.vertices.push(coordinates[g]); 

    } 

    for(var l=0;l<connectivity.length;l++){ 

     //sml file have rectangular faces but three js uses triangular faces (THREE.Face4 is deprecated) so converting 4 vertex faces to 3 verex faces 
     var index0= connectivity[l][3]-1; 
     var index1= connectivity[l][4]-1; 
     var index2= connectivity[l][5]-1; 
     var index3= connectivity[l][6]-1; 

     //If normals is exist thenaddthem to face array too 

     if(normals.length==connectivity.length){ 

      console.log("Normals are exist"); 

      var face0= new THREE.Face3(index0,index1,index2); 
      face0.normal.set(normals[l]); 

      geometry.faces.push(face0); 

      var face1= new THREE.Face3(index2,index3,index0); 
      face1.normal.set(normals[l]); 

      geometry.faces.push(face1); 

     } else{ 

      console.log("Normals are not exist"); 

      var face0= new THREE.Face3(index0,index1,index2); 
      geometry.faces.push(face0); 
      var face1= new THREE.Face3(index2,index3,index0); 

      geometry.faces.push(face1); 
     } 
    } 

    geometry.computeBoundingBox(); 
    // geometry.compteVertexNormals(); 
    geometry.computeFaceNormals(); 

le code Je convertis quads de triangles dans le réseau face (liste de connectivité), tandis que FACE4 est obsolète par thee.js. Et j'affecte la même normale aux deux triangles qui partagent le même quad.

Voici comment cette case est rendu:

Suis-je manque quelque chose?

Answer 1

Les lignes suivantes n'utilisent pas la bonne syntaxe.

face0.normal.set(normals[l]); 
... 
face1.normal.set(normals[l]); 

Face3.normal est un Vector3 et Vector3.set takes 3 parameters.

Si normals[l] a x, y et z propriétés:

face0.normal.set(normals[l].x, normals[l].y, normals[l].z); 

définira correctement.

Alternativement, vous pouvez passer la normale en tant que Vector3 dans le constructeur Face3. See the docs here for more info.

Sur la base de nouvelles informations:

Depuis normals[l] est déjà un Vector3, vous devez utiliser Vector3.copy au lieu de set:

face0.normal.copy(normals[l]); 

Cela dit, puisqu'il est un Vector3 , vous devriez vraiment juste l'inclure dans le constructeur, comme je l'ai mentionné ci-dessus.