3D-Rotation mit der Maus

Ich fand es mal interessant zu sehen, wie einfach es ist, einen Würfel mit JavaFX3D zu zeichnen und mit der Maus zu drehen. Die einzige Schwierigkeit dabei war, dass man drauf achten muss, die Würfel direkt in der Mitte zu platzieren, er sonst durch den Rotationspunkt von seiner ursprünglichen Position abweicht. Der Folgende Code realisiert das drehen des Würfels bei gedrückter Maustaste.

public class MouseRotation extends Application{
 
 private DoubleProperty side2Angle = new SimpleDoubleProperty();
    private DoubleProperty side3Angle = new SimpleDoubleProperty();
    private DoubleProperty side4Angle = new SimpleDoubleProperty();
    private DoubleProperty side5Angle = new SimpleDoubleProperty();
    private DoubleProperty side6TranslateZ = new SimpleDoubleProperty();
     private DoubleProperty rootAngleX = new SimpleDoubleProperty();
     private DoubleProperty rootAngleY = new SimpleDoubleProperty();
     
     public static void main(String[] args) {
         launch(args);
     }

     @Override
     public void start(Stage stage) {
         stage.setTitle("Cube");
         stage.setScene(makeScene());
         stage.show();
         animate();
     }

     private Scene makeScene() {
         return SceneBuilder.create()
             .width(500)
             .height(500)
             .root(createRoot())
             .onMouseDragged(new MouseEventHandler())
             .camera(PerspectiveCameraBuilder.create()
                 .build())
             .depthBuffer(true)
             .build();
     }

     private Parent createRoot() {
         final Rectangle side1 = RectangleBuilder.create()
             .x(-100)
             .y(-100)
             .width(200)
             .height(200)
             .fill(Color.RED)
             .build();
         
         final Rotate side2Rotate = RotateBuilder.create()
                 .pivotX(-100)
                 .pivotY(-100)
                 .pivotZ(0)
                 .axis(Rotate.Y_AXIS)
                 .build();
             side2Rotate.angleProperty().bind(side2Angle);

             final Rectangle side2 = RectangleBuilder.create()
                 .x(-100)
                 .y(-100)
                 .width(200)
                 .height(200)
                 .fill(Color.GREEN)
                 .transforms(side2Rotate)
                 .build();

             final Rotate side3Rotate = RotateBuilder.create()
                 .pivotX(100)
                 .pivotY(-100)
                 .pivotZ(0)
                 .axis(new Point3D(-1, 0, 0))
                 .build();
             side3Rotate.angleProperty().bind(side3Angle);

             final Rectangle side3 = RectangleBuilder.create()
                 .x(-100)
                 .y(-100)
                 .width(200)
                 .height(200)
                 .fill(Color.BLUE)
                 .transforms(side3Rotate)
                 .build();

             final Rotate side4Rotate = RotateBuilder.create()
                 .pivotX(100)
                 .pivotY(100)
                 .pivotZ(0)
                 .axis(new Point3D(0, -1, 0))
                 .build();
             side4Rotate.angleProperty().bind(side4Angle);

             final Rectangle side4 = RectangleBuilder.create()
                 .x(-100)
                 .y(-100)
                 .width(200)
                 .height(200)
                 .fill(Color.CYAN)
                 .transforms(side4Rotate)
                 .build();

             final Rotate side5Rotate = RotateBuilder.create()
                 .pivotX(-100)
                 .pivotY(100)
                 .pivotZ(0)
                 .axis(Rotate.X_AXIS)
                 .build();
             side5Rotate.angleProperty().bind(side5Angle);

             final Rectangle side5 = RectangleBuilder.create()
                 .x(-100)
                 .y(-100)
                 .width(200)
                 .height(200)
                 .fill(Color.MAGENTA)
                 .transforms(side5Rotate)
                 .build();

             final Rectangle side6 = RectangleBuilder.create()
                 .x(-100)
                 .y(-100)
                 .width(200)
                 .height(200)
                 .fill(Color.YELLOW)
                 .build();

             side1.translateZProperty().set(100);
             side2.translateZProperty().set(100);
             side3.translateZProperty().set(100);
             side4.translateZProperty().set(100);
             side5.translateZProperty().set(100);
             side6.translateZProperty().bind(side6TranslateZ.add(100));

         
         final Rotate rootRotateX = RotateBuilder.create()
              .pivotX(0)
              .pivotY(0)
              .pivotZ(0)
              .axis(Rotate.X_AXIS)
              .build();
          rootRotateX.angleProperty().bind(rootAngleX);
          
         final Rotate rootRotateY = RotateBuilder.create()
            .pivotX(0)
            .pivotY(0)
            .pivotZ(0)
            .axis(Rotate.Y_AXIS)
            .build();
          rootRotateY.angleProperty().bind(rootAngleY);

         return GroupBuilder.create()
             .children(side1, side6, side2, side3, side4, side5)
             .translateX(250)
             .translateY(250)
             .transforms(rootRotateX, rootRotateY)
             .build();
     }
     
