Javascript Girl
  1. Javascript Girl
  3. La maille devient très angulaire après la soustraction avec ThreeCSG
Intereting Posts
DecodeURIComponent (uri) ne fonctionne pas? Liaison de données inter-composants de polymères? Appel de la fonction de dessin de diagramme en fonction de la sélection de l'utilisateur avec d3js Comment forcer le Javascript à exécuter dans la réponse HTML à la requête Ajax Détecter la balise <embed> en charge de la vidéo Est-il possible de détecter quand un utilisateur passe à un autre onglet du navigateur? Ng-repeat event event Comment cacher le tiroir à l'aide du clic de l'utilisateur Page_ClientValidate () Question Existe-t-il une bonne bibliothèque ou un contrôle bancaire de Markdown? Comment appeler une méthode parent de la classe enfant dans javascript? Vue angulaire non mise à jour avec de nouvelles données Définir la page à évaluer en dehors de la page ouverte en phantomjs Comment modifier Javascript dans le navigateur? Gestion des erreurs dans les appels asynchrones node.js

La maille devient très angulaire après la soustraction avec ThreeCSG

J'ai subit un problème en soustrayant un maillage d'un autre maillage à l'aide de ThreeCSG. Mon maillage principal est un anneau et le maillage à soumettre est un diamant. Avant que le processus sur scène ne ressemble à ceci: Mesh fine. Mais après avoir soulevé les mailles, l'anneau devient angulaire: Mesh cassé . J'applique le même matériau / ombrage que précédemment. Voici le code que j'utilise: 

var ring_bsp = new ThreeBSP(ring); var stone_bsp = new ThreeBSP(stone); var substract_bsp = ring_bsp.subtract( stone_bsp ); var result = substract_bsp.toMesh( ringMaterial ); result.geometry.computeVertexNormals(); result.material.needsUpdate = true; result.geometry.buffersNeedUpdate = true; result.geometry.uvsNeedUpdate = true; result.scale.x = result.scale.y = result.scale.z = 19; scene.remove(ring); scene.add(result);

Mettre à jour un: si je supprime "result.geometry.computeVertexNormals ();" Le résultat semble même pire: lien .

Mise à jour deux: j'ai créé un jsfiddle avec un cas minimal

Mise à jour trois: Après avoir regardé un peu plus dans le problème et la dernière mise à jour de Wilts, j'ai vu que, après avoir utilisé ThreeBSP, les sommets sont dérangés. Vous pouvez le voir très bien dans ce violon .

Mise à jour quatre: Le problème semble être dans les fonctions "fromGeometry / toGeometry" car j'ai le même maillage brisé si je ne fais aucune substraction du tout.

Il ressemble (à peu près) à vos normales de sommet se perdre pendant la traduction (traduisant votre géométrie en CSG et en revenant à Three.js). Vous devriez vérifier le code source pour voir où cela va mal.

MISE À JOUR 1:

J'ai regardé le code source de ThreeCSG.js il semble qu'il y ait un bug sur la ligne 48 .

CA devrait etre: 

 vertex = new ThreeBSP.Vertex( vertex.x, vertex.y, vertex.z, face.vertexNormals[1], uvs );

L'index pour les vertexNormals devrait être 1 au lieu de 2. Peut-être que ce bug provoque un mauvais résultat d'exportation.

MISE À JOUR 2:

Essayez de mettre à jour les vertexNormals de la géométrie avant de convertir en CSG: 

 var geometry = ring.geometry; geometry.computeFaceNormals(); geometry.computeVertexNormals();

Remarque. Vous devez d'abord appeler computeNormals () pour le résultat correct.

MISE À JOUR 3:

Dans la conversion des faces des géométries Three.js aux géométries CSG, la méthode ThreeBSP.Polygon.prototype.classifySide vérifie si le sommet de la face adjacente est à l'avant, à l'arrière ou coplanaire à la face actuelle. Si le point est coplanaire, la face CSG sera définie comme Face avec quatre points de vertex. En raison de ce processus, certains de vos THREE.Face3 se transforment en un visage CSG à 4 points. Quand plus tard, il le transforme en un THREE.Face3 les THREE.Face3 du Visage deviennent différents de leurs valeurs initiales.

Le sommet est classé FRONT , BACK ou COPLANAR utilisant une valeur EPSILON pour comparer le vertex normal avec le visage normal. Si la différence est trop faible, le Vertex est considéré comme coplanaire. En augmentant la valeur EPSILON dans votre bibliothèque ThreeBSP, vous pouvez contrôler la précision. Si vous définissez EPSILON à 10, vos triangles ne seront jamais considérés comme coplanaires et le résultat de la conversion sera correct.

Ainsi, à la ligne 5 de votre ensemble de bibliothèque ThreeBSP: 

 EPSILON = 10,