แบบฝึกหัด - ดูใน MR และ View in 3D

เสร็จสมบูรณ์เมื่อ

Easy-Sales เป็นแอปพลิเคชันความเป็นจริงผสมเชิงขายที่สร้างขึ้นเพื่อปรับปรุงประสบการณ์การช็อปปิ้ง พนักงานขายที่ใช้แอปพลิเคชันนี้สามารถตรวจสอบและวัดสภาพแวดล้อมของลูกค้าเพื่อกําหนดว่าผลิตภัณฑ์ใดที่จะเป็นไปได้ในพื้นที่ พวกเขายังสามารถช่วยให้ลูกค้าแสดงภาพผลิตภัณฑ์ผ่านความเป็นจริงผสม

เราจะใช้ คุณลักษณะ View in 3D และ View in MR ของ Power Apps เพื่อแสดงภาพผลิตภัณฑ์อย่างถูกต้อง

เพิ่มวัตถุ 3 มิติไปยังรายการ SharePoint

แบบจําลอง 3 มิติและรูปภาพที่จําเป็นสําหรับแอปพลิเคชันจะถูกเก็บไว้ในรายการ SharePoint มาเริ่มต้นโดยการเพิ่มทรัพยากรที่จําเป็นลงในรายการนี้

1. ในรายการ SharePoint ที่สร้างขึ้นที่ชื่อว่า Easy Sales ให้เลือกคอลัมน์ + เพิ่ม จากนั้นเลือกแสดง/ซ่อนคอลัมน์

   

2. ตรวจสอบให้แน่ใจว่าได้เลือก สิ่งที่แนบมา แล้วกด นําไปใช้ ที่ด้านบน

   

3. เลือกรายการในรายการ จากนั้นเลือกเพิ่มสิ่งที่แนบมา เลือกแบบจําลอง 3 มิติ (ไฟล์.glb) หรือ รูปภาพ (ไฟล์.jpg) ในโฟลเดอร์แบบกําหนดเองของ Power Apps ทําตามขั้นตอนเดียวกันสําหรับหน่วยข้อมูลทั้งหมดในรายการ

   

4. เลือกรายการแบบเลื่อนลงที่อยู่ถัดจากคอลัมน์สิ่งที่แนบมา จากนั้นเลือกแสดงสิ่งที่แนบมาก่อน เราต้องการวางไว้ก่อนเพื่อให้เข้าถึงได้ง่าย

   

สร้างหน้ารายละเอียดและเพิ่มคอมโพเนนต์ มุมมองใน 3 มิติ

หน้ารายละเอียดประกอบด้วยรายละเอียดและข้อมูลทั้งหมดเกี่ยวกับผลิตภัณฑ์ที่เลือก จะช่วยให้คุณเข้าใจถึงคุณสมบัติบางอย่างของผลิตภัณฑ์ คุณต้องเชื่อมต่อหน้าผลิตภัณฑ์ที่คุณออกแบบในส่วนก่อนหน้าและหน้ารายละเอียดที่สร้างขึ้นในส่วนนี้ ที่นี่ คุณยังใช้คอมโพเนนต์ มุมมองใน 3 มิติ ของ Power Apps เพื่อเพิ่มเนื้อหา 3 มิติไปยังแอปพื้นที่ทํางานของคุณ คุณจะสามารถหมุนและย่อ/ขยายบนวัตถุ 3 มิติเพื่อให้ได้ภาพที่ดีขึ้น

1. สร้างสองหน้าใหม่ และเปลี่ยนชื่อ Product_details และ Carpet_details

   

2. เลือก>ไอคอนในตัวควบคุมแกลเลอรีที่รวมอยู่ในหน้าผลิตภัณฑ์และหน้าพรม จากนั้นกําหนดค่าคุณสมบัติ OnSelect โดยการเพิ่มบรรทัดต่อไปนี้ในแท็บ ฟังก์ชัน ตามลําดับ

   Navigate(Product_details,ScreenTransition.Cover,{content : ThisItem})
   

   Navigate(Carpet_details,ScreenTransition.Cover,{content_carpets : ThisItem})
   

   

3. เริ่มสร้างหน้า Product_details โดยการเพิ่มป้ายชื่อสองถึงสามป้าย เช่น ราคามิติน้ําหนักสี และวัสดุ คุณสามารถแก้ไขข้อความภายในป้ายชื่อ โดยการแทรกข้อความที่ต้องการภายในคุณสมบัติ ข้อความ ของ ป้ายชื่อนั้น เปลี่ยนชื่อ ป้ายชื่อ ให้สอดคล้องกัน

   

   หมายเหตุ

   คุณสามารถกําหนดธีม ฟอนต์ และจานสีของแอปพลิเคชันของคุณเพื่อปรับปรุงประสบการณ์การใช้งานและลักษณะที่ปรากฏของผู้ใช้

