JavaFX - รูปร่าง 3 มิติ

ในบทก่อนหน้านี้เราได้เห็นวิธีการวาดรูปทรง 2 มิติบนระนาบ XY นอกจากรูปทรง 2 มิติแล้วเรายังสามารถวาดรูปทรง 3 มิติอื่น ๆ ได้อีกด้วยโดยใช้ JavaFX

รูปร่าง 3 มิติ

โดยทั่วไปแล้วรูปทรง 3 มิติคือรูปทรงเรขาคณิตที่สามารถวาดบนระนาบ XYZ ซึ่งรวมถึงไฟล์Cylinder, Sphere และก Box.

รูปร่าง 3 มิติที่กล่าวถึงข้างต้นแต่ละแบบจะแสดงโดยคลาสและคลาสเหล่านี้ทั้งหมดเป็นของแพ็กเกจ javafx.scene.shape. ชั้นเรียนชื่อShape3D เป็นคลาสฐานของรูปทรง 3 มิติทั้งหมดใน JavaFX

การสร้างรูปร่าง 3 มิติ

ในการสร้างรูปทรง 3 มิติคุณต้อง -

• สร้างรูปแบบ 3D ที่ต้องการ

• ตั้งค่าคุณสมบัติของรูปร่าง 3 มิติ

• เพิ่มวัตถุรูปร่าง 3 มิติลงในกลุ่ม

การสร้างอินสแตนซ์คลาสที่เกี่ยวข้อง

ในการสร้างรูปร่าง 3 มิติก่อนอื่นคุณต้องสร้างอินสแตนซ์คลาสตามลำดับ ตัวอย่างเช่นหากคุณต้องการสร้างกล่อง 3 มิติคุณต้องสร้างอินสแตนซ์คลาสที่ชื่อ Box ดังนี้ -

Box box = new Box();

การตั้งค่าคุณสมบัติของรูปร่าง

หลังจากสร้างอินสแตนซ์คลาสแล้วคุณต้องตั้งค่าคุณสมบัติสำหรับรูปร่างโดยใช้เมธอด setter

ตัวอย่างเช่นในการวาดกล่อง 3 มิติคุณต้องผ่านความกว้างความสูงความลึก คุณสามารถระบุค่าเหล่านี้โดยใช้เมธอด setter ตามลำดับดังนี้ -

//Setting the properties of the Box 
box.setWidth(200.0); 
box.setHeight(400.0);   
box.setDepth(200.0);

การเพิ่ม Shape Object ในกลุ่ม

สุดท้ายคุณต้องเพิ่มวัตถุของรูปร่างลงในกลุ่มโดยส่งเป็นพารามิเตอร์ของตัวสร้างดังที่แสดงด้านล่าง

//Creating a Group object  
Group root = new Group(box);

ตารางต่อไปนี้แสดงรายการรูปทรง 3 มิติต่างๆที่ JavaFX จัดเตรียมไว้ให้

