Việc thêm mô hình 3D vào trang web có thể phức tạp; <model-viewer> cũng dễ dàng như viết HTML.
Bạn khó có thể thêm mô hình 3D vào trang web. Lý tưởng nhất là các mô hình 3D sẽ hiển thị 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í cả các màn hình mới đeo đầu. Trình xem sẽ hỗ trợ cải tiến dần về hiệu suất và chất lượng kết xuất. Thư viện này sẽ 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 cũ, công suất thấp cho đến các thiết bị mới có hỗ trợ công nghệ thực tế tăng cường. Nó luôn được cập nhật với các công nghệ hiện tại. Chiến dịch này cần phải hiệu quả 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 phải có kỹ năng lập trình 3D đặc 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 mình 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 khai báo 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.
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 về công nghệ và nền tảng cơ bản.
Thành phần web hỗ trợ thiết kế thích ứ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ị.
Phiên bản này có các tính năng hỗ trợ tiếp cận, chất lượng kết xuất và tính tương tác.
Thành phần web là gì?
Thành phần web là 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. Một thành phần web hoạt động cho mọi ý định và mục đích như một phần tử chuẩn. Lớp này có một thẻ duy nhấ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. 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, ngoại trừ <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 của web, thì bạn nên bắt đầu từ webcomponents.org.
<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
Nhúng mô hình 3D cũng đơn giản như đánh dấu sau. Khi 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ã đó hiển thị như sau:
Thêm chuyển động và tương tác
Các thuộc tính auto-rotate và camera-controls cung cấp chuyển động và khả năng điều khiển 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 quá trình tải do hình ảnh áp phích
Tất cả các mô hình 3D đều phải mất thời gian để tải. Việc thêm thuộc tính poster có nghĩa là hình ảnh sẽ được hiển thị 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 trông giống hệt với bản kết xuất 3D bằng cách sử dụ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ế thích ứng, giúp mở rộng cho cả thiết bị di động và máy tính. Cấu hình này cũng có thể quản lý nhiều thực thể trên một trang và sử dụng Trình quan sát giao điểm để tiết kiệm pin và chu kỳ GPU khi mô hình không hiển thị.
Việc sử dụng trình chỉnh sửa được mô tả trước đó để tạo hình ảnh áp phích cho phép
một hình ảnh đó khớp với kết xuất 3D, ngay cả khi tỷ lệ khung hình của <model-viewer>
tương ứng với nhiều kích thước màn hình.
Tính năng khác
Tham khảo tài liệu về <model-viewer> để xem bản minh hoạ các tính năng nâng cao khác.
Các tính năng này bao gồm khả năng thêm skybox hình mặt đất, tạo hoạ tiết ảnh động và điểm phát sóng.