4. แทรกป้ายชื่ออื่นที่ชื่อว่า ชื่อผลิตภัณฑ์ เพื่อแสดงชื่อผลิตภัณฑ์ที่ด้านบนและจัดแนวกึ่งกลาง กําหนดค่าคุณสมบัติ ข้อความ ของป้ายชื่อ โดยการเพิ่มบรรทัดต่อไปนี้:

   content.'{Name}'
   

   

5. เลือกรายการแบบเลื่อนลง แล้วเลือกรูปเพื่อแทรกรูปภาพในหน้าจอ Product_details กําหนดค่าคุณสมบัติ รูปภาพ ด้วยวิธีต่อไปนี้:

   content.ImageLink
   

   

6. เราจะซ้อนทับคอมโพเนนต์ มุมมองใน 3 มิติ เหนือคอมโพเนนต์ รูปภาพ ผลิตภัณฑ์ที่ไม่มีแบบจําลอง 3 มิติแนบมากับสามารถดูได้จากคอมโพเนนต์ของรูปภาพ หากต้องการเพิ่มมุมมองในคอมโพเนนต์ 3D ให้เลือกรายการดรอปดาวน์สื่อจากนั้นเลือกมุมมองใน 3 มิติ

   

   หมายเหตุ

   รูปร่างเริ่มต้นจะรวมอยู่ในคอมโพเนนต์ คุณสามารถเปลี่ยนรูปร่างนี้เป็นรูปร่างอื่นได้โดยการเปลี่ยนคุณสมบัติ แหล่ง

7. จัดตําแหน่งคอมโพเนนต์เหนือคอมโพเนนต์รูปภาพ ดังที่แสดงในรูป และกําหนดค่าคุณสมบัติ แหล่ง ของคอมโพเนนต์ มุมมองใน 3 มิติ ดังต่อไปนี้เพื่อเชื่อมต่อแบบจําลอง 3 มิติจากรายการ SharePoint

   First(Gallery_products.Selected.Attachments).Value
   

   

8. เราจะเปลี่ยนคุณสมบัติที่มองเห็นได้ของทั้งรูปภาพและมุมมองในคอมโพเนนต์ 3 มิติเพื่อให้สามารถดูผลิตภัณฑ์ได้อย่างง่ายดายโดยขึ้นอยู่กับชนิดไฟล์ที่จัดเก็บไว้ในคอลัมน์สิ่งที่แนบมา กําหนดค่าคุณสมบัติ Visible ของ รูปภาพ และ มุมมองในคอมโพเนนต์ 3D ดังนี้:

   • รูป :

     If(Gallery_products.Selected.FileType = "Image", true, false)
     

     

   • ดูใน 3 มิติ :

     If(Gallery_products.Selected.FileType = "Model", true, false)
     

     

9. เพิ่มป้ายชื่อที่ว่างเปล่าข้าง ๆ ป้ายชื่อราคาขนาดน้ําหนักสี และ วัสดุ ดังที่แสดงในรูปภาพเพื่อแสดงข้อมูลผลิตภัณฑ์ภายใต้หัวเรื่องเหล่านั้น กําหนดค่าคุณสมบัติ Text ของป้ายชื่อเหล่านี้ดังต่อไปนี้:

   • ราคา :

     content.Price
     

     

   • ขนาด :

     content.Dimensions
     

     

   • น้ําหนัก :

     content.Weight
     

     

   • สี :

     content.Color
     

     

   • วัสดุ :

     content.PrimaryMaterial
     

     

10. เราจะเพิ่มไอคอน ย้อนกลับ เพื่อนําทางไปยังหน้าจอก่อนหน้า เมื่อต้องเพิ่มไอคอนย้อนกลับ ขยายไอคอนดรอปดาวน์ และเลือกไอคอนย้อนกลับ จัดตําแหน่งไอคอน ย้อนกลับ อย่างถูกต้องและกําหนดค่าคุณสมบัติ OnSelect โดยการเพิ่มรายการต่อไปนี้:

    Navigate('Products',ScreenTransition.Cover)
    

    

    ทําตามขั้นตอนเดียวกันสําหรับ Carpet_details ปรับแต่งฟังก์ชัน นําทาง ให้สอดคล้องกัน

    เคล็ดลับ

    หากต้องการบันทึกความคืบหน้าของคุณ ให้เลือกแท็บ ไฟล์ ที่ด้านบนและเลือกตัวเลือก บันทึก คุณยังสามารถใช้ Ctrl + S เพื่อบันทึกความคืบหน้าของคุณได้

    หมายเหตุ

    หลีกเลี่ยงการรวมมุมมองในคอมโพเนนต์ 3 มิติบนหน้า Carpet_details เราไม่ได้ใช้แบบจําลอง 3 มิติสําหรับหมวดหมู่พรม

