【问题标题】:How to create such shape using javaFx TriangleMesh?如何使用 javaFx TriangleMesh 创建这样的形状?
【发布时间】:2020-04-15 14:35:41
【问题描述】:

我需要创建这个形状。 我了解如何创建简单的形状,例如立方体,但我完全不了解如何创建这样的形状。如何为这些数组获得正确的分数?请帮忙

    TriangleMesh mesh = new TriangleMesh();

    mesh.getPoints().addAll(
            0, 0, 0,//P1
            0,0,100,//P2
            0,20,100,//P3
            60,20,100,//P4
            60,0,100,//P5
            60,20,60,//P6
            60,0,60,//P7
            40,0,60,//P8
            40,20,60,//P9
            40,20,0,//P10
            40,0,0,//P11
            0,20,0//P12
    );

    mesh.getTexCoords().addAll(
     //which points should be here?
    );

    mesh.getFaces().addAll(
   // which points should be here?
               );
    return mesh;

`

【问题讨论】:

    标签: java javafx geometry shapes javafx-3d


    【解决方案1】:

    您可以通过多种方式构建像您发布的那样的 3D 形状。

    3D 建模

    可能最简单的方法是使用 3D 编辑器,例如 Blender(开源),然后将模型导出为 .OBJ 文件。在这个 OBJ 文件中,您将获得顶点、纹理和面的列表。但是,该格式不能直接读取,因此您不能只将其输入 JavaFX MeshView。但是,有这种格式的导入器会创建一个TriangleMesh,比如one

    JCSG

    不处理点、顶点和面,但从 Java 方法中,另一种选择是使用JCSG:您可以只创建两个立方体,然后进行布尔运算以获得所需的形状(减去一个 20x20x60 的立方体)一个 60x20x100 的立方体)。还有一种方法可以将 CSG 对象转换为TriangleMesh

    FXyz3D

    从纯 JavaFX 的角度来看,您还可以使用 FXyz3D 库及其 TriangulatedMesh。 Is 基于具有定义其周长的 3D 点 ({x, y, 0}) 列表的平面,该点被三角剖分并拉伸到给定高度。在内部它使用Poly2Tri,也就是a 2D constrained Delaunay triangulation library

    由于您需要 XY 上的平面,我将您的点列表重写为:

    private final List<Point3D> points = new ArrayList<>(Arrays.asList(
                new Point3D(0,   0, 0),
                new Point3D(0, 100, 0), new Point3D(60, 100, 0),
                new Point3D(60, 60, 0), new Point3D(40, 60,  0),
                new Point3D(40,  0, 0), new Point3D( 0,  0,  0)));
    
    

    然后可以使用以下命令生成形状:

    TriangulatedMesh customShape = new TriangulatedMesh(points, 20);
    customShape.setLevel(0);
    customShape.setCullFace(CullFace.NONE);
    customShape.getTransforms().addAll(new Rotate(-90, Rotate.X_AXIS));
    

    (请注意,旋转会将平面从平面 XY 放入平面 XZ 中,如图所示)

    您现在可以检查生成的网格,您将看到生成的所有三角形:

    这样您就可以使用这些信息来“填充”您的点、纹理和面数组,并了解它是如何工作的。

    三角形网格

    最后,从头开始,但是基于上面的三角剖分,这些是需要的数组:

    顶点

    float[] vertices = {
             0.0,  0.0,   0.0,  // 0
             0.0,  0.0, 100.0,  // 1
            60.0,  0.0, 100.0,
            60.0,  0.0,  60.0,
            40.0,  0.0,  60.0,
            40.0,  0.0,   0.0,
             0.0, 20.0,   0.0,
             0.0, 20.0, 100.0,
            60.0, 20.0, 100.0,
            60.0, 20.0,  60.0,
            40.0, 20.0,  60.0,
            40.0, 20.0,   0.0};   // 11
    

    纹理坐标

    这些可以生成,例如,基于尺寸为 1x1 的 2D 表面,因此可以使用以下表达式轻松映射顶点坐标:{x / (MaxX-MinX), y /(MaxY-MinY)}

    float[] texture = {
            0.00, 0.00,        // 0
            0.00, 1.00,        // 1
            1.00, 1.00,
            1.00, 0.60,
            0.67, 0.60,
            0.67, 0.00,
            0.00, 0.00,
            0.00, 1.00,
            1.00, 1.00,
            1.00, 0.60,
            0.67, 0.60,
            0.67, 0.00};        // 11
    

    面孔

    我们将为每个三角形面添加 3 个顶点的索引和 3 个纹理坐标。

    int[] faces = {
             1,  1,  2,  2,  4,  4,      // 0
             4,  4,  2,  2,  3,  3,      // 1
             1,  1,  4,  4,  0,  0,      // 2
             0,  0,  4,  4,  5,  5,
             7,  7, 10, 10,  8,  8,
            10, 10,  9,  9,  8,  8,
             7,  7,  6,  6, 10, 10,
             6,  6, 11, 11, 10, 10,
             0,  0,  1,  1,  7,  7,
             0,  0,  7,  7,  6,  6,
             1,  1,  2,  2,  8,  8,
             1,  1,  8,  8,  7,  7,
             2,  2,  3,  3,  9,  9,
             2,  2,  9,  9,  8,  8,
             3,  3,  4,  4, 10, 10,
             3,  3, 10, 10,  9,  9,
             4,  4,  5,  5, 11, 11,
             4,  4, 11, 11, 10, 10,
             5,  5,  0,  0,  6,  6,
             5,  5,  6,  6, 11, 11};     // 19
    

    例如,对于顶面,定义了四个三角形,第一个 (0) 有顶点 (1, 2, 4),第二个 (1) 有顶点 (4, 2, 3),等等:

    在这种情况下,坐标纹理与顶点具有相同的索引(但这可能不同)。注意顶点缠绕或逆时针旋转。

    编辑

    如果您不使用法线,添加面平滑组会很方便:每个组都包含属于同一平面的面索引。例如,前四个索引属于顶面。

    int[] smooth = {0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7};
    

    这是创建您的自定义 MeshView 节点的全部代码:

    private final float[] vertices = {
                 0.0f,  0.0f,   0.0f,  // 0
                 0.0f,  0.0f, 100.0f,  // 1
                60.0f,  0.0f, 100.0f,
                60.0f,  0.0f,  60.0f,
                40.0f,  0.0f,  60.0f,
                40.0f,  0.0f,   0.0f,
                 0.0f, 20.0f,   0.0f,
                 0.0f, 20.0f, 100.0f,
                60.0f, 20.0f, 100.0f,
                60.0f, 20.0f,  60.0f,
                40.0f, 20.0f,  60.0f,
                40.0f, 20.0f,   0.0f};   // 11
    
        private final float[] texture = {
                0.00f, 0.00f,        // 0
                0.00f, 1.00f,        // 1
                1.00f, 1.00f,
                1.00f, 0.60f,
                0.67f, 0.60f,
                0.67f, 0.00f,
                0.00f, 0.00f,
                0.00f, 1.00f,
                1.00f, 1.00f,
                1.00f, 0.60f,
                0.67f, 0.60f,
                0.67f, 0.00f};        // 11
    
        private final int[] faces = {
                1,  1,  2,  2,  4,  4,      // 0
                4,  4,  2,  2,  3,  3,      // 1
                1,  1,  4,  4,  0,  0,      // 2
                0,  0,  4,  4,  5,  5,
                7,  7, 10, 10,  8,  8,
                10, 10,  9,  9,  8,  8,
                7,  7,  6,  6, 10, 10,
                6,  6, 11, 11, 10, 10,
                0,  0,  1,  1,  7,  7,
                0,  0,  7,  7,  6,  6,
                1,  1,  2,  2,  8,  8,
                1,  1,  8,  8,  7,  7,
                2,  2,  3,  3,  9,  9,
                2,  2,  9,  9,  8,  8,
                3,  3,  4,  4, 10, 10,
                3,  3, 10, 10,  9,  9,
                4,  4,  5,  5, 11, 11,
                4,  4, 11, 11, 10, 10,
                5,  5,  0,  0,  6,  6,
                5,  5,  6,  6, 11, 11};     // 19
    
        private final int[] smooth = {
                0, 0, 0, 0,   // top surface
                1, 1, 1, 1,   // bottom surface
                2, 2,
                3, 3,
                4, 4,
                5, 5,
                6, 6,
                7, 7};
    
        public MeshView getMeshView() {
            TriangleMesh mesh = new TriangleMesh();
            mesh.getPoints().addAll(vertices);
            mesh.getTexCoords().addAll(texture);
            mesh.getFaces().addAll(faces);
            mesh.getFaceSmoothingGroups().addAll(smooth);
    
            MeshView meshView = new MeshView(mesh);
            meshView.setMaterial(new PhongMaterial(Color.FIREBRICK));
            meshView.setCullFace(CullFace.NONE);
            return meshView;
        }
    

    【讨论】:

    • 令人印象深刻且全面的答案。
    • 非常感谢您的解释!
    • @VarvaraDvortsova,不客气。如果此答案对您有用,请确保您将其标记为已接受,因为这也会对其他人有所帮助。
    猜你喜欢
    • 2021-11-14
    • 2020-08-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多