JavaFX 3D Tutorial #1 – Introduction to 3D development

Page Contents

This is the the first chapter of JavaFX 3D Tutorial.

JavaFX provides an easy to use 3D API. It provides GPU based acceleration and hence can make use of latest powerful hardware. In this tutorial series, we will learn about using JavaFX 3D in our everyday applications.

Course Introduction

JavaFX 3D Coordinates

When we dive in to 3D application development, the most important part is the coordinate system. You have to understand how the x, y and z-axis changes in the screen. The following image describes the coordinate system in JavaFX 3D.

X increases when you go from left to right
Y increases when you go from top to bottom
Z increases when the objects goes away from you.

JavaFX 3D Camera System

Camera defines how we see an object. When you want to transform an object, you can either work on the object or the camera.

JavaFX rotation concept. Taken from tutorial video

So, let’s say you want to rotate an object. You can do this either by rotating the object or rotating the camera around the object itself.

JavaFX provides two cameras. Perspective camera and Parallel Camera. We’ll talk more about camera in Chapter 2.

Create a sphere in JavaFX 3D

JavaFX provides set of predefined 3D objects. You can create your own custom 3D shapes if you want. But to start with, these predefined shapes are the best.

import javafx.application.Application;
import javafx.scene.Camera;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.input.KeyEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Sphere;
import javafx.stage.Stage;

/**
 * @author afsal villan
 * @version 1.0
 *
 * https://genuinecoder.com
 */
public class Sphere3D extends Application {

  private static final int WIDTH = 1400;
  private static final int HEIGHT = 800;

  @Override
  public void start(Stage primaryStage) {
    Sphere sphere = new Sphere(50);

    Group group = new Group();
    group.getChildren().add(sphere);

    Camera camera = new PerspectiveCamera();
    Scene scene = new Scene(group, WIDTH, HEIGHT);
    scene.setFill(Color.SILVER);
    scene.setCamera(camera);

    sphere.translateXProperty().set(WIDTH / 2);
    sphere.translateYProperty().set(HEIGHT / 2);

    primaryStage.addEventHandler(KeyEvent.KEY_PRESSED, event ->{
      switch (event.getCode()) {
        case W:
          sphere.translateZProperty().set(sphere.getTranslateZ() + 100);
          break;
        case S:
          sphere.translateZProperty().set(sphere.getTranslateZ() - 100);
          break;
      }
    });

    primaryStage.setTitle("Genuine Coder");
    primaryStage.setScene(scene);
    primaryStage.show();
  }

  public static void main(String[] args) {
    launch(args);
  }
}

Let’s break down the code.

Create a new sphere.
The predefined Sphere shape is available in javafx.scene.shape.Shape3D package. You can simply create an instance. The parameter specifies the radius.
```
Sphere sphere = new Sphere(50);
```

Create a group as container

Group group = new Group(); 
group.getChildren().add(sphere);

Prepare camera
JavaFX provides two camera systems. Parallel camera and perspective camera. Perspective camera allows to view objects from a specified point. You can simply create an instance and attach it to the scene.
```
//Create a new perspective camera
Camera camera = new PerspectiveCamera(); 
//Attach camera to scene
scene.setCamera(camera);
```
Move sphere to center of the screen
We can move the 3D object around using translateProperty. Here the object is moved to center of the screen.
```
sphere.translateXProperty().set(WIDTH / 2); 
sphere.translateYProperty().set(HEIGHT / 2);
```

Add keyboard listener to control Z-axis / Zoom.
The z-axis can be controlled using translateZProperty. Currently, using KeyEvent.KEY_PRESSED event handler, we can listener for keyboard input. When ‘W’ is pressed, the object goes away from the user as the z gets increased and when ‘S’ is pressed, vice versa.

    primaryStage.addEventHandler(KeyEvent.KEY_PRESSED, event -> {
      switch (event.getCode()) {
        case W:
          sphere.translateZProperty().set(sphere.getTranslateZ() + 100);
          break;
        case S:
          sphere.translateZProperty().set(sphere.getTranslateZ() - 100);
          break;
      }
    });