ส. เลขที่	รูปร่างและคำอธิบาย
1	กล่อง ลูกบาศก์เป็นรูปทรงสามมิติที่มี length (ความลึก), widthและก height. ใน JavaFX กล่องสามมิติจะแสดงโดยคลาสที่ชื่อ Box. คลาสนี้เป็นของแพ็คเกจjavafx.scene.shape. ด้วยการสร้างอินสแตนซ์คลาสนี้คุณสามารถสร้างบ็อกซ์โหนดใน JavaFX คลาสนี้มีคุณสมบัติ 3 ประการของประเภทข้อมูลคู่คือ - width - ความกว้างของกล่อง height - ความสูงของกล่อง depth - ความลึกของกล่อง
2	กระบอกสูบ ทรงกระบอกเป็นของแข็งปิดที่มีฐานคู่ขนาน (ส่วนใหญ่เป็นวงกลม) สองฐานเชื่อมต่อกันด้วยพื้นผิวโค้ง อธิบายโดยพารามิเตอร์สองตัวคือ radius ของฐานกลมและ height ของกระบอกสูบ ใน JavaFX กระบอกสูบจะแสดงโดยคลาสที่ชื่อ Cylinder. คลาสนี้เป็นของแพ็คเกจjavafx.scene.shape. ด้วยการสร้างอินสแตนซ์คลาสนี้คุณสามารถสร้างโหนดทรงกระบอกใน JavaFX คลาสนี้มีคุณสมบัติ 2 ประการของประเภทข้อมูลคู่คือ - height - ความสูงของกระบอกสูบ radius - รัศมีของกระบอกสูบ
3	ทรงกลม ทรงกลมถูกกำหนดให้เป็นชุดของจุดที่มีระยะทางเท่ากัน r จากจุดที่กำหนดในพื้นที่ 3 มิติ ระยะนี้ r คือรัศมีของทรงกลมและจุดที่กำหนดคือจุดศูนย์กลางของทรงกลม ใน JavaFX ทรงกลมจะแสดงโดยคลาสที่มีชื่อว่า Sphere. คลาสนี้เป็นของแพ็คเกจjavafx.scene.shape. โดยการสร้างอินสแตนซ์คลาสนี้คุณสามารถสร้างโหนดทรงกลมใน JavaFX ชั้นนี้มีคุณสมบัติชื่อ radiusของประเภทข้อมูลคู่ มันแสดงถึงรัศมีของทรงกลม

คุณสมบัติของวัตถุ 3 มิติ

สำหรับวัตถุ 3 มิติทั้งหมดคุณสามารถตั้งค่าคุณสมบัติต่างๆเช่น Cull Face, Drawing Mode, Material

ส่วนต่อไปนี้จะกล่าวถึงคุณสมบัติของวัตถุ 3 มิติ

ใบหน้า Cull

โดยทั่วไปการคัดออกคือการลบส่วนของรูปร่างที่ไม่เหมาะสม (ซึ่งมองไม่เห็นในพื้นที่มุมมอง)

คุณสมบัติ Cull Face เป็นประเภท CullFaceและแสดงถึง Cull Face ของรูปทรง 3 มิติ คุณสามารถตั้งค่า Cull Face ของรูปร่างได้โดยใช้วิธีsetCullFace() ดังแสดงด้านล่าง -

box.setCullFace(CullFace.NONE);

ประเภทจังหวะของรูปร่างสามารถ -

• None - ไม่มีการคัดออก (CullFace.NONE)

• Front- รูปหลายเหลี่ยมที่หันหน้าไปทางด้านหน้าทั้งหมดถูกคัดออก (CullFace.FRONT).

• Back- รูปหลายเหลี่ยมหันหลังทั้งหมดจะถูกคัดออก (StrokeType.BACK).

ตามค่าเริ่มต้นใบหน้าคัดออกของรูปร่าง 3 มิติคือย้อนกลับ

ตัวอย่าง

โปรแกรมต่อไปนี้เป็นตัวอย่างที่แสดงให้เห็นใบหน้าคัดลอกต่างๆของทรงกลม บันทึกรหัสนี้ในไฟล์ที่มีชื่อSphereCullFace.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.shape.CullFace; 
import javafx.stage.Stage; 
import javafx.scene.shape.Sphere; 
         
