Xem nội dung 3D hoặc hình ảnh trong thực tế kết hợp

2025-05-21

Sử dụng điều khiển Xem trong MR để đặt mô hình 3D của một vật thể hoặc hình ảnh vào không gian thực. Ví dụ: Bạn có thể xem trước tranh treo trên tường sẽ ra sao trước khi treo hoặc xem liệu một tủ sách ảo 3D có phù hợp với nơi bạn định đặt không.

Điều gì sẽ xảy ra nếu bạn không có mô hình 3D của đối tượng? Tải hình ảnh của đối tượng và đặt kích thước của nó thành kích cỡ của đối tượng. Mục kiểm soát áp dụng hình ảnh như mặt của một khối lập phương ảo theo kích thước mong muốn. Đặt giá đỡ này cho mô hình 3D trong không gian của bạn.

Xem trong MR điều khiển thêm một nút vào ứng dụng của bạn. Khi người dùng chọn nút, ứng dụng sẽ phủ một mô hình 3D đã chọn (ở định dạng tệp .glb, .stl hoặc .obj) hoặc hình ảnh (ở định dạng tệp .jpg hoặc .png) trên nguồn cấp camera của thiết bị.

Ảnh chụp màn hình máy tính bảng hiển thị mô hình 3D của xe nâng chồng lên góc nhìn bên trong nhà kho.

Bạn cũng có thể chụp ảnh bằng cách sử dụng chức năng Xem trong MR và tải ảnh lên OneDrive.

Quan trọng

Nội dung 3D của bạn phải ở định dạng tệp .glb, .stl, or .obj. Bạn có thể chuyển đổi các mô hình 3D hiện có của mình sang định dạng tệp .glb từ nhiều định dạng 3D khác nhau. Không hỗ trợ nội dung 3D được nén bằng tính năng nén Draco.

Tiền bo

Đảm bảo mô hình 3D của bạn được tối ưu hóa để sử dụng với Power Apps nhằm giảm thiểu thời gian tải.
Các mục kiểm soát thực tế kết hợp (MR) hoạt động tốt nhất trong môi trường nhiều ánh sáng với bề mặt có kết cấu phẳng. Tính năng theo dõi hoạt động tốt hơn trên các thiết bị hỗ trợ LIDAR.
Các kiểm soát MR trong Power Apps sử dụng Babylon và Babylon React Native. Nội dung thực tế hỗn hợp hoạt động trong hộp cát Babylon sẽ hoạt động trong Power Apps thông qua nền tảng MR được chia sẻ này. Nếu nội dung của bạn hoạt động trong Babylon nhưng không hoạt động trong Power Apps, hãy đặt câu hỏi trong Power Apps Diễn đàn cộng đồng. (Gắn thẻ bằng "thực tế kết hợp".)

Thêm nút View in MR vào màn hình ứng dụng

Với ứng dụng của bạn mở để chỉnh sửa trong Power Apps Studio:

Mở tab Chèn và mở rộng Thực tế hỗn hợp.
Chọn Xem trong MR để đặt điều khiển vào màn hình ứng dụng hoặc kéo điều khiển vào màn hình để định vị chính xác hơn.

Bộ điều khiển là một nút được gắn nhãn bằng biểu tượng hình khối và dòng chữ Xem trong MR. Thay đổi nhãn và ẩn biểu tượng nếu bạn muốn trong thuộc tính Văn bản và Loại hiển thị .

Ảnh chụp màn hình tab Chèn trong Power Apps Studio, hiển thị vị trí tìm mục Xem trong điều khiển MR.

Xem các mô hình khác nhau trong mộ phiên

Theo mặc định, mục kiểm soát View in MR hiển thị một tệp phương tiện. Để xem các tệp phương tiện khác nhau được chọn thông qua thư viện phương tiện trong trải nghiệm MR, hãy sử dụng thuộc tính nâng cao Mục của điều khiển. Thuộc tính này tạo một bảng liệt kê các tệp phương tiện mà người dùng có thể chọn trong trải nghiệm thực tế kết hợp.

Khi bạn sử dụng thuộc tính Items , bạn cần đặt giá trị cho các thuộc tính nâng cao bổ sung sau để ánh xạ các cột trong bảng của bạn:

