在 Three.js（面）中渲染网格 3D 顶点

Question

给定 AutoCad API 以向量数组 {X:,Y:,Z:} 的形式生成的 200 多个顶点，我试图在 THREE.js 中渲染它们运气不好。

现在我正在对数字 200 进行所有可能的排列并将所有顶点连接在一起 - 我不认为这是完成的方式，因为它提供了超过 200k 个面孔。

编辑： 我的 AutoCAD 代码正在获取所有顶点，然后尝试获取其连接的顶点的 ID（vertex1 和 vertex2）。 GetHashCode() 虽然不起作用。问题不在于它 returns 巨大的 ID 编号，如 148335760 和 682610240。问题在于这些 ID 不是唯一的，它们恰好被定义并且它们没有连接到任何其他顶点。

AutoCAD 代码：

//data structures for serialisation
public class EdgeMe
{
    public int vertex1;
    public int vertex2;
}
public class VertexMe
{
    public int id;
    public Point3d Point;
    public List<EdgeMe> Edges = new List<EdgeMe>();
}

public class DataMe{
    public Extents3d extents;
    public string layer;
    public List<VertexMe> points = new List<VertexMe>();
}


//...


// Get each Solid3d in modelspace and add its extents
// to the list
foreach (var id in ms)
{
    var obj = tr.GetObject(id, OpenMode.ForRead);
    var sol = obj as Solid3d;

    DataMe dataMe = new DataMe();
    if (sol != null)
    {
        dataMe.extents = sol.GeometricExtents;
        dataMe.layer = sol.Layer;
        using (var brep = new Autodesk.AutoCAD.BoundaryRepresentation.Brep(sol))
        {
            foreach (var vertex in brep.Vertices)
            {
                VertexMe vertexMe = new VertexMe();
                vertexMe.Point = vertex.Point;
                vertexMe.id = vertex.Brep.GetHashCode();
                foreach(var edge in vertex.Edges)
                {
                    EdgeMe edgeMe = new EdgeMe();
                    edgeMe.vertex1 = edge.Vertex1.Brep.GetHashCode();
                    edgeMe.vertex2 = edge.Vertex2.Brep.GetHashCode();
                    vertexMe.Edges.Add(edgeMe);
                }

                dataMe.points.Add(vertexMe);
            }
        }
    }
    sols.Add(dataMe);
}

Javascript代码：

var faces = function(vertices) {
    var results = [];

    var vertex = [0, 1, 2];
    results.push(vertex.slice());

    while(true) {
        vertex[2]++;
        if(vertex[2] > vertices) {

            vertex[1]++;
            if(vertex[1] >= vertices) {
                vertex[0]++;
                vertex[1] = vertex[0] + 1;

                if(vertex[0] > vertices - 2)
                    return results;
            }

            vertex[2] = vertex[1] + 1;
        }

        results.push(vertex.slice());
    }

};

var generate = function( ... ) {
    // Process each box, adding it to the scene
    for (var sol in sols) { 
        var s = sols[sol];
        var vertices = [];

        for(var vertix in s.points) {// deserialize
            vertix = s.points[vertix];

            vertices.push(new THREE.Vector3(vertix.X, vertix.Y, vertix.Z));
        }

        var holes = [];
        var triangles, mesh;
        var geometry = new THREE.Geometry();
        geometry.vertices = vertices;
        var xfaces = faces(vertices.length);

        for(var i = 0; i < xfaces.length; i++) {
            geometry.faces.push( new THREE.Face3( xfaces[i][0], xfaces[i][1], xfaces[i][2] ));
        }
        geometry.computeFaceNormals();
        geometry.computeVertexNormals();

        mesh = new THREE.Mesh( geometry, customimg );

        mesh.rotation.set( Math.PI/2, 0, 0);

        root.add(mesh);
    }
}

此致，

艾恩

Answer 1

相反，我建议您使用 Forge Model Derivative API to extract the viewable from your file. Once you have the file translated, you can view it using the Viewer (which is based on Three.js, but optimized for engineering files). You'll find several examples at this Github。

Answer 2

你不能做你正在做的事。您正在尝试猜测连接信息。那不应该是猜测工作。该应用程序需要 return 连接信息给您。

在 Three.js（面）中渲染网格 3D 顶点

Render mesh 3D vertices in Three.js (faces)

javascript

autocad

vertices

three.js