JavaFx 2D part in 3D application - javafx

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.