2014-09-18 3 views
1

У меня есть 3d модель с тесселированной геометрией (у меня есть массив вершин и треугольников), и у меня есть массив ребер из оригинальной нетезелированной геометрии. Я не могу найти учебник/пример с описанием, как отобразить массив ребер и документирование Three.js является неполным:Three.js draw edge

// 
// 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] 
]; 

Кто-нибудь есть какие-либо предложения? Благодарю.


Edit: После отправки на этот вопрос я нашел решение. Когда вы создаете линии или полилинию с помощью THREE.Line(geometry, material), вы можете использовать дополнительный третий параметр с именем type, а один из них - THREE.LinePieces, и он делает именно то, что я хотел. Более подробную информацию можно найти в Line() documentation. Вы можете создать много отключенных строк со следующим кодом:

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

Может быть, это не лучшее решение, но оно просто работает. :-)

ответ

0

Просто примечание, с номером r72 есть EdgesGeometry и EdgesHelper для отображения краев.

6

r75: Опция THREE.LinePieces заменена на 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); 
+0

Неверное имя переменной! Изменить 'var edge = new THREE.LineSegments (геометрия, материал);' to var var = new THREE.LineSegments (eGeometry, eMaterial); ' – Halt