个性化定制JavaFX 3D盒子或旋转StackPane

Question

我的目标是使用骰子进行游戏。我正在使用JavaFX。 第一个问题：是否有一种简单的方法来自定义JavaFX中的3D盒子？对我来说，如果我必须添加图像到每个骰子的侧面或者只使用一个环绕盒子的图像也可以。 （经过大量研究，我没有找到任何相关信息）

在下面的代码中，我创建了一个StackPane，它是一个3D立方体。它由6个矩形构建而成，每个矩形都填充着一个骰子的面（1到6）。如果我将StackPane旋转180度，则应该在前景中的矩形在后景中，之前在前面的矩形又可见了。 第二个问题：如何解决这个问题？

还是有更好的实现方式吗？起初，我考虑使用TriangleMesh，但它似乎和我的版本一样复杂。

@FXML
private StackPane stack;

@Override
public void initialize(URL url, ResourceBundle rb) {
...
//other code


for (int i = 1; i < 7; i++){   
            Rectangle rt = getRectangle(i);
            rt.setSmooth(true);
            stack.getChildren().add(rt);
            switch(i) {
                case 1:
                    rt.setTranslateZ(100);                        
                    break;
                case 2:
                    rt.getTransforms().add(new Rotate(270, 50,50,0,Rotate.X_AXIS));
                    rt.setTranslateZ(100*0.5);
                    rt.setHeight(100);
                    rt.setTranslateY(100*0.5);
                    break;
                case 3:
                    rt.setTranslateZ(100*0.5);
                    rt.getTransforms().add(new Rotate(90, 50, 50, 0, Rotate.Y_AXIS));
                    rt.setWidth(100);
                    rt.setTranslateX(-(100*0.5-1));
                    break;
                case 4:
                    rt.setTranslateZ(100*0.5);
                    rt.getTransforms().add(new Rotate(90,50,50,0,Rotate.Y_AXIS));
                    rt.setWidth(100);
                    rt.setTranslateX(100*0.5);
                    break;
                case 5:    
                    rt.setTranslateZ(100*0.5);
                    rt.setTranslateY(-(100*0.5));
                    rt.getTransforms().add(new Rotate(270,50,50,0, Rotate.X_AXIS));
                    rt.setHeight(100);
                    break;
                case 6:
                    rt.setTranslateZ(0);
                    break;
            }      

private Rectangle getRectangle(int number){
    Rectangle rt = new Rectangle(100, 100);
    rt.setFill(new ImagePattern(loadImage(number)));
    return rt;
}

- ThoFin

Answer 1

Box存在的问题就是，如果你将一张图片作为漫反射贴图应用在上面，它会等量地应用到其6个面上。如果你查看FXyz项目，可以发现有一个类似的3D形状CuboidMesh的实现。通过完全访问它的'TriangleMesh'，很容易定制纹理映射到漫反射图像的方式。在这种情况下，它的实现方式是使用立方体的网格。因此，现在你只需要提供自己的网格。例如，这个：

从这里获取。只需将其旋转180º并裁剪到边框即可。使用此简短代码即可获得您的骰子：

CuboidMesh cuboid = new CuboidMesh(10f,10f,10f);
cuboid.setTextureModeImage(getClass().getResource("rotated_image014.jpg").toExternalForm());

- José Pereda