Thuộc tính	Description
MụcNguồn (bắt buộc)	Chỉ định cột nào trong Mục xác định mô hình 3D hoặc hình ảnh sẽ hiển thị trong chế độ xem thực tế hỗn hợp. Xem Kết nối các mô hình 3D với Power Apps để tìm hiểu thêm về cách đưa các mô hình vào Power Apps.
MụcNhãn	Chỉ định cột nào trong Mục chứa nhãn sẽ hiển thị trong thư viện phương tiện. Thuộc tính Alternative text được sử dụng cho các mục không có nhãn được chỉ định.
MụcThumbnail	Chỉ định cột nào trong Mục xác định hình thu nhỏ sẽ hiển thị trong thư viện phương tiện. Hệ thống cung cấp hình thu nhỏ mặc định cho các mục chưa được chỉ định hình thu nhỏ.
Chiều rộng đối tượng mục, Chiều cao đối tượng mục, Độ sâu đối tượng mục	Chỉ định kích thước rõ ràng cho từng mục phương tiện trong bảng. Chiều rộng đối tượng, Chiều cao đối tượng và Chiều sâu đối tượng được sử dụng cho các mục không có kích thước cụ thể.

Để thử nghiệm, hãy tạo một thư viện phương tiện minh họa ba cây khác nhau trong bối cảnh phòng. Bảng Mục của chúng tôi trông như thế này:

nhãn	nguồn	hình thu nhỏ
Hoa thiên điểu	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
Cây bàng Singapore	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
Cây cọ nhỏ	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

Video hiển thị thư viện phương tiện trong trải nghiệm thực tế hỗn hợp.

Với ứng dụng của bạn mở để chỉnh sửa trong Power Apps Studio:

Mở tab Chèn và mở rộng Thực tế hỗn hợp.
Chọn Xem trong MR để đặt điều khiển vào màn hình ứng dụng hoặc kéo điều khiển vào màn hình để định vị chính xác hơn.

Trên tab thuộc tính Nâng cao , chọn thuộc tính Mục và nhập hoặc dán mã sau:

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"
}
)

Đặt thuộc tính ItemsLabel thành "label".
Đặt thuộc tính ItemsSource thành "source".
Đặt thuộc tính ItemsThumbnail thành "thumbnail".

Lưu ý

Thuộc tính Items được đặt thành nguồn dữ liệu của bạn, có thể là một bộ sưu tập, từ một trình kết nối hoặc một bảng được mã hóa cứng như trong ví dụ này. Các thuộc tính ItemsSource, ItemsLabel và ItemsThumbnail được đặt thành tên cột của nguồn dữ liệu đó trong dấu ngoặc kép.

Lưu và phát hành ứng dụng, rồi mở ứng dụng trên thiết bị di động của bạn để dùng thử.

Cách đối tượng được điều chỉnh tỷ lệ nếu bạn thay đổi kích thước

Nếu bạn không chỉ định kích thước khi đặt mô hình, thì chế độ xem trong MR sẽ tuân theo các kích thước được cung cấp trong tệp đối tượng. Bạn có thể thay đổi kích thước mô hình bằng cách nhập giá trị khác 0 vào một hoặc nhiều thuộc tính chiều rộng, chiều cao và chiều sâu của điều khiển (Chiều rộng đối tượng, Chiều cao đối tượng và Chiều sâu đối tượng). Cách điều chỉnh tỷ lệ cho mô hình phụ thuộc vào số lượng kích thước bạn thay đổi.

Nếu tất cả các kích thước là 0 (mặc định), kích thước của mô hình sẽ được giữ nguyên như được thiết lập trong tệp đối tượng.
Nếu bạn đặt một kích thước, mô hình sẽ được điều chỉnh tỷ lệ tương đương dựa trên kích thước đã thay đổi, tương tự với trường hợp đặt "giữ nguyên tỷ lệ khung hình" khi bạn thay đổi kích thước hình ảnh.
Nếu bạn đặt hai kích thước, mô hình sẽ điều chỉnh tỷ lệ theo hai kích thước đã cho và trung bình của hai kích thước ban đầu.
Ví dụ: giả sử bạn có một mô hình cao 12 m, rộng 6 m và sâu 3 m. Bạn đặt thuộc tính của View trong MR control như sau: Chiều cao đối tượng: 24, Chiều rộng đối tượng: 9, Chiều sâu đối tượng: 0 (không thay đổi). Chiều cao tăng gấp 2 lần và chiều rộng tăng gấp 1,5 lần. Hệ thống sẽ tính trung bình mức tăng chiều cao và chiều rộng để tìm ra hệ số để điều chỉnh chiều sâu: 2 + 1,5 = 3,5/2 = 1,75. Kích thước cuối cùng của mô hình là Chiều cao vật thể 24, Chiều rộng vật thể 9 và Chiều sâu vật thể 5,25 (3 x 1,75).
Nếu bạn đặt cả 3 kích thước, chúng tôi thay đổi kích thước của mô hình theo giá trị bạn chỉ định.

Lưu ý

