I have 3d model with tessellated geometry (I have array of vertexes and triangles) and I have also array of edges from original non-tessellated geometry. I can't find any tutorial/example with description how to display array of edges and documentation of Three.js is inplete:

//
// Cube geometry
//
//   4+--------+7
//   /|       /|
// 5+--------+6|
//  | |      | |
//  |0+------|-+3
//  |/       |/
// 1+--------+2
//
var cube_vertices = [
    [-1.0, -1.0, -1.0],
    [ 1.0, -1.0, -1.0],
    [ 1.0,  1.0, -1.0],
    [-1.0,  1.0, -1.0],
    [-1.0, -1.0,  1.0],
    [ 1.0, -1.0,  1.0],
    [ 1.0,  1.0,  1.0],
    [-1.0,  1.0,  1.0]
];
var cube_edges = [
    [0, 1],
    [1, 2],
    [2, 3],
    [3, 0],
    [0, 4],
    [1, 5],
    [2, 6],
    [3, 7],
    [4, 5],
    [5, 6],
    [6, 7],
    [7, 0]
];

Does anybody have any suggestion?

I have 3d model with tessellated geometry (I have array of vertexes and triangles) and I have also array of edges from original non-tessellated geometry. I can't find any tutorial/example with description how to display array of edges and documentation of Three.js is inplete:

//
// Cube geometry
//
//   4+--------+7
//   /|       /|
// 5+--------+6|
//  | |      | |
//  |0+------|-+3
//  |/       |/
// 1+--------+2
//
var cube_vertices = [
    [-1.0, -1.0, -1.0],
    [ 1.0, -1.0, -1.0],
    [ 1.0,  1.0, -1.0],
    [-1.0,  1.0, -1.0],
    [-1.0, -1.0,  1.0],
    [ 1.0, -1.0,  1.0],
    [ 1.0,  1.0,  1.0],
    [-1.0,  1.0,  1.0]
];
var cube_edges = [
    [0, 1],
    [1, 2],
    [2, 3],
    [3, 0],
    [0, 4],
    [1, 5],
    [2, 6],
    [3, 7],
    [4, 5],
    [5, 6],
    [6, 7],
    [7, 0]
];

Does anybody have any suggestion?

• javascript
• three.js
• edges

3 Answers 3

r75: The THREE.LinePieces option has been replaced by THREE.LineSegments.

var eGeometry = new THREE.EdgesGeometry( mesh.geometry );
var eMaterial = new THREE.LineBasicMaterial( { color: 0x00ff000, linewidth: 4 } );
var edges = new THREE.LineSegments( eGeometry , eMaterial );
mesh.add( edges );

Just a note, as of r72 there is the EdgesGeometry and the EdgesHelper for showing edges.

Moving solution from the question to an answer

When you create lines or polyline with THREE.Line(geometry, material), then you can use optional third parameter called type and one of type is THREE.LinePieces and it does exactly, what I wanted. More information can be found in Line() documentation. You can create many disconnected lines with following code:

var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
var geometry = new THREE.Geometry();
for(var i = 0; i < cube_edges.length; i++) {
    // Add first vertex of edge
    geometry.vertices.push( new THREE.Vector3(
        cube_vertices[cube_edges[i][0]][0],
        cube_vertices[cube_edges[i][0]][1],
        cube_vertices[cube_edges[i][0]][2]
        )
    );
    // Add second vertex of edge
    geometry.vertices.push( new THREE.Vector3(
        cube_vertices[cube_edges[i][1]][0],
        cube_vertices[cube_edges[i][1]][1],
        cube_vertices[cube_edges[i][1]][2]
        )
    );
}
var line = new THREE.Line( geometry, material, THREE.LinePieces);
scene.add( line );

Maybe it's not the cleanest solution, but it works.