AR thử nội thất trên web: khách đặt sofa, đèn 3D vào phòng nhà mình bằng điện thoại

Cập nhật tháng 10/2026. Thuộc tính của model-viewer và yêu cầu thiết bị của AR Quick Look, Scene Viewer có thể thay đổi theo phiên bản; hãy đối chiếu tài liệu gốc trước khi triển khai.

Khách xem một chiếc sofa đẹp trên web, rồi băn khoăn: đặt vào phòng khách 18 m² có chật không, màu cam có hợp sàn gỗ không. Họ nhắn hỏi kích thước, hẹn ra showroom, hoặc bỏ đi. Thực tế tăng cường (AR) cho phép khách đặt thử bản 3D của sản phẩm vào chính căn phòng nhà mình qua camera điện thoại, ngay từ trang sản phẩm, không cần cài ứng dụng.

1. Vấn đề: ảnh đẹp chưa trả lời được câu hỏi “có vừa phòng mình không”

Với đồ nội thất, đèn và đồ trang trí, ảnh sản phẩm dù đẹp vẫn chỉ cho thấy món đồ trong phòng mẫu. Khách phải tự tưởng tượng tỉ lệ, màu sắc và khoảng trống còn lại. Hệ quả quen thuộc:

• Khách chần chừ với món giá trị cao, chờ có dịp ra showroom.
• Hàng trả về hoặc đổi vì “to quá”, “màu khác ảnh”, tốn phí vận chuyển hai chiều với đồ cồng kềnh.

2. Giải pháp: AR ngay trên trình duyệt, không cần app

Hiện có hai “trình xem AR” dựng sẵn trong điện thoại, website chỉ cần gọi chúng:

Nói gọn: bạn đặt một thẻ model-viewer trên trang sản phẩm, trỏ vào file GLB. Trên điện thoại hỗ trợ AR, một nút xuất hiện để mở camera và đặt sản phẩm vào phòng theo kích thước thật.

3. Ví dụ minh hoạ: shop đèn và nội thất nhỏ ở TP.HCM

Đây là tình huống giả định để minh hoạ cách làm. Một shop bán khoảng 120 mã sản phẩm: sofa, ghế bành, bàn trà, đèn cây, đèn thả. Đội 6 người, bán qua website WooCommerce và Facebook. Câu hỏi khách nhắn nhiều nhất là kích thước và “đặt góc này có hợp không”.

• Chọn sản phẩm thử nghiệm: 10 mã bán chạy, giá cao, hay bị hỏi kích thước: 4 sofa, 3 ghế bành, 3 đèn cây.
• Có mô hình 3D: 4 mã nhà cung cấp gửi sẵn file 3D, 6 mã thuê dựng mới theo bản vẽ kích thước.
• Gắn lên web: thêm khối 3D vào trang sản phẩm, nút “Xem trong phòng bạn” ngay dưới giá.
• Đo sau 8 tuần: so sánh nhóm khách bấm AR và nhóm không bấm về tỉ lệ thêm vào giỏ, số tin nhắn hỏi kích thước, tỉ lệ đổi trả.

4. Cách bắt đầu: 5 bước

Đoạn mã tối thiểu (thay đường dẫn và tên cho đúng sản phẩm của bạn):

Một số thuộc tính đáng chú ý: ar-scale="fixed" khoá kích thước thật, không cho khách vô tình phóng to sofa gấp đôi; ar-placement="wall" dùng cho tranh, đèn gắn tường, gương; slot="ar-button" thay nút mặc định bằng nút của bạn, và nút này chỉ hiện trên thiết bị hỗ trợ AR.

Nếu đội kỹ thuật muốn tự dựng cảnh 3D tuỳ biến hơn (cấu hình màu, ghép bộ sofa), bài three.js cho người làm web là điểm khởi đầu. Với nhu cầu “cho khách đặt thử một món”, model-viewer thường đủ và nhẹ hơn nhiều.

5. Đặt nút và đo tương tác

• Vị trí nút: đặt gần giá và nút mua, dùng chữ rõ việc như “Xem trong phòng bạn”, kèm dòng nhỏ “Cần điện thoại hỗ trợ AR”.
• Không thay ảnh sản phẩm: giữ ảnh chụp thật làm ảnh chính; khối 3D là lựa chọn thêm. Ảnh chụp tốt vẫn quan trọng, xem cách chụp ảnh sản phẩm bằng điện thoại.
• Ghi kích thước trong mô tả: AR không thay được thông số dài, rộng, cao. Nếu dùng AI viết mô tả hàng loạt, giữ nguyên tắc không bịa thông số.
• Đo sự kiện: model-viewer phát sự kiện ar-status khi phiên AR bắt đầu, thất bại hoặc kết thúc; gửi các sự kiện này cùng lượt bấm nút sang công cụ phân tích (ví dụ Google Analytics 4) để biết bao nhiêu khách thực sự mở AR.

6. Chi phí và công sức ước tính

Các con số dưới đây là ước tính tham khảo cho thị trường Việt Nam, thay đổi nhiều theo độ phức tạp sản phẩm và đơn vị thực hiện:

7. Rủi ro và cách giảm

• Sai kích thước: mô hình lệch vài centimet là khách mất niềm tin. Đo lại sản phẩm thật, khoá ar-scale="fixed", ghi kích thước trong mô tả.
• Sai màu, sai chất liệu: màu trên màn hình phụ thuộc ánh sáng phòng và màn hình điện thoại. Ghi chú “màu có thể chênh lệch”, cung cấp ảnh chụp thật và mẫu vải khi cần.
• Máy cũ không hỗ trợ: Android không có ARCore hoặc trình duyệt không hỗ trợ sẽ không thấy nút AR. Khi đó khách vẫn xoay được mô hình 3D trên trang, nên đừng hứa “điện thoại nào cũng dùng được”.

8. Thuật ngữ cần biết

• glTF / GLB: định dạng mở để truyền và nạp mô hình 3D hiệu quả trên web; GLB là bản đóng gói một tệp. Nguồn: Khronos glTF.
• USDZ: định dạng mô hình 3D mà AR Quick Look trên iPhone, iPad dùng để hiển thị. Nguồn: Apple AR Quick Look.
• Scene Viewer: trình xem của Google cho phép người dùng Android đặt mô hình 3D từ web vào không gian thật. Nguồn: Google Scene Viewer.
• Photogrammetry (quét ảnh): dựng mô hình 3D từ nhiều ảnh chụp quanh vật thể. Nguồn: Apple Object Capture.

9. Tìm hiểu thêm

• model-viewer: ví dụ Augmented Reality: các thuộc tính ar, ios-src, ar-scale, ar-placement và nút tuỳ biến.
• Previewing a model with AR Quick Look: tài liệu Apple về nhúng USDZ vào trang web.
• Danh sách thiết bị hỗ trợ ARCore: kiểm tra máy Android của khách có dùng được AR.

10. Câu hỏi thường gặp

Muốn showroom nội thất của bạn có tour 360 và sản phẩm 3D để khách xem thử trước khi mua? Tham khảo giải pháp thực tế ảo tại 360VR.