     private void animate() {
         TimelineBuilder.create()
             .keyFrames(
                 new KeyFrame(
                     Duration.seconds(0),
                     new KeyValue(side2Angle, 0),
                     new KeyValue(side3Angle, 0),
                     new KeyValue(side4Angle, 0),
                     new KeyValue(side5Angle, 0),
                     new KeyValue(side6TranslateZ, 0)
                 ),
                 new KeyFrame(
                     Duration.seconds(1),
                     new KeyValue(side2Angle, 0),
                     new KeyValue(side3Angle, 0),
                     new KeyValue(side4Angle, 0),
                     new KeyValue(side5Angle, 90),
                     new KeyValue(side6TranslateZ, 0)
                 ),
                 new KeyFrame(
                     Duration.seconds(2),
                     new KeyValue(side2Angle, 0),
                     new KeyValue(side3Angle, 0),
                     new KeyValue(side4Angle, 90),
                     new KeyValue(side5Angle, 90),
                     new KeyValue(side6TranslateZ, 0)
                 ),
                 new KeyFrame(
                     Duration.seconds(3),
                     new KeyValue(side2Angle, 0),
                     new KeyValue(side3Angle, 90),
                     new KeyValue(side4Angle, 90),
                     new KeyValue(side5Angle, 90),
                     new KeyValue(side6TranslateZ, 0)
                 ),
                 new KeyFrame(
                     Duration.seconds(4),
                     new KeyValue(side2Angle, 90),
                     new KeyValue(side3Angle, 90),
                     new KeyValue(side4Angle, 90),
                     new KeyValue(side5Angle, 90),
                     new KeyValue(side6TranslateZ, 0)
                 ),
                 new KeyFrame(
                     Duration.seconds(5),
                     new KeyValue(side2Angle, 90),
                     new KeyValue(side3Angle, 90),
                     new KeyValue(side4Angle, 90),
                     new KeyValue(side5Angle, 90),
                     new KeyValue(side6TranslateZ, -200)
                 )
             )
             .build().play();
     }

     public class MouseEventHandler implements EventHandler<MouseEvent>{

   @Override
   public void handle(MouseEvent mouseEvent) {
    double mouseX = mouseEvent.getSceneX();
    double mouseY = mouseEvent.getSceneY();
    
    rootAngleX.set(mouseY);
    rootAngleY.set(mouseX);
   }
      
     }

}

Durch das Ändern, der Methode "onMouseDragged" in "makeScene" kann man sicherlich das Eingabegerät noch variieren - z.B. könnte man hier mit Touchevents arbeiten, oder die ganze Sache über die Tastatur steuern.

Die Animation kann man natürlich weglassen. Die Werte der Seiten, die die Position angeben müssen dann mit den entsprechenden Werten aus der Animation aufsummiert werden. Sonst liegen alle Seiten übereinander.