自定义 javafx 3d 框或旋转堆栈窗格 [英] customizing javafx 3d box or rotating stackpane

问题描述

我的目标是玩骰子游戏.我正在使用 javafx.

第一个问题: 有没有一种简单的方法可以在 javafx 中自定义 3d 框.如果我必须在模具的每一面添加一个图像，或者我是否只使用一个环绕盒子的图像，这对我来说并不重要.(经过大量研究，我没有找到任何相关信息.)

在下面的代码中，我创建了一个堆栈窗格，它是一个 3d 立方体.它由 6 个矩形构成，每个矩形都填充了骰子的一侧(1 到 6).如果我将堆栈窗格旋转 180 度，应该在前景中的矩形在背景中，而之前在前面的矩形再次可见.

第二个问题:如何解决这个问题?

或者有更好的方法来实现这一点吗?起初我正在考虑使用 TriangleMesh，但它似乎和我的版本一样复杂.

@FXML私有 StackPane 堆栈；@覆盖公共无效初始化(URL url，ResourceBundle rb){...//其他代码for (int i = 1; i <7; i++){矩形 rt = getRectangle(i);rt.setSmooth(真)；stack.getChildren().add(rt);开关(一){情况1:rt.setTranslateZ(100);休息;案例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);休息;案例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));休息;案例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);休息;案例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);休息;案例6:rt.setTranslateZ(0);休息;}私人矩形 getRectangle(int number){矩形 rt = 新矩形(100, 100);rt.setFill(new ImagePattern(loadImage(number)));返回 rt;}

解决方案

Box 的问题，你可能已经注意到了，如果你将图像应用为漫反射贴图，它会对所有 6 个面均等地应用.

如果您查看

只需将其旋转 180º 并将其裁剪到边框，使用此短代码即可获得骰子:

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

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

解决方案

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());

这篇关于自定义 javafx 3d 框或旋转堆栈窗格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！