Mô hình 3D cho trang web của bạn dễ dàng như viết HTML.
Các mô hình 3D phù hợp hơn bao giờ hết. Các nhà bán lẻ mang trải nghiệm mua sắm tại cửa hàng
đến nhà riêng của khách hàng. Các bảo tàng đang tạo mô hình 3D cho các cấu phần phần mềm của họ
cho tất cả mọi người trên web. Thật không may, có thể khó để thêm mô hình 3D vào trang web theo cách cung cấp trải nghiệm người dùng tuyệt vời nếu không có kiến thức chuyên sâu về công nghệ 3D hoặc không dùng đến việc lưu trữ nội dung 3D trên trang web của bên thứ ba. Thành phần web <model-viewer>, được giới thiệu vào đầu năm 2019, tìm cách giúp việc đưa các mô hình 3D trên web trở nên dễ dàng như viết một vài dòng HTML. Kể từ đó, nhóm phụ trách đã nỗ lực giải quyết
ý kiến phản hồi và yêu cầu của cộng đồng. Điểm cao nhất của tác phẩm đó là
<model-viewer> phiên bản 1.0, được phát hành vào đầu năm nay. Nay chúng tôi xin thông báo về việc phát hành <model-viewer> 1.1. Bạn có thể đọc ghi chú phát hành trên GitHub.
Có gì mới kể từ năm ngoái?
Phiên bản 1.1 bao gồm các tính năng hỗ trợ tích hợp sẵn cho công nghệ thực tế tăng cường (AR) trên web, các điểm cải tiến về tốc độ và độ trung thực cũng như các tính năng khác được yêu cầu thường xuyên.
Thực tế tăng cường
Việc xem mô hình 3D trên một canvas trống sẽ thật tuyệt vời, nhưng việc có thể xem mô hình 3D trong không gian của bạn còn tốt hơn nữa. Đối với mô hình 3D và AR Chrome hoàn toàn trong trình duyệt, Android hỗ trợ thực tế tăng cường bằng WebXR .
<model-viewer>.
Khi đã sẵn sàng, bạn có thể sử dụng thuộc tính này bằng cách thêm thuộc tính ar vào thẻ <model-viewer>. Các thuộc tính khác cho phép bạn tuỳ chỉnh trải nghiệm WebXR AR, như minh hoạ trong mẫu WebXR trên
modelviewer.dev. Mã mẫu dưới đây
cho thấy giao diện của giao diện này.
<model-viewer src="Chair.glb"
ar ar-scale="auto"
camera-controls
alt="A 3D model of an office chair.">
</model-viewer>
Video này có vẻ giống với video nhúng xuất hiện dưới tiêu đề này.
Phần cài đặt máy ảnh
Giờ đây, <model-viewer> sẽ có toàn quyền kiểm soát máy ảnh ảo của khung hiển thị (góc nhìn của người xem). Thông tin này bao gồm mục tiêu của máy ảnh, quỹ đạo (vị trí tương đối so với mô hình) và trường nhìn. Bạn cũng có thể bật chế độ xoay tự động và đặt giới hạn đối với tương tác của người dùng (ví dụ: các trường xem tối đa và tối thiểu).
Chú thích
Bạn cũng có thể chú thích cho mô hình của mình bằng HTML và CSS. Tính năng này thường dùng để "đính kèm" nhãn vào các phần của mô hình theo cách di chuyển cùng với mô hình khi mô hình được điều khiển. Bạn có thể tuỳ chỉnh các chú thích, bao gồm cả hình thức và mức độ mà mô hình ẩn chú giải. Chú thích cũng hoạt động trong AR.
<style>
button{
display: block;
width: 6px;
height: 6px;
border-radius: 3px;
border: 3px solid blue;
background-color: blue;
box-sizing: border-box;
}
#annotation{
background-color: #dddddd;
position: absolute;
transform: translate(10px, 10px);
border-radius: 10px;
padding: 10px;
}
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
<button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
<div id="annotation">Whistle</div>
</button>
</model-viewer>
Hãy xem trang tài liệu về chú thích để biết thêm thông tin.
Người chỉnh sửa
Phiên bản 1.1 giới thiệu và lưu trữ công cụ"chỉnh sửa" <model-viewer>, cho phép bạn nhanh chóng xem trước mô hình, thử các cấu hình <model-viewer> khác (ví dụ: độ phơi sáng và độ mềm của bóng), tạo hình ảnh áp phích và nhận toạ độ cho chú giải một cách tương tác.
Cải thiện hiệu suất và hiển thị
Độ trung thực khi kết xuất được cải thiện đáng kể, đặc biệt là đối với các môi trường có dải động cao (HDR). <model-viewer> hiện cũng sử dụng đường dẫn kết xuất trực tiếp khi chỉ có một phần tử <model-viewer> trong khung nhìn. Điều này giúp tăng hiệu suất (đặc biệt là trên Firefox). Cuối cùng, việc tự động điều chỉnh tỷ lệ độ phân giải kết xuất đã cải thiện đáng kể tốc độ khung hình. Ví dụ bên dưới cho thấy một số điểm cải tiến gần đây.
<model-viewer camera-controls
skybox-image="spruit_sunrise_1k_HDR.hdr"
alt="A 3D model of a well-worn helmet"
src="DamagedHelmet.glb"></model-viewer>
Độ ổn định
Với <model-viewer> đạt đến phiên bản lớn đầu tiên, độ ổn định của API là một ưu tiên, vì vậy, những thay đổi có thể gây lỗi sẽ tránh được cho đến khi phiên bản 2.0 được phát hành.
Tiếp theo là gì?
<model-viewer> phiên bản 1.0 bao gồm các tính năng được yêu cầu nhiều nhất, nhưng nhóm chưa hoàn thiện. Chúng tôi sẽ bổ sung thêm nhiều tính năng, cũng như cải thiện hiệu suất, độ ổn định, tài liệu và công cụ. Nếu bạn có đề xuất, hãy gửi sự cố trong GitHub; ngoài ra, chúng tôi luôn hoan nghênh các PR. Bạn có thể giữ kết nối bằng cách theo dõi <model-viewer> trên Twitter và xem cuộc trò chuyện với cộng đồng trên Spectrum.