8 3Dサンプル・アプリケーションのビルド

このチュートリアルの準備

次の要件および推奨事項を使用してから、このチュートリアルを続行してください。

1. (必須)システムが、http://www.oracle.com/technetwork/java/javase/downloads/の「Java SE download」ページからリンクされている「Certified System Configurations」ページにリストされているシステム要件を満たしていることを確認します。

   「JavaFX Graphics Support」の項に、JavaFX 3D機能をサポートするグラフィックス・カードのリストがあります。サポートされているグラフィックス・カードは、このチュートリアルでビルドする最終のJavaFX 3Dサンプル・アプリケーションを正常に実行するために必要です。

2. (推奨) NetBeans IDE 7.4をダウンロードしてインストールします。これは、このチュートリアルでJavaFX 3Dサンプル・アプリケーションをビルドするために使用します。

プロジェクトの作成

NetBeans IDE 7.4および次の手順を使用して、MoleculeSampleApp JavaFXプロジェクトを作成します。

1. NetBeans IDEの「ファイル」メニューから、「新規プロジェクト」を選択します。

2. 新規プロジェクト・ウィザードで、「JavaFX」アプリケーション・カテゴリおよび「JavaFXアプリケーション」プロジェクトを選択します。「次」をクリックします。

3. 「プロジェクト名」にMoleculeSampleAppと入力します。パス位置テキスト・フィールドにパスを入力するか、「参照」をクリックしてこのプロジェクト用に使用するフォルダに移動します。

4. 「終了」をクリックします。

   JavaFXプロジェクトを作成すると、NetBeans IDEによってHello Worldソース・コード・テンプレートが開始点として提供されます。次の項で、そのテンプレート・ソース・コードを置き換えます。

シーンの作成

分子のUIレイアウトを保持するシーンを作成します。

1. 最初に、Xform.javaの内容をコピーして、moleculesampleappプロジェクトのmoleculesampleappソース・フォルダのXform.javaファイルに保存します。

   このファイルには、Groupクラスから派生したXformサブクラスのソース・コードが含まれています。Xformノードを使用すると、3D UIレイアウトでグループ・ノードの子が変更されたときに、グループ・ノードのピボットの位置が自動再計算されません。Xformノードによって、独自のタイプの変換および回転を追加できます。このファイルには、平行移動コンポーネント、3つの回転コンポーネントおよびスケール・コンポーネントが含まれています。3つの回転コンポーネントがあると、シーンでのカメラの角度の変更など、回転の値を頻繁に変更する場合に役立ちます。

2. IDEエディタでまだ開いていない場合は、プロジェクトの作成で作成されたMoleculeSampleApp.javaファイルを開きます。ファイルの先頭にあるimport文を例8-1に示すimport文に置き換えます。

   例8-1 代替のimport文

   import javafx.application.Application;
   import javafx.scene.*;
   import javafx.scene.paint.Color;
   import javafx.stage.Stage;
   

3. MoleculeSampleApp.javaのコードの残りの本体を例8-2に示すコード行に置き換えます。このコードにより、Xformをノードとして新しいシーン・グラフが作成されます。

   例8-2 代替のコード本体

   /**
    * MoleculeSampleApp
    */
   public class MoleculeSampleApp extends Application {
    
       final Group root = new Group();
       final Xform world = new Xform();
    
       @Override
       public void start(Stage primaryStage) {
    
           Scene scene = new Scene(root, 1024, 768, true);
           scene.setFill(Color.GREY);
    
           primaryStage.setTitle("Molecule Sample Application");
           primaryStage.setScene(scene);
           primaryStage.show();
    
       }
    
       /**
        * The main() method is ignored in correctly deployed JavaFX 
        * application. main() serves only as fallback in case the 
        * application can not be launched through deployment artifacts, 
        * e.g., in IDEs with limited FX support. NetBeans ignores main().
        *
        * @param args the command line arguments
        */
       public static void main(String[] args) {
           launch(args);
       }
   }
   

4. [Ctrl]+[S]を押して、ファイルを保存します。

カメラの設定

Xformインスタンスを含むGroupクラスの階層でカメラを設定します。カメラで平行移動および回転を実行して、そのデフォルトの位置を変更します。

1. 例8-3に示すように、太字で示したコード行を、worldオブジェクトの宣言文の後になるように追加します。

   これらのコード行によって、perspectiveCameraのインスタンス、およびGroupクラスを拡張するpublicクラスXformの3つのインスタンスが作成されます。Xformクラスは、このドキュメントの前の項でNetBeansプロジェクトに追加したXform.javaファイルで定義されます。

   例8-3 カメラの変数の追加

   final Group root = new Group();
       final Xform world = new Xform();
       final PerspectiveCamera camera = new PerspectiveCamera(true);
       final Xform cameraXform = new Xform();
       final Xform cameraXform2 = new Xform();
       final Xform cameraXform3 = new Xform();
       private static final double CAMERA_INITIAL_DISTANCE = -450;
       private static final double CAMERA_INITIAL_X_ANGLE = 70.0;
       private static final double CAMERA_INITIAL_Y_ANGLE = 320.0;
       private static final double CAMERA_NEAR_CLIP = 0.1;
       private static final double CAMERA_FAR_CLIP = 10000.0;
       
   

