Thực tế tăng cường với <model-viewer>

Thành phần web <model-viewer> có thể được dùng để xem và tương tác với các mô hình 3D trên web, đồng thời chuyển đổi liền mạch để đặt và tương tác với các mô hình 3D đó trong công nghệ Thực tế tăng cường trên web.

Khi được xem trên thiết bị Android hỗ trợ ARCore, thành phần <model-viewer> có thuộc tính ar sẽ hiển thị một nút như minh hoạ trong ví dụ sau:

Ảnh chụp màn hình Trình xem mô hình

Khi nhấn vào nút này trên các thiết bị hỗ trợ ARCore, mô hình sẽ hiển thị bằng chức năng WebXR của Chrome hoặc ứng dụng Scene Viewer, tuỳ thuộc vào giá trị của thuộc tính ar-modes.

Bạn có thể tuỳ chỉnh giao diện của nút AR bằng cách sử dụng các vị trí thành phần web. Hãy tham khảo <model-viewer> documentation để xem ví dụ. Vui lòng xem thêm bài viết Xem cảnh để biết thêm thông tin về cách hiển thị các mô hình 3D tương tác trong môi trường thực tế tăng cường (AR) từ một ứng dụng hoặc trình duyệt Android.

Bắt đầu sử dụng <model-viewer>

Các bước sau đây cho biết cách bắt đầu sử dụng <model-viewer> trên bất kỳ trang web nào.

Thêm phần phụ thuộc <model-viewer>

Từ CDN của unpkg

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

Từ npm

npm install @google/model-viewer

Sau đó, thêm <model-viewer> tại node_modules/model-viewer/dist/model-viewer.min.js bằng trình đóng gói ưu tiên của bạn,

Thêm thẻ <model-viewer>

Thêm thành phần web <model-viewer> vào tài liệu HTML:

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

Định cấu hình thẻ <model-viewer>

Bạn có thể định cấu hình màn hình mô hình bằng cách thay đổi các thuộc tính trên thẻ <model-viewer>. Các thuộc tính này hiển thị các tuỳ chọn như di chuyển của camera, ảnh động mô hình và thông tin môi trường. Tài liệu về <model-viewer> liệt kê tất cả thuộc tính có thể đặt. Tiện ích Trình chỉnh sửa mô hình có thể tạo một thẻ HTML <model-viewer> và định cấu hình các thuộc tính như vị trí và ánh sáng của máy ảnh.

Ảnh chụp màn hình Trình chỉnh sửa mô hình

Khả năng tương thích của mô hình

<model-viewer> hỗ trợ các mô hình ở định dạng tệp gltf và glb. Hãy tham khảo three.js GLTFLoader documentation để biết danh sách các tiện ích glTF được hỗ trợ.

Để đảm bảo mô hình của bạn sẽ hiển thị đúng cách, hãy kiểm tra mô hình trong Trình chỉnh sửa mô hình.

Hỗ trợ trình duyệt và thiết bị

Tất cả các trình duyệt dùng lâu dài đều hỗ trợ việc sử dụng <model-viewer> để hiển thị mô hình 3D trong một trang web. Bạn nên sử dụng polyfill :focus-visible để ẩn các vòng lấy nét khi phần tử được lấy làm tâm điểm.

Để dùng các tính năng thực tế tăng cường, bạn phải có một thiết bị hỗ trợ ARCore và cài đặt Dịch vụ Google Play cho Thực tế tăng cường. Đối với chế độ AR của webxr, hãy tham khảo bài viết Hỗ trợ trình duyệt WebXR. Theo mặc định, nếu WebXR không được hỗ trợ, thì hệ thống sẽ dùng Scene Editor (Trình xem cảnh).

Các bước tiếp theo