แชร์ผ่าน

ดูเนื้อหา 3 มิติหรือรูปภาพในความเป็นจริงผสม

  • บทความ

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

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

ตัวควบคุม ดูใน MR จะเพิ่มปุ่มในแอปของคุณ เมื่อผู้ใช้เลือกปุ่ม แอปจะวางซ้อนโมเดล 3 มิติที่เลือก (ในรูปแบบไฟล์ .glb, .stl หรือ .obj) หรือรูปภาพ (ในรูปแบบไฟล์ .jpg หรือ .png) ลงในตัวดึงข้อมูลกล้องของอุปกรณ์

ภาพถ่ายหน้าจอแท็บเล็ตที่แสดงโมเดล 3 มิติของรถยกที่วางซ้อนในมุมมองภายในโกดัง

คุณยังสามารถถ่ายภาพโดยใช้ตัวควบคุม ดูใน MR และ อัปโหลดไปยัง OneDrive

ข้อสำคัญ

เนื้อหา 3 มิติของคุณต้องอยู่ในรูปแบบไฟล์ .glb, .stl หรือ .obj คุณสามารถ แปลงโมเดล 3 มิติที่มีอยู่ของคุณเป็นรูปแบบไฟล์ .glb จากรูปแบบ 3 มิติที่หลากหลาย ไม่รองรับเนื้อหา 3 มิติที่บีบอัดด้วยการบีบอัด Draco

เคล็ดลับ

  • ตรวจสอบให้แน่ใจว่าโมเดล 3 มิติของคุณ ได้รับการปรับให้เหมาะกับการใช้งานกับ Power Apps เพื่อลดเวลาในการโหลด

  • ตัวควบคุม Mixed Reality (MR) ทำงานได้ดีที่สุดในสภาพแวดล้อมที่มีแสงสว่างเพียงพอพร้อมกับพื้นผิวที่มีพื้นผิวเรียบ การติดตามจะดีกว่าบนอุปกรณ์ที่เปิดใช้งาน LIDAR

  • ตัวควบคุม MR ใน Power Apps ใช้ Babylon และ Babylon React Native เนื้อหาความเป็นจริงผสมที่ทำงานใน Babylon sandbox ควรทำงานใน Power Apps ผ่านแพลตฟอร์ม MR ที่ใช้ร่วมกันนี้ หากเนื้อหาของคุณทำงานใน Babylon แต่ไม่ใช่ใน Power Apps ให้ถามคำถามใน ฟอรั่ม Power Apps Community (แท็กด้วย "ความเป็นจริงผสม")

เพิ่มปุ่ม ดูใน MR ลงในหน้าจอแอป

เมื่อแอปของคุณเปิดสำหรับการแก้ไขใน Power Apps Studio:

  1. เปิดแท็บ แทรก และขยาย ความเป็นจริงผสม

  2. เลือก ดูใน MR เพื่อวางตัวควบคุมในหน้าจอแอป หรือลากตัวควบคุมไปยังหน้าจอเพื่อวางตำแหน่งได้แม่นยำยิ่งขึ้น

ตัวควบคุมคือปุ่มที่มีป้ายกำกับไอคอนลูกบาศก์และข้อความ ดูใน MR เปลี่ยนป้ายชื่อและซ่อนไอคอนหากคุณต้องการในคุณสมบัติ Text และ Display type

ภาพหน้าจอของแท็บ แทรก ใน Power Apps Studio ที่แสดงตำแหน่งที่จะค้นหาตัวควบคุม ดูใน MR

การดูหลายโมเดลในเซสชันเดียว

ตัวควบคุม ดูใน MR จะแสดงไฟล์สื่อหนึ่งไฟล์โดยค่าเริ่มต้น ในการดูไฟล์สื่อต่างๆ ที่เลือกผ่านแกลเลอรีสื่อระหว่างประสบการณ์ MR ให้ใช้คุณสมบัติขั้นสูง Items ของปุ่มควบคุม คุณสมบัตินี้สร้างตารางที่แสดงรายการไฟล์สื่อที่ผู้ใช้สามารถเลือกได้จากประสบการณ์ความเป็นจริงผสม

เมื่อใช้คุณใช้คุณสมบัติ Items คุณต้องใช้ตั้งค่าสำหรับคุณสมบัติขั้นสูงเพิ่มเติมต่อไปนี้เพื่อแมปคอลัมน์ของตารางของคุณ:

