customizing javafx 3d box or rotating stackpane

Question

My goal is a game played with dice. I am using javafx.

First question: Is there an easy way to customize the 3d box in javafx. It doesn't matter to me, if I have to add an image to every side of the die or if I use just one image which wraps around the box. (After lots of research I didn't find anything about it.)

In the code below I created a stackpane, which is a 3d cube. It is build from 6 Rectangles, each of the is filled with one side of a die (1 to 6). If I rotate the stackpane by 180 degrees, the Rectangle which should be in the foreground is in the background and the one which was before in front is visible again.

Second question: How to fix this?

Or is there a better way to realize that? First I was thinking about using TriangleMesh, but it seemd to be as complicated as my version.

@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;
}

Lorrainelorrayne

Answer 1

The problem with Box, as you may have already noticed, is that if you apply an image as diffuse map, it will be applied equally to all its 6 faces.

If you have a look at FXyz project, there's an implementation of a similar 3D shape, CuboidMesh.

Having full access to its 'TriangleMesh` it's easy to customize the way the texture is mapped to a diffuse image. In this case, the way its implemented is by using the net of the cube:

So now you just need to provide your own net. For instance, this one:

from here

Just rotate it 180º and crop it to its border, and with this short code you will have your dice:

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

Candescent