Search code examples
modelthree.jsaframe

Aframe Model faces not showing


I have loaded an obj into aframe but I can't get the face to show correctly. In blender the model looks correct and in windows 3DBuilder the model looks correct. As in this (A-Frame .obj model displaying but broken) post I have tried to set the Three.js material to doubleside. Not sure if I am implementing the code wrong or if this is actually not the problem. I have uploaded a glitch of my code here (https://glitch.com/edit/#!/beneficial-thumb). Thanks!


Solution

  • Models often need to be simplified to triangles (or quads are sometimes OK) before you can use them in engines like A-Frame, three.js, and others. This model, specifically, has hexagons and more. Opening in Blender shows this:

    screenshot of model with non-triangulated geometry

    You can "triangulate" the model in Blender or other 3D Modeling tools, or use online tools (like this one) to convert to glTF, which will automatically triangulate and prepare your model for A-Frame. Afterward you will get a result more like this, which is more engine-friendly:

    enter image description here