Nếu các giá trị đo không tuân theo tỷ lệ khung hình ban đầu, mô hình có thể bị bóp méo hoặc méo mó khi xem ở dạng thực tế kết hợp.

Thuộc tính

Thay đổi hành vi và giao diện của nút Xem trong MR bằng cách sử dụng các thuộc tính. Một số thuộc tính chỉ khả dụng trên tab Nâng cao .

Ảnh chụp màn hình nút Xem trong MR đang được xây dựng trong Studio, hiển thị bên cạnh các thuộc tính của nút này. Microsoft Power Apps

Thuộc tính	Description	Loại	Vị trí
Văn bản	Đặt văn bản nhãn nút.	String	Thuộc tính; Nâng cao: Văn bản
Văn bản thay thế	Chỉ định văn bản sẽ được hiển thị nếu mô hình không tải được hoặc nếu người dùng di chuột trên mô hình.	String	Thuộc tính; Nâng cao: AltText
Kiểu hiển thị	Xác định liệu nhãn nút chỉ hiển thị một biểu tượng khối lập phương, văn bản hay cả hai.	Chọn danh sách thả xuống	Thuộc tính; Nâng cao: DisplayType
Nguồn	Xác định nguồn dữ liệu (tệp .glb, .stl hoặc .obj file) sẽ hiển thị.	Không áp dụng	Thuộc tính; Nâng cao: Nguồn
Danh sách nguồn (Mục)	Nguồn dữ liệu (bảng) liệt kê nhiều tệp phương tiện để xem trong một phiên thực tế hỗn hợp duy nhất.	Bảng	Thuộc tính; Nâng cao: Mục
Chiều rộng đối tượng	Đặt chiều rộng của mô hình.	Số nguyên	Thuộc tính; Nâng cao: ObjectWidth
Chiều cao của đối tượng	Đặt chiều cao của mô hình.	Số nguyên	Thuộc tính; Nâng cao: ObjectHeight
Độ sâu của đối tượng	Đặt chiều sâu của mô hình.	Số nguyên	Thuộc tính; Nâng cao: Độ sâu đối tượng
Đơn vị đo	Đặt đơn vị đo được sử dụng cho các chiều rộng, chiều cao và chiều sâu.	Danh sách	Thuộc tính; Nâng cao: Đơn vị
Bật hiệu ứng đổ bóng	Xác định xem có sử dụng bóng để nâng cao hiệu ứng 3D khi hiển thị mô hình không.	Boolean	Thuộc tính; Nâng cao: EnableShadows
Bật tính năng phát hiện vạch dấu	Xác định xem liệu tính năng phát hiện vạch dấu có được sử dụng để xác định vị trí và mức độ xoay mô hình hay không. Xem Sử dụng phát hiện điểm đánh dấu với các điều khiển thực tế hỗn hợp	Boolean	Thuộc tính; Nâng cao: EnableMarkerDetection
Hiển thị	Hiển thị hoặc ẩn nút.	Boolean	Thuộc tính; Nâng cao: Có thể nhìn thấy
Vị trí	Đặt góc trên bên trái của nút tại tọa độ màn hình được chỉ định trong x và y.	Số thực dấu phẩy động	Thuộc tính; Nâng cao: X, Y
Kích cỡ	Xác định kích thước của nút bằng cách sử dụng các giá trị pixel được cung cấp trong Chiều rộng và Chiều cao.	Số nguyên	Thuộc tính; Nâng cao: Chiều rộng, Chiều cao
Phần đệm trên cùng	Đặt khoảng cách giữa văn bản nhãn nút và phần trên nút.	Số thực dấu phẩy động	Thuộc tính; Nâng cao: PaddingTop
Phần đệm dưới cùng	Đặt khoảng cách giữa văn bản nhãn nút và phần dưới nút.	Số thực dấu phẩy động	Thuộc tính; Nâng cao: PaddingBottom
Phần đệm bên trái	Đặt khoảng cách giữa văn bản nhãn nút và lề trái của nút.	Số thực dấu phẩy động	Thuộc tính; Nâng cao: PaddingLeft
Phần đệm bên phải	Đặt khoảng cách giữa văn bản nhãn nút và lề phải của nút.	Số thực dấu phẩy động	Thuộc tính; Nâng cao: PaddingRight
Phông chữ	Đặt tên của họ phông chữ được sử dụng cho văn bản nhãn nút.	Danh sách	Thuộc tính; Nâng cao: Phông chữ
Cỡ phông chữ	Đặt cỡ văn bản nhãn trên nút.	Số thực dấu phẩy động	Thuộc tính; Nâng cao: FontSize
Độ dày chữ	Đặt độ đậm của văn bản nhãn nút, có thể là Đậm, Nhạt hơn, Bình thường hoặc Nửa đậm.	Danh sách	Thuộc tính; Nâng cao: FontWeight
Lề chữ	Đặt căn chỉnh theo chiều ngang của văn bản nhãn trong nút, có thể là Căn giữa, Căn đều, Trái hoặc Phải.	Không áp dụng	Thuộc tính; Nâng cao: Căn chỉnh văn bản
Căn dọc	Đặt căn chỉnh theo chiều dọc của văn bản nhãn trong nút, có thể là Dưới, Giữa hoặc Trên.	Danh sách	Thuộc tính; Nâng cao: Căn dọc
Kiểu phông	Đặt kiểu cho văn bản nhãn nút, có thể là In nghiêng, Gạch chân, Gạch ngang hoặc không có.	Không áp dụng	Thuộc tính; Nâng cao: In nghiêng, Gạch chân, Gạch ngang
Bán kính viền	Xác định bán kính góc của đường viền nút.	Số thực dấu phẩy động	Thuộc tính; Nâng cao: BorderRadius
Màu sắc	Đặt màu sắc của văn bản nhãn nút và nền nút.	Không áp dụng	Của cải; Nâng cao: FillColor, TextColor
Viền	Xác định kiểu, chiều rộng và màu sắc của đường viền nút.	Không áp dụng	Thuộc tính; Nâng cao: BorderStyle, BorderThickness, BorderFillColor
Đã tắt	Tắt nút nhưng vẫn hiển thị.	Boolean	Thuộc tính; Nâng cao: Đã tắt
Màu khi tắt	Đặt màu cho văn bản nhãn nút, nền nút và đường viền nút nếu DisplayMode bị Tắt.	Không áp dụng	Thuộc tính; Nâng cao: DisabledContentColor, DisabledFillColor, DisabledBorderColor
Màu khi nhấn chuột lên	Đặt màu của văn bản nhãn nút, nền nút và đường viền nút khi người dùng chọn nút.	Không áp dụng	Của cải; Nâng cao: PressedContentColor, PressedFillColor, PressedBorderColor
Màu khi di chuột lên	Đặt màu của văn bản nhãn nút, nền nút và đường viền nút khi người dùng di con trỏ chuột qua đó.	Không áp dụng	Thuộc tính; Nâng cao: HoverContentColor, HoverFillColor, HoverBorderColor
OnMixedRealitySelect	Hành vi được kích hoạt khi người dùng chọn nút để bắt đầu trải nghiệm thực tế kết hợp.	Hành động xác định	Nâng cao
OnChange	Hành vi được kích hoạt khi bất kỳ thuộc tính nào trên nút bị thay đổi.	Hành động xác định	Nâng cao
Chú giải công cụ	Xác định văn bản để hiển thị khi người dùng di chuột qua nút.	String	Nâng cao
ContentLanguage	Xác định ngôn ngữ hiển thị của nhãn nút, nếu khác với ngôn ngữ được sử dụng trong ứng dụng.	String	Nâng cao
Chế độ hiển thị	Xác định xem nút có cho phép người dùng nhập dữ liệu (Chỉnh sửa), chỉ hiển thị dữ liệu (Xem) hay bị vô hiệu hóa (Đã vô hiệu hóa).	Enum	Nâng cao
TabChỉ mục	Chỉ định thứ tự nút được chọn nếu người dùng điều hướng ứng dụng bằng phím Tab.	Số nguyên	Thuộc tính; Nâng cao: TabIndex

Thuộc tính đầu ra

Ứng dụng của bạn có thể sử dụng nhiều thuộc tính hơn khi người dùng tương tác với View trong điều khiển MR . Những thuộc tính này được gọi là thuộc tính đầu ra. Bạn có thể sử dụng những thuộc tính đầu ra này trong các mục kiểm soát khác hoặc để tùy chỉnh trải nghiệm trên ứng dụng.

Thuộc tính	Description	Loại
Ảnh	Thu thập các bức ảnh được chụp trong phiên thực tế kết hợp. Bạn có thể tải ảnh thực tế hỗn hợp lên OneDrive và hiển thị chúng trong thư viện.	Không áp dụng

Các kiểm soát thực tế kết hợp khác

Xem nội dung 3D bằng điều khiển đối tượng 3D .
Đo khoảng cách, diện tích và thể tích bằng bộ điều khiển Đo lường trong thực tế hỗn hợp .
Tạo và xem các hình dạng 3D được xác định trước bằng điều khiển Xem hình dạng trong thực tế hỗn hợp
Vẽ các đường 3D hoặc mũi tên 3D để chỉ định một khu vực hoặc tài sản trong môi trường của bạn bằng điều khiển Đánh dấu trong MR .

Chia sẻ qua