JavaFX 3D - Box

繼上一篇JavaFX 3D System Requirements，本篇將介紹Box類別。

JavaFX 8新增Shape3D抽象類別，繼承自Shape3D抽象類別的3D物件包括Box, Cylinder, MeshView, Sphere等，Shape3D抽象類別定義以下屬性：

• cullFace：沿用自OpenGL的GL_CULL_FACE。多邊體 (Polygon) 是由數個面 (Facet) 所組成，每一個面由數個頂點 (Vertex) 所設定，在描繪3D物件時，面對鏡頭的一面稱為Front Face，背對鏡頭的一面稱為Back Face，由於描繪3D物件需要複雜的計算，因此為增加執行效率，通常會省略描繪背對鏡頭的一面，此功能稱為Cull Face。在OpenGL中，以glCullFace()方法設定省略描繪Front Face或Back Face，欲啟用Cull Face功能，則以glEnable(GL_CULL_FACE)方法設定。JavaFX 8的Shape3D抽象類別沿用OpenGL此一功能，以cullFace屬性設定是否省略描繪Front Face或Back Face，分別為CullFace.FRONT、CullFace.BACK或CullFace.NONE，代表省略描繪Front Face、Back Face或不省略。
• drawMode：定義3D物件的繪製方式，分別為DrawMode.FILL或DrawMode.LINE，代表填滿3D物件表面或以Wireframe方式呈現。
• material：定義3D物件表面的材質。

Shape3D抽象類別提供以下方法：

• getCullFace()：取得省略描繪的一面，回傳CullFace.FRONT、CullFace.BACK或CullFace.NONE，代表省略描繪Front Face、Back Face或不省略。
• setCullFace()：設定省略描繪的一面，預設為CullFace.BACK。
• getDrawMode()：取得3D物件的繪製方式，回傳DrawMode.FILL或DrawMode.LINE，代表填滿3D物件表面或以Wireframe方式呈現。
• setDrawMode()：設定3D物件的繪製方式，預設為DrawMode.FILL。
• getMaterial()：取得3D物件表面的材質。
• setMaterial()：設定3D物件表面的材質。

Box類別用以建立3D方塊，其建構函式如下，分別由width、height與depth設定寬度、高度與深度：

  public Box()
  public Box(double width, double height, double depth)

並提供以下方法：

• getDepth()：取得方塊的深度。
• setDepth()：設定方塊的深度。
• getHeight()：取得方塊的高度。
• setHeight()：設定方塊的高度。
• getWidth()：取得方塊的寬度。
• setWidth()：設定方塊的寬度。

請參考以下範例分別示範以setCullFace()與setDrawMode()方法不同的組合所產生的效果：

// 建立Box物件
Box box = new Box(100, 100, 100); 
// 以Wireframe方式呈現
box.setDrawMode(DrawMode.LINE); 
// 不省略
box.setCullFace(CullFace.NONE); 
// 平移Box物件
box.setLayoutX(150);
box.setLayoutY(150); 
// 旋轉Box物件
box.getTransforms().add(new Rotate(30,Rotate.X_AXIS));
box.getTransforms().add(new Rotate(30,Rotate.Y_AXIS));
box.getTransforms().add(new Rotate(30,Rotate.Z_AXIS)); 

Group root = new Group(); 
root.getChildren().add(box);
...

【執行結果】

// 建立Box物件
Box box = new Box(100, 100, 100); 
// 以Wireframe方式呈現
box.setDrawMode(DrawMode.LINE); 
// 省略Back Face
box.setCullFace(CullFace.BACK); 
...

【執行結果】

// 建立Box物件
Box box = new Box(100, 100, 100); 
// 以Wireframe方式呈現
box.setDrawMode(DrawMode.LINE); 
// 省略Front Face
box.setCullFace(CullFace.FRONT); 
...

【執行結果】

// 建立Box物件
Box box = new Box(100, 100, 100); 
// 以填滿方式呈現
box.setDrawMode(DrawMode.FILL); 
// 省略Back Face
box.setCullFace(CullFace.BACK); 
...

【執行結果】

// 建立Box物件
Box box = new Box(100, 100, 100); 
// 以填滿方式呈現
box.setDrawMode(DrawMode.FILL); 
// 省略Front Face
box.setCullFace(CullFace.FRONT); 
...

【執行結果】

以下範例示範setMaterial()方法設定物件表面的材質，其中以PhongMaterial類別設定材質的相關顏色 (註)：

// 建立Box物件
Box box = new Box(100, 100, 100); 
// 以填滿方式呈現
box.setDrawMode(DrawMode.FILL); 
// 設定材質
PhongMaterial material = new PhongMaterial(); 
// Diffuse Color 
material.setDiffuseColor(Color.YELLOW); 
// Specular Color 
material.setSpecularColor(Color.WHITE); 
// 設定物件表面的材質
box.setMaterial(material);
// 平移Box物件
box.setLayoutX(150);
box.setLayoutY(150); 
// 旋轉Box物件
box.getTransforms().add(new Rotate(30,Rotate.X_AXIS));
box.getTransforms().add(new Rotate(30,Rotate.Y_AXIS));
box.getTransforms().add(new Rotate(30,Rotate.Z_AXIS)); 

Group root = new Group(); 
root.getChildren().add(box);
...

【執行結果】

以下範例示範setMaterial()方法設定貼圖：

// 建立Box物件
Box box = new Box(100, 100, 100); 

Image image = new Image(  
  getClass().getResourceAsStream("images/Javafx.png")); 

// 設定材質
PhongMaterial material = new PhongMaterial(); 
// 設定貼圖
material.setDiffuseMap(image);
...

【執行結果】

此外，可加入滑鼠事件，當滑鼠移動時 (Mouse Moved)，藉由Rotate類別旋轉物件：