Vào tháng 2, chúng tôi đã ra mắt thành phần web <model-viewer>,
cho phép bạn thêm mô hình 3D vào trang web trong khi vẫn lưu trữ
trên trang web của riêng bạn. Có một thứ mà công cụ này không hỗ trợ là công nghệ thực tế tăng cường. Đó
tức là bạn không thể hiển thị hình ảnh nguồn của thành phần trên màn hình của thiết bị
nguồn cấp dữ liệu camera.
Để 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. Bây giờ
chúng tôi xin tuyên bố hỗ trợ AR trên Android khi bổ sung ar
. Thuộc tính này được xây dựng dựa trên một tính năng ARCore mới có tên là Scene Player,
ứng dụng bên ngoài để xem mô hình 3D. Để tìm hiểu thêm về Scene Preview (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 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. Nó
hoạt động như một phần tử HTML chuẩn, có thẻ riêng biệt cũng như các thuộc tính
và phương thức. Sau
cài đặt bằng thẻ <script>,
sử dụng thẻ đó như bất kỳ phần tử HTML nào khác.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
Nội dung này có vẻ giống với nội dung tôi đã đề cập trong bài viết trước. Chú ý điều này Tôi đã đánh dấu vào 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>, bạn có thể nhập thành phần này
bằng cách sử dụng chính xác các thẻ <script>
theo nội dung trong tài liệu.
Chúng tôi liên tục cải tiến. Nếu bạn muốn thử nghiệm các tính năng mới trước
có chủ ý nâng cấp và triển khai, bạn sẽ muốn cài đặt một phiên bản cụ thể
trong tổng số <model-viewer>. Để thực hiện việc này, hãy thêm số phiên bản vào URL tệp như dưới đây
bên dưới. Sau đó, xem
trang bản phát hành
để được 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 suy nghĩ của bạn.
Vấn đề và ý kiến phản hồi
chào mừng bạn trên GitHub.