Thành phần web <model-viewer>

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.

Joe Medley
Joe Medley

Việc thêm mô hình 3D vào một trang web là một việc phức tạp. Mô hình 3D được hiển thị lý tưởng trong một trình xem có thể hoạt động phản hồi nhanh trên mọi trình duyệt, bao gồm điện thoại thông minh, máy tính hoặc thậm chí cả màn hình mới đeo đầu. 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. API 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ũ với mức pin thấp hơn cho đến các thiết bị mới hơn có 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. Trang web phải có hiệu suất cao và dễ truy cập. 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. Thành phần web hoạt động cho mọi ý định và mục đích 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 đề cập đến 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

Nhúng mô hình 3D cũng đơn giản như đá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-rotatecamera-controls cung cấp tính năng điều khiển chuyển động và 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 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 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.

Nhiều hình ảnh về bộ đồ vũ trụ thể hiện khả năng thích ứng.
Nhiều hình ảnh về bộ đồ vũ trụ thể hiện khả năng thích ứng.

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. 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điểm nóng.