ともさんのHP >プロブラミング >JavaFX >3Dシーンに2Dコントロールを表示

【JavaFX】3Dシーンに2Dコントロールを表示するサンプルプログラム

3Dシーンの中にボタンなどのコントロールや、2次元図形を表示させるサンプルプログラムです。
下の動画のように、3D空間の中にコントロールを配置します。ボタン楽天 の操作もできます。
初音ミクJavaFX

広告

サンプルプログラムで表示するのは下の画像。四角いメッシュに画像を貼り付け、ボタンと直線を引いています。
JavaFX3Dシーンにコントロール配置


Groupに置く

3Dシェイプとカメラ、照明をGroupにaddすることで3D表示ができます。
ここに2Dのボタンコントロールを配置する場合、PaneをGroupにaddし、Paneにボタンを置きます。
同様に、3D図形を描画する場合は、CanvasをGroupにaddし、Canvasに線を描画します。

3Dシェイプの配置

このサンプルプログラムでは、四角い平らなメッシュを作り、画像を張り付け、 カメラ 楽天 の正面に配置しています。

 //メッシュを置く
 FlatMesh fm = new FlatMesh( 5 , 5 , 20 , 20 , .01 );
 MeshView meshView  = new MeshView();
 meshView.setMesh( fm.getTriangleMesh() );
 meshView.setDrawMode( DrawMode.FILL);
 PhongMaterial material = new PhongMaterial();
 Image img = new Image("file:d:/work/java/2.png");
 material.setDiffuseMap( img );
 meshView.setMaterial(material);
 meshView.setCullFace(CullFace.NONE);
 group.getChildren().add( meshView );

TriangleMeshを作るclass、FlatMeshはこちらを参照ください。

ボタンの配置

FlowPaneを作り、その上にボタンを配置します。
FlowPaneをメッシュを入れた同じグループに入れます。
ボタンの位置は、Paneの中で調整するか、Paneの位置をGroupの中で調整します。
下の例ではPaneをX方向に移動させています。

 fp.setTranslateX(100);

ボタンを回転させたい場合は、Paneを回転させることで行います。

 fp.setRotationAxis(new Point3D(1,0,0));
 fp.setRotate(50);

こんな感じ。

 //Paneを置いてボタンを配置
 Button button = new Button("2Dボタン");
 button.setPrefSize(80,10);
 FlowPane fp= new FlowPane();
 fp.setTranslateX(100);
 fp.getChildren().add( button );
 group.getChildren().add( fp );


2次元図形の描画

図形を描画する場合はCanvasを置いて描きます。
Canvasもメッシュを入れた同じグループに入れます。

 //Canvasを置いて線を描画
 Canvas canvas  = new Canvas( 200 , 200 );
 group.getChildren().add( canvas );
 GraphicsContext gc = canvas.getGraphicsContext2D();
 gc.setStroke(Color.BLUE);
 gc.strokeLine(0, 0, 50, 50);


サンプルプログラム

全体のコードは以下の通り。

package tomojavalib.fx;

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.FlowPane;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.CullFace;
import javafx.scene.shape.DrawMode;
import javafx.scene.shape.MeshView;
import javafx.scene.transform.*;
import javafx.stage.Stage;

/**単純なJavaFXプログラム
 *3Dシーンの中に2D図形を置く
 * */
public class TwoDOnTreeDTest extends Application {

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

 @Override
 public void start(Stage stage) throws Exception {
  Scene scene = make3dScene();
  stage.setScene(scene);
  //タイトルの表示
  stage.setTitle("3Dシーンの中に2D図形を置く");
  stage.show();
 }

private Scene make3dScene(){
 Group group = new Group();
 //メッシュを置く
 FlatMesh fm = new FlatMesh( 5 , 5 , 20 , 20 , .01 );
 MeshView meshView  = new MeshView();
 meshView.setMesh( fm.getTriangleMesh() );
 meshView.setDrawMode( DrawMode.FILL);
 PhongMaterial material = new PhongMaterial();
 Image img = new Image("file:d:/work/java/2.png");
 material.setDiffuseMap( img );
 meshView.setMaterial(material);
 meshView.setCullFace(CullFace.NONE);
 group.getChildren().add( meshView );
 // カメラを置く
 PerspectiveCamera camera = new PerspectiveCamera( true );
 Translate cameratranslate = new Translate(50,50,-450);
 camera.getTransforms().add( cameratranslate );
 camera.setFarClip( 1000. );
 camera.setFieldOfView( 30. );
 group.getChildren().add( camera );
 //光源を置く
 LightBase light = new AmbientLight();
 group.getChildren().add( light );
 
 //Paneを置いてボタンを配置
 Button button = new Button("2Dボタン");
 button.setPrefSize(80,10);
 FlowPane fp= new FlowPane();
 fp.setTranslateX(100);
 fp.getChildren().add( button );
 group.getChildren().add( fp );
 
 //Canvasを置いて線を描画
 Canvas canvas  = new Canvas( 200 , 200 );
 group.getChildren().add( canvas );
 GraphicsContext gc = canvas.getGraphicsContext2D();
 gc.setStroke(Color.BLUE);
 gc.strokeLine(0, 0, 50, 50);

 //Sceneの設定
 Scene s3d = new Scene(group, 320, 240);
 s3d.setFill(Color.BLACK);
 s3d.setCamera( camera );

return s3d;
}
}

最終更新日: 2017-05-23 14:28:03

ともさんのHP >プロブラミング >JavaFX >3Dシーンに2Dコントロールを表示

広告
新着ページ

DXFファイルの違い  
デジタル顕微カメラ  
萩の栽培、手入れ、増やしかた  
セミの飼いかた  
ダンゴムシの飼い方  
玉縁ボタンホールの縫い方  
柿渋  
ミシンでボタンを付ける  
アリジゴクの飼いかた  
重い石を一人で動かす方法  
スリット入り涼感シャツ  

他のサイト

3D-CAD
洋裁CAD

いいねなど

 RSS 

Author: Tomoyuki Ito

このサイトの文章・写真の無断転載を禁じます