Three.js - Extra faces created when exporting model from Blender

Question

Three.js version: 71

Blender version: 2.75a

I want to export wireframe models from blender and have them appear in my Three.js scene exactly how they appear in Blender. This is so I can use them as outline borders for my models. For example, here is the wireframe model of the default cube that is there when you start up blender:

Here is the JSON for this model after I exported it:

{
    "uvs": [],
    "name": "CubeGeometry.1",
    "materials": [{
        "wireframe": true,
        "DbgName": "Material",
        "depthWrite": true,
        "transparent": false,
        "depthTest": true,
        "specularCoef": 50,
        "colorAmbient": [0.64,0.64,0.64],
        "opacity": 1,
        "vertexColors": false,
        "DbgIndex": 0,
        "DbgColor": 15658734,
        "shading": "phong",
        "visible": true,
        "colorEmissive": [0,0,0],
        "blending": "NormalBlending",
        "colorSpecular": [0.5,0.5,0.5]
    }],
    "faces": [35,0,1,2,3,0,0,1,2,3,35,4,7,6,5,0,4,5,6,7,35,0,4,5,1,0,0,4,7,1,35,1,5,6,2,0,1,7,6,2,35,2,6,7,3,0,2,6,5,3,35,4,0,3,7,0,4,0,3,5],
    "vertices": [1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],
    "metadata": {
        "uvs": 0,
        "materials": 1,
        "generator": "io_three",
        "vertices": 8,
        "faces": 6,
        "normals": 8,
        "type": "Geometry",
        "version": 3,
        "colors": 0
    },
    "normals": [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],
    "colors": []
}

Notice how there are 6 faces. I want it to appear exactly like this in my Three.js scene. However, extra faces get drawn. It's usually because for some reason Three.js is connecting corner vertices that weren't connected in Blender. Here is how it looks after I load it into my scene:

From that answer, I used THREE.EdgesHelper like so: var egh = new THREE.EdgesHelper( mesh, 0x00ffff ); egh.material.linewidth = 2; scene.add( egh ); That worked, so please state that as your answer, and I'll accept it =) — Programmer_D

WestLangley WestLangley · Accepted Answer · 2015-09-06T15:01:07

You want to render a cube or box in wireframe mode but without diagonals.

One way to do that is with EdgesHelper, like so:

var helper = new THREE.EdgesHelper( mesh, 0xff0000 );
helper.material.linewidth = 2;
scene.add( helper );

You can also see this related answer.

three.js r.71

Three.js - Extra faces created when exporting model from Blender

1 Answers