CODEWITHSUNDEEP
javascriptthree.jsedges
JiriHnidek
JiriHnidek

Reputation: 563

How can I draw edges as an array?

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 incomplete:

//
// 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?

Upvotes: 1

Views: 6607

Answers (3)

TylerH
TylerH

Reputation: 21092

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.

Upvotes: -1

LrakWortep
LrakWortep

Reputation: 217

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 );

Upvotes: 8

Mr Speaker
Mr Speaker

Reputation: 3107

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

Upvotes: 0

Related Questions