Vào tháng 2, chúng tôi đã ra mắt thành phần web <model-viewer>. Thành phần này cho phép bạn thêm một mô hình 3D vào trang web theo cách khai báo, đồng thời lưu trữ mô hình trên trang web của riêng bạn. Một điều mà ứng dụng này không hỗ trợ là công nghệ thực tế tăng cường. Điều đó nghĩa là bạn không thể kết xuất hình ảnh nguồn của thành phần ở đầu nguồn cấp dữ liệu máy ảnh của thiết bị.
Để làm được việc đó, kể từ đó, chúng tôi đã thêm tính năng hỗ trợ cho Magic Leap và Quick Look trên iOS. Giờ đây, chúng tôi sẽ công bố tính năng hỗ trợ AR trên Android bằng cách thêm thuộc tính ar. Thuộc tính này được xây dựng dựa trên tính năng ARCore mới có tên là Scene Player, một ứng dụng bên ngoài để xem mô hình 3D. Để tìm hiểu thêm về Trình xem cảnh, hãy xem bài viết Xem mô hình 3D trong AR từ trình duyệt Android.
Hãy xem cách sử dụng <model-viewer> để sử dụng công nghệ thực tế tăng cường.
Thuộc tính
Như bạn có thể nhớ, thành phần web không yêu cầu kiến thức đặc biệt để sử dụng. Phần tử này hoạt động giống như một phần tử HTML chuẩn, có một thẻ duy nhất cũng như các thuộc tính và phương thức. Sau khi cài đặt bằng thẻ <script>, hãy sử dụng thẻ này như mọi phần tử HTML khác.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
Mã này trông giống như mã tôi có trong bài viết trước. Hãy chú ý đến nội dung mà tôi đã làm nổi bật ở cuối cùng. Đó là thuộc tính mới.
Cài đặt phiên bản mới
Nếu đã sử dụng <model-viewer>, bạn có thể nhập thành phần này bằng cách sử dụng thẻ <script> chính xác như trong tài liệu.
Chúng tôi liên tục cải tiến. Nếu muốn thử nghiệm các tính năng mới trước khi nâng cấp và triển khai một cách có chủ ý, bạn nên cài đặt một phiên bản cụ thể của <model-viewer>. Để thực hiện việc này, hãy thêm số phiên bản vào URL của tệp như minh hoạ bên dưới. Sau đó, hãy theo dõi trang phát hành để biết thông tin cập nhật.
<script type="module"
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>
<script nomodule
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>
Kết luận
Hãy dùng thử phiên bản mới của <model-viewer> và cho chúng tôi biết cảm nhận của bạn.
Chúng tôi rất mong nhận được ý kiến phản hồi và báo cáo lỗi trên GitHub.