【JavaFX】3Dシーンに2Dコントロールを表示するサンプルプログラム
3Dシーンの中にボタンなどのコントロールや、2次元図形を表示させるサンプルプログラムです。
下の動画のように、3D空間の中にコントロールを配置します。ボタン楽天 の操作もできます。
サンプルプログラムで表示するのは下の画像。四角いメッシュに画像を貼り付け、ボタンと直線を引いています。
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