คุณสมบัติ คำอธิบาย
ItemsSource (จำเป็น) ระบุคอลัมน์ใน Items ที่จัดเตรียมโมเดล 3 มิติหรือรูปภาพเพื่อแสดงในมุมมองความเป็นจริงผสม ดู เชื่อมต่อโมเดล 3 มิติกับ Power Apps เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการนำโมเดลเข้าสู่ Power Apps
ItemsLabel ระบุคอลัมน์ใน Items ที่มีป้ายกำกับเพื่อแสดงในแกลเลอรีสื่อ คุณสมบัติ ข้อความแสดงแทน จะใช้สำหรับรายการที่ไม่มีป้ายกำกับ
ItemsThumbnail ระบุคอลัมน์ใน Items ที่ระบุรูปขนาดย่อเพื่อแสดงในแกลเลอรีสื่อ รูปขนาดย่อเริ่มต้นมีไว้สำหรับรายการที่ไม่ได้ระบุไว้
ItemsObjectWidth, ItemsObjectHeight, ItemsObjectDepth ระบุขนาดที่ชัดเจนสำหรับแต่ละรายการสื่อในตาราง ความกว้างของวัตถุ, ความสูงของวัตถุ และ ความลึกของวัตถุ จะถูกใช้สำหรับรายการที่ไม่มีขนาดระบุ

ในการทดสอบ ให้สร้างแกลเลอรีสื่อที่แสดงพืชสามชนิดในห้องเดียวกัน ตาราง Items ของเรามีลักษณะดังนี้:

ป้ายกำกับ ต้นทาง รูปขนาดย่อ
นกแห่งสวรรค์ https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/bird_of_paradise_blue.glb https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/bird_of_paradise_blue.png
ไทรใบสัก https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/flf_orange.glb https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/flf_orange.png
ต้นปาล์มขนาดเล็ก https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/palm_green.glb https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/palm_green.png

วิดีโอที่แสดงแกลเลอรีสื่อในประสบการณ์ความเป็นจริงผสม

เมื่อแอปของคุณเปิดสำหรับการแก้ไขใน Power Apps Studio:

  1. เปิดแท็บ แทรก และขยาย ความเป็นจริงผสม

  2. เลือก ดูใน MR เพื่อวางตัวควบคุมในหน้าจอแอป หรือลากตัวควบคุมไปยังหน้าจอเพื่อวางตำแหน่งได้แม่นยำยิ่งขึ้น

  3. บนแท็บคุณสมบัติ ขั้นสูง เลือกคุณสมบัติ Items และพิมพ์หรือวางรหัสต่อไปนี้:

    Table(
{
label: "Birds of Paradise",
source: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/bird_of_paradise_blue.glb",
thumbnail: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/bird_of_paradise_blue.png"
},
{
label: "Fiddle Leaf Fig",
source: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/flf_orange.glb",
thumbnail: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/flf_orange.png"
},
{
label: "Small Palm Tree",
source: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/palm_green.glb",
thumbnail: "https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/palm_green.png"
}
)

  4. ตั้งค่าคุณสมบัติ ItemsLabel เป็น "label"

  5. ตั้งค่าคุณสมบัติ ItemsSource เป็น "source"

  6. ตั้งค่าคุณสมบัติ ItemsThumbnail เป็น "thumbnail"

    ภาพหน้าจอคุณสมบัติของตัวควบคุม ดูใน MR

หมายเหตุ

คุณสมบัติ คุณสมบัติ ถูกตั้งค่าเป็นแหล่งข้อมูลของคุณ ซึ่งสามารถเป็นคอลเลกชันจากตัวเชื่อมต่อ หรือตารางแบบฮาร์ดโค้ดดังในตัวอย่างนี้ คุณสมบัติ ItemsSource, ItemsLabel และ ItemsThumbnail ถูกตั้งค่าเป็นชื่อคอลัมน์ของแหล่งข้อมูลนั้นภายในเครื่องหมายคำพูด

  1. บันทึกและเผยแพร่แอป แล้วเปิดบนอุปกรณ์มือถือของคุณเพื่อลอง

วัตถุจะถูกปรับขนาดอย่างไรถ้าคุณปรับขนาดวัตถุ