2. 例8-4に示すように、buildCamera()メソッドのコード行をコピーします。これらを変数宣言の行の直後に追加します。

   buildCamera()メソッドによって、カメラは、デフォルトのJavaFX 2D Y-downではなく上下逆のビューに設定されます。したがって、シーンはY-up (Y軸は上を指す)シーンとして表示されます。

   例8-4 buildCamera()メソッドの追加

   private void buildCamera() {
           root.getChildren().add(cameraXform);
           cameraXform.getChildren().add(cameraXform2);
           cameraXform2.getChildren().add(cameraXform3);
           cameraXform3.getChildren().add(camera);
           cameraXform3.setRotateZ(180.0);
    
           camera.setNearClip(CAMERA_NEAR_CLIP);
           camera.setFarClip(CAMERA_FAR_CLIP);
           camera.setTranslateZ(CAMERA_INITIAL_DISTANCE);
           cameraXform.ry.setAngle(CAMERA_INITIAL_Y_ANGLE);
           cameraXform.rx.setAngle(CAMERA_INITIAL_X_ANGLE);
       }
   

3. start()メソッドで、例8-5で太字で示すようにbuildCamera()のコールを追加します。

   例8-5 buildCamera()のメソッド・コールの追加

   public void start(Stage primaryStage) {
   
           buildCamera();
           
   

4. 例8-6で太字で示すコード行をコピーし、start()メソッドの最後に追加することによって、シーンでカメラを設定します。

   例8-6 シーンでのカメラの設定

   primaryStage.show();
           scene.setCamera(camera);
   

5. [Ctrl]+[S]でファイルを保存します。

軸のビルド

この分子をビルドするために使用する3D軸を追加します。Boxクラスは軸を作成するために使用され、PhongMaterialは鏡面反射色およびディフューズ色を設定するために使用されます。JavaFXのデフォルトでは、Y軸はdownです。

通常の表記に従って、X軸を赤、Y軸を緑、Z軸を青で示します。

1. 例8-7に示す次のimport文をソース・ファイルの先頭に追加します。

   例8-7 2つのimport文の追加

   import javafx.scene.paint.PhongMaterial;
   import javafx.scene.shape.Box;
   

2. 例8-8に示すように、次の変数宣言文を追加します。

   例8-8 軸の変数の追加

   private static final double AXIS_LENGTH = 250.0;
   

3. 例8-9で太字で示す宣言をコピーし、rootが宣言されている行の直後に追加します。

   例8-9 axisGroupの作成

   final Group root = new Group();
   final Xform axisGroup = new Xform();
   

4. 例8-10に示すbuildAxes()メソッドをbuildCamera()メソッドの後に追加します。

   例8-10 buildAxes()メソッドの追加

   private void buildAxes() {
           final PhongMaterial redMaterial = new PhongMaterial();
           redMaterial.setDiffuseColor(Color.DARKRED);
           redMaterial.setSpecularColor(Color.RED);
    
           final PhongMaterial greenMaterial = new PhongMaterial();
           greenMaterial.setDiffuseColor(Color.DARKGREEN);
           greenMaterial.setSpecularColor(Color.GREEN);
    
           final PhongMaterial blueMaterial = new PhongMaterial();
           blueMaterial.setDiffuseColor(Color.DARKBLUE);
           blueMaterial.setSpecularColor(Color.BLUE);
    
           final Box xAxis = new Box(AXIS_LENGTH, 1, 1);
           final Box yAxis = new Box(1, AXIS_LENGTH, 1);
           final Box zAxis = new Box(1, 1, AXIS_LENGTH);
           
           xAxis.setMaterial(redMaterial);
           yAxis.setMaterial(greenMaterial);
           zAxis.setMaterial(blueMaterial);
    
           axisGroup.getChildren().addAll(xAxis, yAxis, zAxis);
           axisGroup.setVisible(true);
           world.getChildren().addAll(axisGroup);
       }
   

5. 例8-11で太字で示すように、buildAxes()メソッドのコールを追加します。

   例8-11 buildAxes()メソッドのコールの追加

   buildCamera();
           buildAxes();
   

6. プロジェクト・ウィンドウでMoleculeSampleAppノードを右クリックし、「実行」を選択して、プロジェクトをコンパイルして実行します。図8-1に示すように、3D軸を含むウィンドウが表示されます。

   図8-1 3D軸

   
   「図8-1 3D軸」の説明
   
   

分子のビルド

この項では、分子のUIをビルドします。ここで、XformクラスおよびPhongMaterial、Sphere、Cylinderなどの3D機能を使用します。Xformクラスも使用されます。

1. moleculeGroup Xformを宣言するには、例8-12で太字で示すコード行をコピーします。それをaxisGroup変数の後に貼り付けます。

   例8-12 moleculeGroup Xformの宣言

   final Xform axisGroup = new Xform();
    final Xform moleculeGroup = new Xform();
   

2. buildMolecule()メソッドで使用されるクラス用に、次のimport文を追加します。

   例8-13 build Molecule()のimport文の追加

   import javafx.scene.shape.Cylinder;
       import javafx.scene.shape.Sphere;
       import javafx.scene.transform.Rotate;
   

3. buildMolecule()メソッドで使用されるHYDROGEN_ANGLE変数用に、太字で示す次の文を追加します。

   例8-14 build Molecule()のimport文の追加

   private static final double AXIS_LENGTH = 250.0;
       private static final double HYDROGEN_ANGLE = 104.5;
   

4. buildMolecule()メソッドのコードの本体をコピーし、MoleculeSampleApp.javaファイルのbuildAxes()メソッドの後に貼り付けます。

5. start()メソッドで、例8-15で太字で示すようにbuildMolecule()メソッドのコールを追加します。

   例8-15 buildMolecule()メソッドのコールの追加

   buildCamera();
   buildAxes();
   buildMolecule();
   

6. ここでプロジェクトを実行すると、図8-2のように表示されます。

   図8-2 水分子3DModel

   
   「図8-2 水分子3DModel」の説明
   
   

7. 例8-16に示すように、visibleプロパティをfalseに変更して、軸の表示をオフにします。MoleculeSampleAppを再度実行し、軸を表示せずに、実行中のアプリケーションを確認します。

   例8-16 visibleプロパティのfalseへの設定

   axisGroup.setVisible(false);
   

カメラ表示コントロールの追加

handleMouse()およびhandleKeyboard()メソッドを使用すると、様々なカメラ・ビューを表示できます。シーンでカメラのビューを操作するためのマウスとキーボード・キーの使用を示すために、ソースが用意されています。

1. 追加しようとしているhandleMouse()およびhandleKeyboard()ソース・コードで使用される変数の宣言を追加します。例8-17に示すコードをコピーし、HYDROGEN_ANGLE宣言の行の後に貼り付けます。

   例8-17 使用される変数の追加

   private static final double CONTROL_MULTIPLIER = 0.1;    private static final double SHIFT_MULTIPLIER = 10.0;    private static final double MOUSE_SPEED = 0.1;    private static final double ROTATION_SPEED = 2.0;    private static final double TRACK_SPEED = 0.3;
           
       double mousePosX;
       double mousePosY;
       double mouseOldX;
       double mouseOldY;
       double mouseDeltaX;
       double mouseDeltaY;
   

2. 例8-18に示すように、handleMouse()およびhandleKeyboard()メソッドで使用されるimport文をコピーします。これらをMoleculeSampleApp.javaファイルの先頭に貼り付けます。

   例8-18 import文の追加

   import javafx.event.EventHandler;
   import javafx.scene.input.KeyEvent;
   import javafx.scene.input.MouseEvent;
   

3. handleMouse()およびhandleKeyboard()メソッドのコード行を、付録「3D MoleculeSampleAppのコード」からコピーします。これらをMoleculeSampleApp.javaファイルのbuildMolecule()メソッドの後に追加します。

4. start()メソッドで、追加したhandleKeyboard()およびhandleMouse()メソッドのコールを追加します。例8-19で太字で示すコード行をコピーし、それらをscene.setFill(Color.GREY)行の後に貼り付けます。

   例8-19 メソッド・コールの追加

   Scene scene = new Scene(root, 1024, 768, true);
           scene.setFill(Color.GREY);
           handleKeyboard(scene, world);
           handleMouse(scene, world);
   

5. ファイルを保存します。

6. プロジェクトをコンパイルして実行します。次のマウスまたはキーボード・ストロークを使用して、様々なビューを取得します。

   • 左マウス・ボタンを押したままマウスを左右および上下にドラッグし、モデルのカメラ・ビューを、軸を中心に回転させます。

   • 右マウス・ボタンを押したままマウスを左にドラッグして、カメラ・ビューをモデルから離します。マウスを右にドラッグして、カメラ・ビューを分子モデルに近づけます。

   • [Ctrl]キーを押しながら[Z]キーを押して、モデルを初期位置に戻します。

   • [Ctrl]キーを押しながら[V]キーを押して、ビューで分子を表示および非表示にします。

   • [Ctrl]キーを押しながら[X]キーを押して、軸を表示および非表示にします。