.skp) KHÔNG hiển thị được trên web. Bắt buộc phải export sang .glb trước khi upload.1. Tổng quan quy trình
Mỗi mẫu thiết kế cần chuẩn bị các file sau:
| File | Bắt buộc? | Mục đích |
|---|---|---|
.glb | Bắt buộc | Hiển thị 3D trên web (xoay, zoom, AR Android) |
.jpg / .png (poster) | Bắt buộc | Ảnh thumbnail hiển thị trong gallery |
.usdz | Tuỳ chọn | AR trên iPhone (Quick Look) |
Sơ đồ quy trình:
SketchUp (.skp) ↓ export .dae / plugin glTF Blender (clean + Draco + material variants) ↓ export .glb (+ .usdz cho iOS) Upload lên /admin/mau-thiet-ke
2. Export từ SketchUp sang GLB
Cách 1 — Plugin glTF (nhanh nhất)
- Mở SketchUp →
Window → Extension Warehouse, tìm "glTF Exporter" của Centaur Engineering, nhấn Install. - Mở file thiết kế cần export.
File → Export → glTF (.glb)→ chọn Binary (.glb).- Bật Draco compression nếu có (giảm dung lượng 5–10 lần).
Cách 2 — Qua Blender (kiểm soát tốt hơn)
- SketchUp:
File → Export → 3D Model→ chọn định dạng.dae(Collada — bản free) hoặc.fbx(cần SketchUp Pro). - Mở Blender (miễn phí tại blender.org) →
File → Import → Collada (.dae)hoặc FBX. - Kiểm tra vật liệu, gộp mesh, xoá object thừa.
File → Export → glTF 2.0 (.glb)với các tuỳ chọn:- Format: glTF Binary (.glb)
- Bật Compression (Draco) — mức 6
- Include: Materials, UVs, Normals
Cách 3 — Online converter
Dùng cho file đơn giản, không có vật liệu phức tạp:
3. Tối ưu file (rất quan trọng)
File SketchUp xuất ra thường rất nặng. Trước khi upload phải tối ưu:
| Vấn đề | Cách xử lý |
|---|---|
| File quá nặng (>50 MB), nhiều mặt thừa | Blender: Decimate modifier → giảm còn dưới 100k triangles |
| Texture bị mất khi export | SketchUp: File → Save As → Purge Unused; đảm bảo texture đã embed trong file |
| File GLB vẫn > 15 MB | Bật Draco compression + convert texture sang KTX2 bằng gltf-transform |
| Model bị tối / không có ánh sáng | Không cần thêm đèn — viewer dùng HDR environment mặc định |
4. Đổi vật liệu/màu trong viewer (KHR_materials_variants)
Nếu muốn khách hàng có thể chuyển đổi vật liệu trực tiếp trên web (VD: đá trắng → đá đen → granite), cần setup material variants trong Blender:
- Mở file
.glbtrong Blender. - Cài addon KHR_materials_variants (có sẵn từ Blender 3.2+, bật trong
Edit → Preferences → Add-ons). - Trong panel
Object Properties → Material Variants, tạo các variant:- "Đá trắng" → gán material đá trắng
- "Đá đen" → gán material đá đen
- "Granite đỏ" → gán material granite
- Export lại
.glb— nhớ bật "Material variants" trong dialog export.
5. Tạo file .usdz cho iPhone AR (tuỳ chọn)
iPhone/iPad cần định dạng riêng .usdz để xem AR. Ba cách:
- Reality Converter (Mac, miễn phí từ Apple): kéo thả
.glb→ File → Export →.usdz. - Aspose GLB → USDZ (online, không cần Mac).
- CLI:
npm i -g @gltf-transform/cli→gltf-transform usdz model.glb model.usdz.
6. Tạo ảnh poster (thumbnail)
Mỗi mẫu cần 1 ảnh đại diện hiển thị trong gallery. Cách dễ nhất:
- SketchUp: chọn góc nhìn đẹp →
File → Export → 2D Graphic→ JPG. - Kích thước khuyên dùng: 1200 × 900 px, dung lượng < 500 KB.
- Có thể dùng squoosh.app để nén ảnh online.
7. Upload lên hệ thống
- Vào trang /admin/mau-thiet-ke (cần đăng nhập tài khoản admin).
- Nhấn "Thêm mẫu mới", điền:
- Tên mẫu — VD: "Khuôn viên hoa văn rồng phụng"
- Danh mục — Khuôn viên / Mộ đá
- Mô tả — kích thước, chất liệu, đặc điểm
- Tên khách hàng (nếu là mẫu thiết kế riêng)
- Upload 3 file:
.glb, ảnh poster,.usdz(tuỳ chọn). - Tích "Công khai" nếu muốn hiển thị cho khách. Lưu lại.
8. Xử lý sự cố thường gặp
Model load nhưng bị đen / không thấy gì
Thiếu normals khi export. Quay lại Blender, khi export GLB bật "Include Normals".
Model bị lật ngược / nằm nghiêng
SketchUp dùng trục Z up, GLB dùng Y up. Trong Blender, xoay model 90° quanh trục X trước khi export.
Upload thất bại "file too large"
Giới hạn 50 MB. Bật Draco + giảm texture xuống 1024×1024 hoặc nhỏ hơn.
Trên iPhone không có nút "Xem AR"
iPhone bắt buộc cần file .usdz. Xem mục 5 để tạo file này.