Vào tháng 2, chúng tôi đã giới thiệu thành phần web <model-viewer>,
cho phép bạn tuyên bố thêm mô hình 3D vào trang web, trong khi lưu trữ
mô hình trên trang web của riêng bạn. Có một điều mà tính năng này không hỗ trợ là công nghệ thực tế tăng cường. Nghĩa là bạn không thể hiển thị 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 này, chúng tôi đã thêm tính năng hỗ trợ cho Magic Leap và tính năng Xem nhanh trên iOS. Hiện tại, chúng tôi sẽ thông báo về việc hỗ trợ công nghệ thực tế tăng cường (AR) trên Android bằng việc bổ sung thuộc tính ar. Thuộc tính này được xây dựng dựa trên một tính năng mới của ARCore có tên là Scene Inspector (Trình xem cảnh), một ứng dụng bên ngoài dùng để xem các mô hình 3D. Để tìm hiểu thêm về Trình xem cảnh, hãy xem phần Xem mô hình 3D trong môi trường thực tế tăng cường trên trình duyệt Android.
Hãy cùng xem cách thực tế tăng cường bằng <model-viewer>.
Thuộc tính
Như bạn đã nhớ, thành phần web không yêu cầu kiến thức đặc biệt để sử dụng. Thẻ này hoạt động như một phần tử HTML chuẩn, có một thẻ cũng như các thuộc tính và phương thức riêng. 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>
Thông tin này giống với những gì tôi đã có trong bài viết trước. Hãy lưu ý điều tôi đã nhấn mạnh ở cuối video. Đó là thuộc tính mới.
Đang cài đặt phiên bản mới
Nếu đã sử dụng <model-viewer>, thì có thể bạn đang nhập thành phần bằng cách sử dụng chính xác các thẻ <script> như trình bày trong tài liệu.
Chúng tôi không ngừng cải tiến. Nếu muốn kiểm thử các tính năng mới trước khi chủ ý nâng cấp và triển khai, bạn cần cài đặt một phiên bản <model-viewer> cụ thể. Để 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ạ dưới đây. Sau đó, hãy xem trang bản 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 bạn nghĩ gì.
Chúng tôi hoan nghênh các vấn đề và ý kiến phản hồi của bạn trên GitHub.