java - 如何理解 JavaFX 三角形网格？

Question

只是试图理解 JavaFX 文档中关于三角形网格的意义。此代码有效并绘制了一个矩形。

public class Shape3DRectangle extends TriangleMesh {

    public Shape3DRectangle(float Width, float Height) {
        float[] points = {
            -Width/2,  Height/2, 0, // idx p0
            -Width/2, -Height/2, 0, // idx p1
             Width/2,  Height/2, 0, // idx p2
             Width/2, -Height/2, 0  // idx p3
        };
        float[] texCoords = {
            1, 1, // idx t0
            1, 0, // idx t1
            0, 1, // idx t2
            0, 0  // idx t3
        };
        /**
         * points:
         * 1      3
         *  -------   texture:
         *  |\    |  1,1    1,0
         *  | \   |    -------
         *  |  \  |    |     |
         *  |   \ |    |     |
         *  |    \|    -------
         *  -------  0,1    0,0
         * 0      2
         *
         * texture[3] 0,0 maps to vertex 2
         * texture[2] 0,1 maps to vertex 0
         * texture[0] 1,1 maps to vertex 1
         * texture[1] 1,0 maps to vertex 3
         * 
         * Two triangles define rectangular faces:
         * p0, t0, p1, t1, p2, t2 // First triangle of a textured rectangle 
         * p0, t0, p2, t2, p3, t3 // Second triangle of a textured rectangle
         */
        int[] faces = {
            2, 2, 1, 1, 0, 0,
            2, 2, 3, 3, 1, 1
        };

        this.getPoints().setAll(points);
        this.getTexCoords().setAll(texCoords);
        this.getFaces().setAll(faces);
    }
}

最后3行评论来自Class TriangleMesh .我的问题是我在代码中看不到他们对 faces 数组的定义和 faces 数组之间的匹配。因此不明白如何在其他情况下使用 faces 数组。不应该是这样吗:

        int[] faces = {
            2, 3, 0, 2, 1, 0,
            2, 3, 1, 0, 3, 1
        };

但是没有渲染矩形。我缺少什么以及通常应该将什么放入 faces 数组？

Answer 1

面方向如何工作的解释

定义面的方向很重要。在工作示例中，第一个面的点是 2、1、0(即三角形按逆时针顺序定义)。在您建议的 faces 数组中，第一个面是 2, 0, 1 (顺时针)。以顺时针方式定义的面背对观察者。以逆时针方向定义的面朝向观察者。

如何让你的网格可见

如果采用建议的面部定义并将网格绕 Y 轴旋转 180 度，您将看到面部。如果不旋转网格，默认情况下您将看到脸部的背面，并且网格的背面将被剔除(即不可见)。

另一种查看不旋转网格的方法是 set the cull face of the Mesh至 CullFace.NONE , 然后网格的背面将显示(尽管它只会显示为黑色而不是阴影区域)。

关于您提供的代码中注释的注释

您的代码示例中的注释有点误导，它应该反射(reflect)实际的人脸定义，而不是没有真正按预期工作的人脸定义。

文档请求更改建议

国际海事组织，TriangleMesh文档应该得到增强，我在 JavaFX 问题跟踪器中记录了针对运行时项目的更改请求以请求此增强。

更改文档以突出显示网格面中点的顺序的请求是:

JDK-8122785 Document importance of TriangleMesh order of elements

Java 8 3D API 文档的总体变更请求是:

JDK-8101810 Finish javadoc for FX 8 3D API

演示

这是一个示例测试工具，您可以使用它来尝试这些概念，以便更好地理解它们。

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.*;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;

// drag the mouse over the rectangle to rotate it.
public class RectangleViewer extends Application {
 
    double anchorX, anchorY, anchorAngle;
 
