Question

我有带有细分几何体的三维模型（我有顶点和三角形阵列），我还有原始非细分几何体的边缘阵列。我找不到任何带有描述的教程/示例如何显示边缘数组和Three.js的文档是不完整的：

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

有人有任何建议吗？感谢。

编辑：发送此问题后，我找到了解决方法。当您使用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 );

可能是，它不是最好的解决方案，但它确实有效。： - ）

Answer 1

r75：.your-container { overflow: hidden!important; }选项已替换为THREE.LinePieces。

THREE.LineSegments

Answer 2

只是一个注释，从r72开始，有EdgesGeometry和EdgesHelper用于显示边缘。

Answer 3

将解决方案从问题转移到答案

当您使用THREE.Line（geometry，material）创建线或折线时，然后您可以使用可选的第三个参数，称为type和type之一是THREE.LinePieces，它确实可以实现我想要的功能。更多有关信息，请参见Line（）文档。您可以创建许多以下代码断开连接的行：
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 );
也许这不是最干净的解决方案，但是它可行。

Three.js绘制边缘

3 个答案: