Javafx 四边形网格

Question

我需要在 javafx 中显示四边形网格，每个网格面有 4 个点四边形网格。

Answer 1

OpenJFX repository 上提供的 3DViewer 项目已经包含一个 PolygonalMesh implementation，它允许每个面有任意数量的点，因此任何多边形都可以是一个面。

您可以在PolygonMeshView 中使用它们的网格实现，而不是常规的MeshView。

由于三角形是有效的多边形，任何TriangleMesh 都可以轻松用作PolygonMesh。

例如，来自 FXyz library 的 CuboidMesh 假设 PolygonMesh 具有以下实现：

private PolygonMesh getTriangleMesh(float width, float height, float depth) {
    float L = 2f * width + 2f * depth;
    float H = height + 2f * depth;
    float hw = width/2f, hh = height/2f, hd = depth/2f;        

    float[] points = new float[] {
            hw, hh, hd,             hw, hh, -hd,
            hw, -hh, hd,            hw, -hh, -hd,
            -hw, hh, hd,            -hw, hh, -hd,
            -hw, -hh, hd,           -hw, -hh, -hd
        };

    float[] texCoords = new float[] {
            depth / L, 0f,                              (depth + width) / L, 0f,
            0f, depth / H,                              depth / L, depth / H, 
            (depth + width) / L, depth / H,             (2f * depth + width) / L, depth/H,  
            1f, depth / H,                              0f, (depth + height) / H,    
            depth / L, (depth + height)/H,              (depth + width) / L, (depth + height) / H,  
            (2f * depth + width) / L, (depth + height) / H,  1f, (depth + height) / H,
            depth / L, 1f,                              (depth + width) / L, 1f        
        };

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

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

    PolygonMesh mesh = new PolygonMesh(points, texCoords, faces);
    mesh.getFaceSmoothingGroups().addAll(smooth);
    return mesh;
}

这给出了以下结果：

private double mouseOldX, mouseOldY = 0;
private final Rotate rotateX = new Rotate(0, Rotate.X_AXIS);
private final Rotate rotateY = new Rotate(0, Rotate.Y_AXIS);

@Override
public void start(Stage primaryStage) {
    PolygonMeshView meshView = new PolygonMeshView(getTriangleMesh(100, 150, 200));
    meshView.setDrawMode(DrawMode.LINE);
    meshView.setCullFace(CullFace.NONE);
    meshView.setMaterial(new PhongMaterial(Color.LIGHTYELLOW));

    Scene scene = new Scene(new Group(meshView), 500, 300, true, SceneAntialiasing.BALANCED);
    scene.setOnMousePressed(event -> {
        mouseOldX = event.getSceneX();
        mouseOldY = event.getSceneY();
    });

    scene.setOnMouseDragged(event -> {
        rotateX.setAngle(rotateX.getAngle() - (event.getSceneY() - mouseOldY));
        rotateY.setAngle(rotateY.getAngle() + (event.getSceneX() - mouseOldX));
        mouseOldX = event.getSceneX();
        mouseOldY = event.getSceneY();
    });

    PerspectiveCamera camera = new PerspectiveCamera(false);
    camera.setNearClip(0.1);
    camera.setFarClip(10000.0);
    camera.getTransforms().addAll(rotateX, rotateY, new Translate(-250, -150, 0));
    scene.setCamera(camera);

    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

但是如果我们将棱镜同一侧的面的三角形组合起来，我们可以很容易地生成四边形面。请注意，points 和 texCoords 保持不变：

private PolygonMesh getQuadrilateralMesh(float width, float height, float depth) {
    float L = 2f * width + 2f * depth;
    float H = height + 2f * depth;
    float hw = width/2f, hh = height/2f, hd = depth/2f;        

    float[] points = new float[] {
            hw, hh, hd,             hw, hh, -hd,
            hw, -hh, hd,            hw, -hh, -hd,
            -hw, hh, hd,            -hw, hh, -hd,
            -hw, -hh, hd,           -hw, -hh, -hd
        };

    float[] texCoords = new float[] {
            depth / L, 0f,                              (depth + width) / L, 0f,
            0f, depth / H,                              depth / L, depth / H, 
            (depth + width) / L, depth / H,             (2f * depth + width) / L, depth/H,  
            1f, depth / H,                              0f, (depth + height) / H,    
            depth / L, (depth + height)/H,              (depth + width) / L, (depth + height) / H,  
            (2f * depth + width) / L, (depth + height) / H,  1f, (depth + height) / H,
            depth / L, 1f,                              (depth + width) / L, 1f        
        };

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

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

    PolygonMesh mesh = new PolygonMesh(points, texCoords, faces);
    mesh.getFaceSmoothingGroups().addAll(smooth);
    return mesh;
}

这将用作：

@Override
public void start(Stage primaryStage) {
    PolygonMeshView meshView = new PolygonMeshView(getQuadrilateralMesh(100, 150, 200));
    ...
}

给出预期的结果：

请注意，对于此示例，每个面都使用点和纹理索引，但您也可以添加普通索引。