    private PerspectiveCamera addCamera(Scene scene) {
        PerspectiveCamera perspectiveCamera = new PerspectiveCamera(false);
        scene.setCamera(perspectiveCamera);
        return perspectiveCamera;
    }
 
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override
    public void start(Stage primaryStage) {
        final MeshView rect = new MeshView(
                new Shape3DRectangle(200, 200)
        );
        rect.setMaterial(new PhongMaterial(Color.DARKGREEN));
        rect.setRotationAxis(Rotate.Y_AXIS);
        rect.setTranslateX(250);
        rect.setTranslateY(250);
// try commenting this line out to see what it's effect is . . .
        rect.setCullFace(CullFace.NONE);

        final Group root = new Group(rect);
        final Scene scene = new Scene(root, 500, 500, true);
 
        scene.setOnMousePressed(new EventHandler<MouseEvent>() {
            @Override public void handle(MouseEvent event) {
                anchorX = event.getSceneX();
                anchorY = event.getSceneY();
                anchorAngle = rect.getRotate();
            }
        });
 
        scene.setOnMouseDragged(new EventHandler<MouseEvent>() {
            @Override public void handle(MouseEvent event) {
                rect.setRotate(anchorAngle + anchorX - event.getSceneX());
            }
        });


        addCamera(scene);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public class Shape3DRectangle extends TriangleMesh {

        public Shape3DRectangle(float width, float height) {
            float[] points = {
                    -width/2,  height/2, 0, // idx p0
                    -width/2, -height/2, 0, // idx p1
                    width/2,  height/2, 0, // idx p2
                    width/2, -height/2, 0  // idx p3
            };
            float[] texCoords = {
                    1, 1, // idx t0
                    1, 0, // idx t1
                    0, 1, // idx t2
                    0, 0  // idx t3
            };
            /**
             * points:
             * 1      3
             *  -------   texture:
             *  |\    |  1,1    1,0
             *  | \   |    -------
             *  |  \  |    |     |
             *  |   \ |    |     |
             *  |    \|    -------
             *  -------  0,1    0,0
             * 0      2
             *
             * texture[3] 0,0 maps to vertex 2
             * texture[2] 0,1 maps to vertex 0
             * texture[0] 1,1 maps to vertex 1
             * texture[1] 1,0 maps to vertex 3
             *
             * Two triangles define rectangular faces:
             * p0, t0, p1, t1, p2, t2 // First triangle of a textured rectangle
             * p0, t0, p2, t2, p3, t3 // Second triangle of a textured rectangle
             */

// if you use the co-ordinates as defined in the above comment, it will be all messed up
//            int[] faces = {
//                    0, 0, 1, 1, 2, 2,
//                    0, 0, 2, 2, 3, 3
//            };

// try defining faces in a counter-clockwise order to see what the difference is.
//            int[] faces = {
//                    2, 2, 1, 1, 0, 0,
//                    2, 2, 3, 3, 1, 1
//            };

// try defining faces in a clockwise order to see what the difference is.
            int[] faces = {
                    2, 3, 0, 2, 1, 0,
                    2, 3, 1, 0, 3, 1
            };

            this.getPoints().setAll(points);
            this.getTexCoords().setAll(texCoords);
            this.getFaces().setAll(faces);
        }
    }
} 

演示输出

绘制矩形时矩形网格的正面和背面默认背对观察者(通过顺时针方向定义一个面)并使用 CullFace.NONE 设置 (win7 jdkb115)。

常见问题

Why is it Height/2

我以这种方式定义模型坐标，因为在这种情况下，我希望旋转的 3D 形状的中心为 centroid的形状。这样我就可以围绕其质心旋转形状而无需执行额外的翻译。参见 pivot point rotation查看围绕任意枢轴点旋转所需的额外平移。

is the coordinates origin the bottom right?

涉及多个坐标。有具有局部坐标系的模型的坐标(参见 node 文档):

The Node class defines a traditional computer graphics "local" coordinate system in which the x axis increases to the right and the y axis increases downwards. The concrete node classes for shapes provide variables for defining the geometry and location of the shape within this local coordinate space.

有相机操作场景的坐标。在 3D 透视应用程序中，相机是 PerspectiveCamera。 .关于它如何影响坐标的信息是:

By default, this camera is located at center of the scene and looks along the positive z-axis. The coordinate system defined by this camera has its origin in the upper left corner of the panel with the Y-axis pointing down and the Z axis pointing away from the viewer (into the screen). If a PerspectiveCamera node is added to the scene graph, the transformed position and orientation of the camera will define the position of the camera and the direction that the camera is looking.

mesh 中也有纹理坐标。 .这些是 completely different并将纹理贴图上的点映射到模型上的顶点:

The term texCoord is used to indicate a single pair of 2D texture coordinates (u, v) for a single vertex, while the term texCoords (plural) is used to indicate sets of texture coordinates for multiple vertices.