หากคุณไม่ระบุขนาดเมื่อคุณวางโมเดล ตัวควบคุม ดูใน MR จะเป็นไปตามขนาดที่กำหนดในไฟล์วัตถุ คุณสามารถปรับขนาดโมเดลได้โดยการป้อนค่าอื่นที่ไม่ใช่ 0 ในคุณสมบัติความกว้าง ความสูง และความลึกของตัวควบคุมอย่างน้อยหนึ่งค่า (Object width, Object height และ Object depth) วิธีปรับขนาดโมเดลขึ้นอยู่กับจำนวนขนาดที่คุณเปลี่ยน

  • ถ้าทุกขนาดคือ 0 (ค่าเริ่มต้น) ขนาดของโมเดลจะเหลือตามที่กำหนดไว้ในไฟล์วัตถุ

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

  • หากมีการตั้งค่าสองขนาด โมเดลจะปรับขนาดเป็นสองขนาดที่กำหนดและเป็นค่าเฉลี่ยของสองส่วนแรก
    ตัวอย่างเช่น สมมติว่าคุณมีโมเดลที่สูง 12 ม. กว้าง 6 ม. และลึก 3 ม. คุณตั้งค่าคุณสมบัติของตัวควบคุม ดูใน MR ดังต่อไปนี้: ความสูงของวัตถุ: 24, ความกว้างของวัตถุ: 9, ความลึกของวัตถุ: 0 (ไม่เปลี่ยนแปลง) ความสูงเพิ่มขึ้น 2 เท่า และความกว้างเพิ่มขึ้น 1.5 เท่า ค่าเฉลี่ยความสูงและความกว้างเพิ่มขึ้นเพื่อหาปัจจัยที่ควรเพิ่มความลึก: 2 + 1.5 = 3.5 / 2 = 1.75 ขนาดสุดท้ายของโมเดลคือ ความสูงของวัตถุ 24, ความกว้างของวัตถุ 9 และ ความลึกของวัตถุ 5.25 (3 x 1.75)

  • หากตั้งค่าทั้งสามขนาด ขนาดของโมเดลจะเปลี่ยนเป็นสิ่งที่คุณระบุ

หมายเหตุ

หากการวัดไม่เป็นไปตามอัตราส่วนขนาดเดิม โมเดลอาจถูกบีบอัดหรือบิดเบี้ยวเมื่อดูใน MR

คุณสมบัติ

เปลี่ยนลักษณะการทำงานและลักษณะของปุ่ม ดูใน MR โดยใช้คุณสมบัติ คุณสมบัติบางอย่างมีเฉพาะในแท็บ ขั้นสูง

ภาพหน้าจอของปุ่ม ดูใน MR อยู่ระหว่างการสร้างใน Microsoft Power Apps Studio ที่แสดงควบคู่กับคุณสมบัติ