public class SphereCullFace extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Drawing Sphere1 
      Sphere sphere1 = new Sphere();
      
      //Setting the radius of the Sphere 
      sphere1.setRadius(50.0);   
      
      //Setting the position of the sphere 
      sphere1.setTranslateX(100); 
      sphere1.setTranslateY(150); 
      
      //setting the cull face of the sphere to front 
      sphere1.setCullFace(CullFace.FRONT); 
       
      //Drawing Sphere2 
      Sphere sphere2 = new Sphere(); 
      
      //Setting the radius of the Sphere 
      sphere2.setRadius(50.0);   
      
      //Setting the position of the sphere 
      sphere2.setTranslateX(300);  
      sphere2.setTranslateY(150); 
      
      //Setting the cull face of the sphere to back 
      sphere2.setCullFace(CullFace.BACK); 
             
      //Drawing Sphere3 
      Sphere sphere3 = new Sphere(); 
      
      //Setting the radius of the Sphere 
      sphere3.setRadius(50.0);   
      
      //Setting the position of the sphere 
      sphere3.setTranslateX(500); 
      sphere3.setTranslateY(150); 
      
      //Setting the cull face of the sphere to none 
      sphere2.setCullFace(CullFace.NONE);          
       
      //Creating a Group object  
      Group root = new Group(sphere1, sphere2, sphere3); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage
      stage.setTitle("Drawing a Sphere"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

คอมไพล์และเรียกใช้ไฟล์ Java ที่บันทึกไว้จากพรอมต์คำสั่งโดยใช้คำสั่งต่อไปนี้

javac SphereCullFace.java 
java SphereCullFace

ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ที่แสดงสามทรงกลมพร้อมค่าใบหน้าที่ถูกคัดออก FRONT, BACK และ NONE ตามลำดับดังนี้ -

โหมดการวาด

มันเป็นคุณสมบัติของประเภท DrawModeและแสดงถึงโหมดการวาดภาพที่ใช้ในการวาดรูปร่าง 3 มิติในปัจจุบัน คุณสามารถเลือกโหมดการวาดเพื่อวาดรูปทรง 3 มิติโดยใช้วิธี setDrawMode () ดังต่อไปนี้ -

box.setDrawMode(DrawMode.FILL);

ใน JavaFX คุณสามารถเลือกโหมดการวาดสองโหมดเพื่อวาดรูปทรง 3 มิติซึ่ง ได้แก่ -

• Fill - โหมดนี้วาดและเติมรูปร่าง 2 มิติ (DrawMode.FILL)

• Line - โหมดนี้วาดรูปทรง 3 มิติโดยใช้เส้น (DrawMode.LINE)

ตามค่าเริ่มต้นโหมดการวาดของรูปร่าง 3 มิติคือการเติม

ตัวอย่าง

โปรแกรมต่อไปนี้เป็นตัวอย่างที่แสดงให้เห็นถึงโหมดการวาดต่างๆของกล่อง 3D บันทึกรหัสนี้ในไฟล์ที่มีชื่อBoxDrawMode.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.PerspectiveCamera; 
import javafx.scene.Scene;  
import javafx.scene.shape.Box; 
import javafx.scene.shape.DrawMode; 
import javafx.stage.Stage; 
         
public class BoxDrawMode extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Drawing a Box 
      Box box1 = new Box(); 
      
      //Setting the properties of the Box 
      box1.setWidth(100.0); 
      box1.setHeight(100.0);   
      box1.setDepth(100.0); 
      
      //Setting the position of the box 
      box1.setTranslateX(200); 
      box1.setTranslateY(150); 
      box1.setTranslateZ(0);
      
      //Setting the drawing mode of the box 
      box1.setDrawMode(DrawMode.LINE); 
       
      //Drawing a Box 
      Box box2 = new Box(); 
      
      //Setting the properties of the Box 
      box2.setWidth(100.0); 
      box2.setHeight(100.0);   
      box2.setDepth(100.0); 
      
      //Setting the position of the box 
      box2.setTranslateX(450); //450 
      box2.setTranslateY(150);//150 
      box2.setTranslateZ(300); 
  
      //Setting the drawing mode of the box 
      box2.setDrawMode(DrawMode.FILL);     
         
      //Creating a Group object   
      Group root = new Group(box1, box2); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
       
      //Setting camera 
      PerspectiveCamera camera = new PerspectiveCamera(false); 
      camera.setTranslateX(0); 
      camera.setTranslateY(0); 
      camera.setTranslateZ(0); 
      scene.setCamera(camera);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing a Box"); 
         
      //Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

คอมไพล์และเรียกใช้ไฟล์ java ที่บันทึกไว้จากพรอมต์คำสั่งโดยใช้คำสั่งต่อไปนี้

javac BoxDrawMode.java 
java BoxDrawMode

ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ที่แสดงสองกล่องพร้อมค่าโหมดวาด LINE และ FILL ตามลำดับดังนี้ -

วัสดุ

คุณสมบัติ cull Face เป็นประเภท Materialและใช้ในการเลือกพื้นผิวของวัสดุที่เป็นรูปทรง 3 มิติ คุณสามารถตั้งค่าวัสดุของรูปทรง 3 มิติได้โดยใช้วิธีsetCullFace() ดังต่อไปนี้ -

cylinder.setMaterial(material);

ดังที่ได้กล่าวไว้ข้างต้นสำหรับวิธีนี้คุณต้องส่งผ่านวัตถุประเภทวัสดุ PhongMaterial คลาสของแพ็คเกจ javafx.scene.paintเป็นคลาสย่อยของคลาสนี้และมีคุณสมบัติ 7 ประการที่แสดงถึงวัสดุที่แรเงาของ Phong คุณสามารถใช้วัสดุประเภทนี้ทั้งหมดกับพื้นผิวของรูปทรง 3 มิติได้โดยใช้วิธีการตั้งค่าของคุณสมบัติเหล่านี้

ต่อไปนี้เป็นประเภทของวัสดุที่มีอยู่ใน JavaFX -

• bumpMap - แสดงถึงแผนที่ปกติที่จัดเก็บเป็นภาพ RGB

• diffuseMap - นี่แสดงถึงแผนที่กระจาย

• selfIlluminationMap - แสดงถึงแผนที่ส่องสว่างในตัวของวัสดุ PhongMaterial นี้

• specularMap - แสดงถึงแผนที่เฉพาะของวัสดุพงษ์วัสดุนี้

• diffuseColor - แสดงถึงสีที่กระจายของวัสดุ PhongMaterial นี้

• specularColor - แสดงถึงสีพิเศษของวัสดุ PhongMaterial นี้

• specularPower - นี่แสดงถึงพลังพิเศษของวัสดุพงษ์วัสดุนี้

โดยค่าเริ่มต้นวัสดุที่มีรูปทรง 3 มิติคือวัสดุ PhongMaterial ที่มีสีเทาอ่อนกระจาย

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่แสดงวัสดุต่างๆบนกระบอกสูบ บันทึกรหัสนี้ในไฟล์ที่มีชื่อCylinderMaterials.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.PerspectiveCamera; 
import javafx.scene.Scene; 
import javafx.scene.image.Image; 
import javafx.scene.paint.Color; 
import javafx.scene.paint.PhongMaterial; 
import javafx.scene.shape.Cylinder; 
import javafx.stage.Stage;

public class CylinderMaterials extends Application {  
   @Override 
   public void start(Stage stage) { 
      //Drawing Cylinder1 
      Cylinder cylinder1 = new Cylinder();         
   
      //Setting the properties of the Cylinder 
      cylinder1.setHeight(130.0f); 
      cylinder1.setRadius(30.0f);   
     
      //Setting the position of the Cylinder 
      cylinder1.setTranslateX(100); 
      cylinder1.setTranslateY(75); 
        
      //Preparing the phong material of type bump map  
      PhongMaterial material1 = new PhongMaterial();  
      material1.setBumpMap(new Image
         ("http://www.tutorialspoint.com/images/tplogo.gif"));   
      
      //Setting the bump map material to Cylinder1 
      cylinder1.setMaterial(material1);    
       
      //Drawing Cylinder2 
      Cylinder cylinder2 = new Cylinder();         
      
      //Setting the properties of the Cylinder 
      cylinder2.setHeight(130.0f); 
      cylinder2.setRadius(30.0f);   
      
      //Setting the position of the Cylinder 
      cylinder2.setTranslateX(200); 
      cylinder2.setTranslateY(75); 
       
      //Preparing the phong material of type diffuse map 
      PhongMaterial material2 = new PhongMaterial();
      material2.setDiffuseMap(new Image
         ("http://www.tutorialspoint.com/images/tp-logo.gif")); 
      
      //Setting the diffuse map material to Cylinder2 
      cylinder2.setMaterial(material2);         
       
      //Drawing Cylinder3 
      Cylinder cylinder3 = new Cylinder();         
      
      //Setting the properties of the Cylinder 
      cylinder3.setHeight(130.0f); 
      cylinder3.setRadius(30.0f);   
  
      //Setting the position of the Cylinder 
      cylinder3.setTranslateX(300); 
      cylinder3.setTranslateY(75); 
       
      //Preparing the phong material of type Self Illumination Map 
      PhongMaterial material3 = new PhongMaterial();  
      material3.setSelfIlluminationMap(new Image
         ("http://www.tutorialspoint.com/images/tp-logo.gif"));  
      
      //Setting the Self Illumination Map material to Cylinder3 
      cylinder3.setMaterial(material3);  
       
      //Drawing Cylinder4 
      Cylinder cylinder4 = new Cylinder();         
      
      //Setting the properties of the Cylinder 
      cylinder4.setHeight(130.0f); 
      cylinder4.setRadius(30.0f);   
      
      //Setting the position of the Cylinder 
      cylinder4.setTranslateX(400); 
      cylinder4.setTranslateY(75); 
       
      //Preparing the phong material of type Specular Map  
      PhongMaterial material4 = new PhongMaterial();  
      material4.setSpecularMap(new Image
         ("http://www.tutorialspoint.com/images/tp-logo.gif")); 
      
      //Setting the Specular Map material to Cylinder4 
      cylinder4.setMaterial(material4);  
       
      //Drawing Cylinder5 
      Cylinder cylinder5 = new Cylinder();         
      
      //Setting the properties of the Cylinder 
      cylinder5.setHeight(130.0f); 
      cylinder5.setRadius(30.0f);   
      
      //Setting the position of the Cylinder 
      cylinder5.setTranslateX(100); 
      cylinder5.setTranslateY(300); 
       
      //Preparing the phong material of type diffuse color 
      PhongMaterial material5 = new PhongMaterial();  
      material5.setDiffuseColor(Color.BLANCHEDALMOND); 
      
      //Setting the diffuse color material to Cylinder5 
      cylinder5.setMaterial(material5);   
       
      //Drawing Cylinder6  
      Cylinder cylinder6 = new Cylinder();         
      
      //Setting the properties of the Cylinder 
      cylinder6.setHeight(130.0f); 
      cylinder6.setRadius(30.0f);   
      
      //Setting the position of the Cylinder 
      cylinder6.setTranslateX(200); 
      cylinder6.setTranslateY(300); 
       
      //Preparing the phong material of type specular color 
      PhongMaterial material6 = new PhongMaterial();  
      
      //setting the specular color map to the material 
      material6.setSpecularColor(Color.BLANCHEDALMOND); 
      
      //Setting the specular color material to Cylinder6 
      cylinder6.setMaterial(material6);    
       
      //Drawing Cylinder7 
      Cylinder cylinder7 = new Cylinder();
      
      //Setting the properties of the Cylinder 
      cylinder7.setHeight(130.0f); 
      cylinder7.setRadius(30.0f);   
      
      //Setting the position of the Cylinder 
      cylinder7.setTranslateX(300); 
      cylinder7.setTranslateY(300); 
       
      //Preparing the phong material of type Specular Power 
      PhongMaterial material7 = new PhongMaterial();  
      material7.setSpecularPower(0.1); 
      
      //Setting the Specular Power material to the Cylinder 
      cylinder7.setMaterial(material7);         
      
      //Creating a Group object  
      Group root = new Group(cylinder1 ,cylinder2, cylinder3, 
      cylinder4, cylinder5, cylinder6, cylinder7); 
          
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 400); 
       
      //Setting camera 
      PerspectiveCamera camera = new PerspectiveCamera(false); 
      camera.setTranslateX(0); 
      camera.setTranslateY(0); 
      camera.setTranslateZ(-10); 
      scene.setCamera(camera); 
       
      //Setting title to the Stage 
      stage.setTitle("Drawing a cylinder"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

คอมไพล์และเรียกใช้ไฟล์ java ที่บันทึกไว้จากพรอมต์คำสั่งโดยใช้คำสั่งต่อไปนี้

Javac CylinderMaterials.java 
java CylinderMaterials

ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ที่แสดง 7 กระบอกสูบพร้อมด้วยวัสดุ Bump Map, Diffuse Map, Self-Illumination Map, Specular Map, Diffuse Color, Specular Color, (BLANCHEDALMOND) Specular Power ตามลำดับดังที่แสดงในภาพหน้าจอต่อไปนี้ -