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

问题描述

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

第一个问题：是否有一种简单的方法可以在javafx中自定义3d框。对我来说无关紧要，如果我必须在模具的每一侧添加图像，或者我只使用一个包裹盒子的图像。 （经过大量研究后我没有发现任何相关内容。）

在下面的代码中，我创建了一个堆栈窗格，它是一个3d立方体。它由6个矩形构成，每个矩形填充一个模具的一侧（1到6）。如果我将堆叠窗格旋转180度，那么应该在前景中的矩形在背景中，而前面的那个矩形再次可见。

第二个问题：如何解决这个问题？

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

  @FXML 
私有StackPane堆栈; 
 
 @Override 
 public void initialize（URL url，ResourceBundle rb）{
 ... 
 //其他代码
 
 
 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）; 
休息; 
 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）; 
休息; 
案例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）; 
休息; 
} 
 
 private Rectangle getRectangle（int number）{
 Rectangle rt = new Rectangle（100,100）; 
 rt.setFill（new ImagePattern（loadImage（number）））; 
返回rt; 
} 
  

解决方案

<$ c的问题您可能已经注意到，$ c> Box 是如果您将图像应用为漫反射贴图，它将同样应用于其所有6个面。

如果您查看

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

  CuboidMesh cuboid = new CuboidMesh（10f，10f，10f）; 
 cuboid.setTextureModeImage（getClass（）。getResource（rotating_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框或旋转stackpane的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！