คุณสมบัติ คำอธิบาย ชนิด ตำแหน่ง
Text ตั้งค่าข้อความป้ายชื่อปุ่ม สตริง คุณสมบัติ; ขั้นสูง: Text
Alternative text ระบุข้อความที่จะแสดง หากโมเดลไม่สามารถโหลดได้ หรือหากผู้ใช้แอปวางเมาส์เหนือโมเดล สตริง คุณสมบัติ; ขั้นสูง: AltText
Display type กำหนดว่าป้ายชื่อปุ่มแสดงไอคอนของลูกบาศก์ ข้อความ หรือทั้งสองอย่าง การเลือกแบบหล่นลง คุณสมบัติ; ขั้นสูง: DisplayType
Source ระบุแหล่งข้อมูล (ไฟล์ .glb, .stl หรือ .obj) ที่จะแสดง ไม่สามารถใช้งานได้ คุณสมบัติ; ขั้นสูง: Source
รายการแหล่ง (Items) แหล่งข้อมูล (ตาราง) ที่แสดงรายการ ไฟล์สื่อหลายไฟล์เพื่อดู ในเซสชันความเป็นจริงผสมเดียว ตาราง คุณสมบัติ; ขั้นสูง: Items
ความกว้างของวัตถุ ตั้งค่าความกว้างของแบบจำลอง จำนวนเต็ม คุณสมบัติ; ขั้นสูง: ObjectWidth
Object height ตั้งค่าความสูงของโมเดล จำนวนเต็ม คุณสมบัติ; ขั้นสูง: ObjectHeight
Object depth ตั้งค่าความลึกของโมเดล จำนวนเต็ม คุณสมบัติ; ขั้นสูง: ObjectDepth
Unit of measurement ตั้งค่าหน่วยวัดที่ใช้สำหรับความกว้าง ความสูง และความลึกของโมเดล รายการ คุณสมบัติ; ขั้นสูง: Units
เปิดใช้งานตัวแทนเสมือน กำหนดว่าเงาจะใช้เพื่อปรับปรุงเอฟเฟกต์ 3D เมื่อแสดงโมเดลหรือไม่ แบบบูลีน คุณสมบัติ; ขั้นสูง: EnableShadows
เปิดใช้งานการตรวจหาเครื่องหมาย กำหนดว่าจะใช้การตรวจหาเครื่องหมายเพื่อกำหนดตำแหน่งและการหมุนของโมเดลหรือไม่ ดู ใช้การตรวจหาเครื่องหมายด้วยการควบคุมความเป็นจริงผสม แบบบูลีน คุณสมบัติ; ขั้นสูง: EnableMarkerDetection
Visible แสดงหรือซ่อนปุ่ม แบบบูลีน คุณสมบัติ; ขั้นสูง: Visible
Position วางมุมบนซ้ายของปุ่มที่พิกัดหน้าจอที่ระบุใน x และ y เลขจุดทศนิยมลอยตัว คุณสมบัติ; ขั้นสูง: X, Y
Size กำหนดขนาดของปุ่มโดยใช้ค่าพิกเซลที่ให้มาใน Width และ Height จำนวนเต็ม คุณสมบัติ; ขั้นสูง: Width, Height
Padding top ตั้งค่าระยะห่างระหว่างข้อความป้ายชื่อปุ่มกับด้านบนของปุ่ม เลขจุดทศนิยมลอยตัว คุณสมบัติ; ขั้นสูง: PaddingTop
Padding bottom ตั้งค่าระยะห่างระหว่างข้อความป้ายชื่อปุ่มกับด้านล่างของปุ่ม เลขจุดทศนิยมลอยตัว คุณสมบัติ; ขั้นสูง: PaddingBottom
Padding left ตั้งค่าระยะห่างระหว่างข้อความป้ายชื่อปุ่มกับขอบด้านซ้ายของปุ่ม เลขจุดทศนิยมลอยตัว คุณสมบัติ; ขั้นสูง: PaddingLeft
Padding right ตั้งค่าระยะห่างระหว่างข้อความป้ายชื่อปุ่มกับขอบด้านขวาของปุ่ม เลขจุดทศนิยมลอยตัว คุณสมบัติ; ขั้นสูง: PaddingRight
Font ตั้งชื่อกลุ่มแบบอักษรที่ใช้สำหรับข้อความป้ายชื่อปุ่ม รายการ คุณสมบัติ; ขั้นสูง: Font
ขนาดแบบอักษร ตั้งค่าขนาดของข้อความป้ายชื่อบนปุ่ม เลขจุดทศนิยมลอยตัว คุณสมบัติ; ขั้นสูง: FontSize
Font weight ตั้งค่าน้ำหนักของข้อความป้ายชื่อบนปุ่มเป็น Bold, Lighter, Normal หรือ Semibold รายการ คุณสมบัติ; ขั้นสูง: FontWeight
Text การจัดแนวข้อความ ตั้งค่าการจัดตำแหน่งแนวนอนของข้อความป้ายชื่อบนปุ่มเป็น Center, Justify, Left หรือ Right ไม่สามารถใช้งานได้ คุณสมบัติ; ขั้นสูง: TextAlignment
Vertical alignment ตั้งค่าการจัดตำแหน่งแนวตั้งของข้อความป้ายชื่อบนปุ่มเป็น Bottom, Middle หรือ Top รายการ คุณสมบัติ; ขั้นสูง: VerticalAlign
ลักษณะแบบอักษร กำหนดลักษณะของข้อความป้ายชื่อบนปุ่มเป็น Italic, Underline, Strikethrough หรือไม่มี ไม่สามารถใช้งานได้ คุณสมบัติ; ขั้นสูง: Italic, Underline, Strikethrough
Border radius กำหนดรัศมีมุมของเส้นขอบปุ่ม เลขจุดทศนิยมลอยตัว คุณสมบัติ; ขั้นสูง: BorderRadius
Color ตั้งค่าสีของข้อความป้ายชื่อบนปุ่มและพื้นหลังของปุ่ม ไม่สามารถใช้งานได้ คุณสมบัติ; ขั้นสูง: FillColor, TextColor
Border กำหนดลักษณะ ความกว้าง และสีของเส้นขอบของปุ่ม ไม่สามารถใช้งานได้ คุณสมบัติ; ขั้นสูง: BorderStyle, BorderThickness, BorderFillColor
Disabled ปิดปุ่มแต่ปล่อยให้มองเห็นได้ แบบบูลีน คุณสมบัติ; ขั้นสูง: Disabled
Disabled color ตั้งค่าสีของข้อความป้ายชื่อปุ่ม พื้นหลังของปุ่ม และเส้นขอบของปุ่มหาก DisplayMode เป็น Disabled ไม่สามารถใช้งานได้ คุณสมบัติ; ขั้นสูง: DisabledContentColor, DisabledFillColor, DisabledBorderColor
Pressed color ตั้งค่าสีของข้อความป้ายชื่อปุ่ม พื้นหลังของปุ่ม และเส้นขอบของปุ่มเมื่อผู้ใช้เลือกปุ่ม ไม่สามารถใช้งานได้ คุณสมบัติ; ขั้นสูง: PressedContentColor, PressedFillColor, PressedBorderColor
Hover color ตั้งค่าสีของข้อความป้ายชื่อปุ่ม พื้นหลังของปุ่ม และเส้นขอบของปุ่มเมื่อผู้ใช้วางตัวชี้เมาส์ ไม่สามารถใช้งานได้ คุณสมบัติ; ขั้นสูง: HoverContentColor, HoverFillColor, HoverBorderColor
OnMixedRealitySelect ลักษณะการทำงานที่ถูกทริกเกอร์เมื่อผู้ใช้เลือกปุ่มเพื่อเข้าสู่ประสบการณ์ใช้งานความเป็นจริงผสม การดำเนินการที่กำหนด ขั้นสูง
OnChange ลักษณะการทำงานที่ทริกเกอร์เมื่อคุณสมบัติใด ๆ บนปุ่มมีการเปลี่ยนแปลง การดำเนินการที่กำหนด ระดับสูง
คำแนะนำเครื่องมือ กำหนดข้อความที่จะแสดงเมื่อผู้ใช้วางเมาส์เหนือปุ่ม สตริง ขั้นสูง
ContentLanguage กำหนดภาษาที่แสดงของป้ายชื่อปุ่ม หากแตกต่างจากภาษาที่ใช้ในแอป สตริง ขั้นสูง
DisplayMode กำหนดว่าปุ่มจะอนุญาตให้ผู้ใช้ป้อนข้อมูล (แก้ไข), แสดงข้อมูลเท่านั้น (มุมมอง), หรือถูกปิดใช้งาน (ปิดใช้งาน) Enum ขั้นสูง
TabIndex ระบุลำดับที่ปุ่มถูกเลือก ถ้าผู้ใช้นำทางแอปโดยใช้คีย์ Tab จำนวนเต็ม คุณสมบัติ; ขั้นสูง: TabIndex

