JavaFx 2D part in 3D application

Question

I have a small problem with an Application I write.

I want to have to have a 3D field and on the right side a toolbar that contains 2D-Components like buttons.

I tried to simply add these Components to my root-Group, but then it is impossible to read the text and they move with all the others.

So, how can I seperate these two areas? Possibly with two scenes?

Thank you for every hint you can give :)

Answer 1

The best approach is using a SubScene for the 3D nodes. You can keep all the 2D content on top of it without rendering problems.

You can read about the SubScene API here.

This is a small sample of what you can do with this node:

private double mousePosX, mousePosY;
private double mouseOldX, mouseOldY;
private final Rotate rotateX = new Rotate(-20, Rotate.X_AXIS);
private final Rotate rotateY = new Rotate(-20, Rotate.Y_AXIS);

@Override
public void start(Stage primaryStage) throws Exception {

    // 3D
    Box box = new Box(5, 5, 5);
    box.setMaterial(new PhongMaterial(Color.GREENYELLOW));

    PerspectiveCamera camera = new PerspectiveCamera(true);
    camera.getTransforms().addAll (rotateX, rotateY, new Translate(0, 0, -20));

    Group root3D = new Group(camera,box);

    SubScene subScene = new SubScene(root3D, 300, 300, true, SceneAntialiasing.BALANCED);
    subScene.setFill(Color.AQUAMARINE);
    subScene.setCamera(camera);

    // 2D
    BorderPane pane = new BorderPane();
    pane.setCenter(subScene);
    Button button = new Button("Reset");
    button.setOnAction(e->{
        rotateX.setAngle(-20);
        rotateY.setAngle(-20);
    });
    CheckBox checkBox = new CheckBox("Line");
    checkBox.setOnAction(e->{
        box.setDrawMode(checkBox.isSelected()?DrawMode.LINE:DrawMode.FILL);
    });
    ToolBar toolBar = new ToolBar(button, checkBox);
    toolBar.setOrientation(Orientation.VERTICAL);
    pane.setRight(toolBar);
    pane.setPrefSize(300,300);

    Scene scene = new Scene(pane);

    scene.setOnMousePressed((MouseEvent me) -> {
        mouseOldX = me.getSceneX();
        mouseOldY = me.getSceneY();
    });
    scene.setOnMouseDragged((MouseEvent me) -> {
        mousePosX = me.getSceneX();
        mousePosY = me.getSceneY();
        rotateX.setAngle(rotateX.getAngle()-(mousePosY - mouseOldY));
        rotateY.setAngle(rotateY.getAngle()+(mousePosX - mouseOldX));
        mouseOldX = mousePosX;
        mouseOldY = mousePosY;
    });

    primaryStage.setScene(scene);
    primaryStage.setTitle("3D SubScene");
    primaryStage.show();
}

For more complex scenarios, have a look at the 3DViewer application under the OpenJFX project.