Việc thêm mô hình 3D vào trang web có thể rất phức tạp; <model-viewer> dễ dàng như viết HTML.
Việc thêm mô hình 3D vào trang web không hề dễ dàng. Mô hình 3D được hiển thị lý tưởng trong một trình xem có thể hoạt động thích ứng trên tất cả các trình duyệt, bao gồm cả điện thoại thông minh, máy tính hoặc thậm chí là kính tích hợp màn hình mới. Trình xem phải hỗ trợ tính năng cải tiến tăng dần để cải thiện hiệu suất và chất lượng hiển thị. Ứng dụng này phải hỗ trợ các trường hợp sử dụng trên mọi thiết bị, từ điện thoại thông minh đời cũ, cấu hình thấp cho đến các thiết bị mới hơn có hỗ trợ thực tế tăng cường. Nó phải luôn cập nhật các công nghệ hiện tại. Ứng dụng phải có hiệu suất cao và dễ tiếp cận. Tuy nhiên, việc xây dựng một trình xem như vậy đòi hỏi kỹ năng lập trình 3D chuyên biệt và có thể là một thách thức đối với các nhà phát triển web muốn lưu trữ mô hình của riêng họ thay vì sử dụng dịch vụ lưu trữ của bên thứ ba.
Tuy nhiên, thành phần web <model-viewer> cho phép bạn thêm mô hình 3D vào trang web một cách rõ ràng, đồng thời lưu trữ mô hình đó trên trang web của riêng bạn.
Mục tiêu của thành phần này là cho phép thêm mô hình 3D vào trang web của bạn mà không cần hiểu rõ công nghệ và nền tảng cơ bản.
Thành phần web này hỗ trợ thiết kế đáp ứng
và các trường hợp sử dụng như thực tế tăng cường trên một số thiết bị.
Thẻ này có các tính năng hỗ trợ tiếp cận, chất lượng kết xuất và khả năng tương tác.
Thành phần web là gì?
Thành phần web là một phần tử HTML tuỳ chỉnh được xây dựng từ các tính năng tiêu chuẩn của nền tảng web. Thành phần web hoạt động cho tất cả ý định và mục đích như một phần tử tiêu chuẩn. Thành phần này có một thẻ riêng biệt, có thể có các thuộc tính và phương thức, đồng thời có thể kích hoạt và phản hồi các sự kiện. Nói tóm lại, bạn không cần phải biết điều gì đặc biệt để sử dụng bất kỳ thành phần web nào, chứ chưa nói đến <model-viewer>.
Bài viết này đề cập đến các tính năng dành riêng cho <model-viewer>.
Nếu bạn muốn tìm hiểu thêm về các thành phần web, thì webcomponents.org là một nơi phù hợp để bắt đầu.
<model-viewer> có thể làm những gì?
Các ví dụ sau đây minh hoạ một số chức năng của <model-viewer>.
Mô hình 3D cơ bản
Việc nhúng mô hình 3D cũng đơn giản như mã đánh dấu sau đây. Bằng cách sử dụng tệp glb, thành phần này sẽ hoạt động trên mọi trình duyệt chính.
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
id="mv-shark"
src="shark.glb"
camera-controls
></model-viewer>
Mã đó sẽ hiển thị như sau:
Thêm chuyển động và khả năng tương tác
Các thuộc tính auto-rotate và camera-controls cung cấp chuyển động và quyền kiểm soát của người dùng. Đó không phải là những thuộc tính duy nhất có thể có. Hãy xem tài liệu để biết danh sách đầy đủ các thuộc tính.
<model-viewer src="shark.glb" auto-rotate camera-controls>
Trì hoãn việc tải bằng hình ảnh áp phích
Tất cả mô hình 3D đều cần thời gian để tải, việc thêm thuộc tính poster có nghĩa là một hình ảnh sẽ xuất hiện cho đến khi mô hình sẵn sàng để sử dụng.
Bạn có thể tạo một hình ảnh áp phích giống hệt với hình ảnh kết xuất 3D bằng trình chỉnh sửa.
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
Thiết kế đáp ứng
Thành phần này xử lý một số loại thiết kế đáp ứng, điều chỉnh tỷ lệ cho cả thiết bị di động và máy tính. Thành phần này cũng có thể quản lý nhiều thực thể trên một trang và sử dụng Intersection Observer để tiết kiệm pin và chu kỳ GPU khi mô hình không hiển thị.
Khi sử dụng trình chỉnh sửa được mô tả trước đó để tạo hình ảnh áp phích, bạn có thể dùng một hình ảnh duy nhất đó để khớp với kết xuất 3D, ngay cả khi tỷ lệ khung hình của <model-viewer> thích ứng với nhiều kích thước màn hình.
Tính năng khác
Khám phá tài liệu về <model-viewer> để xem bản minh hoạ về các tính năng nâng cao hơn.
Trong đó có khả năng thêm
hộp bầu trời chiếu xuống mặt đất,
tạo
kết cấu động
và điểm phát sóng.