คุณสมบัติผลลัพธ์

แอปของคุณสามารถใช้คุณสมบัติต่างๆ ได้มากขึ้นเมื่อผู้ใช้ทำงานกับตัวควบคุม ดูใน MR สิ่งเหล่านี้เรียกว่าคุณสมบัติผลลัพธ์ คุณสามารถใช้คุณสมบัติ Output ในการควบคุมอื่นๆ หรือเพื่อปรับแต่งประสบการณ์ใช้งานบนแอป

คุณสมบัติ คำอธิบาย ชนิด
Photos รวบรวมรูปถ่ายที่ถ่ายในระหว่างเซสชันความเป็นจริงผสม คุณสามารถ อัปโหลดรูปถ่ายความเป็นจริงผสมไปที่ OneDrive และแสดงในแกลเลอรี ไม่สามารถใช้งานได้

ตัวควบคุม mixed reality อื่นๆ

  • ดูเนื้อหา 3D ด้วยตัวควบคุม วัตถุ 3 มิติ
  • วัดระยะทาง พื้นที่ และปริมาตรด้วยตัวควบคุม Measure in mixed reality
  • สร้างและดูรูปร่าง 3 มิติที่กำหนดไว้ล่วงหน้าด้วยตัวควบคุม View รูปร่าง in mixed reality
  • ระบายสีเส้น 3 มิติหรือวาดลูกศร 3 มิติเพื่อระบุพื้นที่หรือแอสเซทในสภาพแวดล้อมของคุณด้วยตัวควบคุม Markup in MR

ดูเพิ่มเติม

หมายเหตุ

บอกให้เราทราบเกี่ยวกับภาษาที่คุณต้องการในคู่มือ ทำแบบสำรวจสั้นๆ (โปรดทราบว่าแบบสำรวจนี้เป็นภาษาอังกฤษ)

แบบสำรวจนี้ใช้เวลาทำประมาณเจ็ดนาที ไม่มีการเก็บข้อมูลส่วนบุคคล (คำชี้แจงสิทธิ์ส่วนบุคคล)