Việc thêm mô hình 3D vào một trang web có thể là một công việc phức tạp; <model-viewer> cũng dễ như viết HTML.
Việc thêm mô hình 3D vào trang web là một việc khó khăn. 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 để bàn hoặc thậm chí là màn hình gắn trên đầu 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 kết xuất. Ứng dụng này phải hỗ trợ các trường hợp sử dụng trên tất cả thiết bị, từ điện thoại thông minh cũ, có công suất thấp hơn đến các thiết bị mới hơn hỗ trợ công nghệ thực tế tăng cường. Phải luôn cập nhật các công nghệ hiện tại. Video phải hoạt động 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 yêu cầu cá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ữ các 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 thêm 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ụ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 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ị.
Bộ công cụ này có các tính năng về 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à một phần tử HTML tuỳ chỉnh được tạo 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 giống như một phần tử tiêu 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 gì đặc biệt để sử dụng thành phần web, chứ đừng nói đến <model-viewer>
.
Bài viết này trình bày các tính năng dành riêng cho <model-viewer>
.
Nếu muốn tìm hiểu thêm về các thành phần web, thì bạn nên bắt đầu bằng 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
Việc nhúng mô hình 3D cũng đơn giản như mã đánh dấu sau. 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ã đó 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 cho 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ả mô hình 3D đều cần thời gian để tải, nên việc thêm thuộc tính poster
có nghĩa là hình ảnh sẽ hiển thị cho đến khi mô hình đã sẵn sàng để sử dụng.
Bạn có thể tạo 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ế thích ứng, điều chỉnh theo tỷ lệ cho cả thiết bị di động và máy tính. Lớp 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ột 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 hình ảnh đó khớp với kết xuất 3D, ngay cả khi tỷ lệ khung hình của <model-viewer>
phản hồi các kích thước màn hình khác nhau.
Tính năng khác
Khám phá tài liệu về <model-viewer>
để xem các bản minh hoạ về các tính năng nâng cao hơn.
Các tính năng này bao gồm khả năng thêm hộp bầu trời được chiếu xuống mặt đất, tạo hiệu ứng kết cấu động và điểm nóng.