ดูในส่วนประกอบ MR

ดูใน MR เป็นคุณลักษณะความเป็นจริงผสมที่ให้มาโดย Power Apps ที่ช่วยให้ผู้ใช้สามารถวาง วัตถุ 3 มิติ หรือ รูปภาพ ในสภาพแวดล้อมในโลกแห่งความจริงของพวกเขา แบบจําลอง 3 มิติและรูปภาพที่จําเป็นสําหรับแอปพลิเคชันจะถูกเก็บไว้ในรายการ SharePoint มาเริ่มต้นโดยการเพิ่มทรัพยากรที่จําเป็นในรายการ SharePoint กัน

1. เพิ่มมุมมองในคอมโพเนนต์ MR ไปยังหน้าจอ Product_details เปิดแท็บ แทรก จากนั้นขยายดรอปดาวน์ ความเป็นจริงผสม จากนั้นเลือกมุมมองในคอมโพเนนต์ MR

   

2. ในแท็บ คุณสมบัติ สําหรับ มุมมองในคอมโพเนนต์ MR ให้เลือกเขตข้อมูล แหล่งข้อมูล และป้อน เพื่อเข้าถึงแบบจําลอง 3 มิติที่จัดเก็บไว้ในรายการ SharePoint ของคุณ:

   First(Gallery_products.Selected.Attachments).Value
   

   

   หมายเหตุ

   เราไม่รวมมุมมองในคุณลักษณะ MR สําหรับประเภทพรม แต่เราจะประมาณราคาของพรมโดยขึ้นอยู่กับพื้นที่ที่คํานวณในเซสชันหน่วยวัดใน MR

อีกคุณสมบัติที่ไม่ซ้ํากันที่มุมมองในคอมโพเนนต์ MR ให้มาตราส่วนวัตถุ คุณสามารถแก้ไขขนาดของแบบจําลอง 3 มิติของคุณภายนอกได้โดยการเปลี่ยนคุณสมบัติ ความกว้างของวัตถุความสูงของวัตถุ และ ความลึกของวัตถุ

• ตั้งค่าคุณสมบัติต่อไปนี้ในบานหน้าต่าง คุณสมบัติ ดังที่แสดงในรูปภาพ:

  • ความกว้างของวัตถุ = 1.5
  • ความสูงของวัตถุ = 1
  • ความลึกของวัตถุ = 1
  • หน่วยวัด = เมตร

  ค่าเหล่านี้จะถูกตั้งค่าตามแบบจําลอง 3 มิติที่รวมอยู่ในแอปพลิเคชันนี้

  

  หมายเหตุ

  คุณยังสามารถกําหนดค่าที่ส่งผ่านไปยัง ความกว้างของวัตถุความสูงของวัตถุ และความลึกของ วัตถุ ตามความต้องการของคุณได้ ค่าที่ส่งผ่านจะถูกนําไปในหน่วยที่ระบุในหน่วยวัด เลือกหน่วยวัดที่เหมาะสมจากรายการดรอปดาวน์และป้อนค่าในภายหลัง

  เคล็ดลับ

  หากต้องการบันทึกความคืบหน้าของคุณ ให้เลือกแท็บ ไฟล์ ที่ด้านบนและเลือกตัวเลือก บันทึก คุณยังสามารถใช้ Ctrl + S เพื่อบันทึกความคืบหน้าของคุณได้

การใช้ขั้นตอนข้างต้นจะสร้างแอปพลิเคชันที่มีหน้ารายละเอียดที่ประกอบด้วยข้อมูลผลิตภัณฑ์โดยละเอียด แอปพลิเคชันจะยังรวมถึง มุมมองในคอมโพเนนต์ 3 มิติ ซึ่งช่วยให้คุณสามารถรวมเนื้อหา 3 มิติได้ คุณยังสามารถวางแบบจําลอง 3 มิติในสภาพแวดล้อมในโลกแห่งความจริงของคุณผ่านมุมมองในคอมโพเนนต์ MR หลังจากที่คุณได้เรียนรู้วิธีการใช้คุณลักษณะเหล่านี้ คุณสามารถรวมคุณลักษณะเหล่านี้ลงในแอปพลิเคชันในอนาคตของคุณได้