# Hướng dẫn import setting mẫu nón 3D lên web 3d ## A. Import mẫu nón 3D #### Yêu cầu: FIle import gồm các file: .gltf, .bin, .png,.... #### Import lỗi: - Kiểm tra file .gltf thuộc tính images dạng object gồm các field: mimeType, name, uri. - Kiểm tra trong file .gltf có %20 không nếu có thì bỏ %20 và chỉnh sửa lại tên file hình không có khoảng trắng. - Bước 1: Click "+ Add hat style" để mở modal. Click "Upload files". - Bước 2: Chọn Folder import, chọn tất cả các file trong folder. - Bước 3: setup mẫu nón + Hat style name*: tên mẫu nón + Client: lưu mẫu nón với client chọn hoặc k chọn mặc đinh lưu vô admin + Description: note + Image*: Chỉ hỗ trợ file .png hoặc .jbg + Button toggle public: public mẫu nón - Bước 4: Setup material mẫu nón + Cột Name*: tên group material bên 3d khi import vào web 3d + Display Name: Đổi tên material dễ hiểu. => Mở file import trong blender. Kiểm tra group material của mẫu nón thường bao gồm: đai, lưới, vải => đổi tên material của 3d sang dispaly name cho dễ hiểu + collapse: cho phép hiển thị danh sách material của group material + Color: Hiên thị bộ phận của mấu nón + Material: Thay đổi vải và màu của material + Text: Custom thêm chỉnh sửa trên material + Image: Custom thêm chỉnh sửa trên material ###Demo 1. Mở modal import [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755673306686.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755673306686.png) 2. Import file [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755673363798.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755673363798.png) 3. Đặt tên nón, import hình .... [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755673607069.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755673607069.png) 4. Đổi tên Display Name - Tên material trong file import đang không biết đâu là đai, lưới, vải - Kiểm tra trong blender. VD: trong blender đai tên material đang là FABRIC 1_1785 [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755673937022.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755673937022.png) - Kiểm material FABRIC 1_1785 đổi lại thành dai - [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755674146291.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755674146291.png) 5. Setup mẫu nón theo yêu cầu - Đổi vải, màu, edit image, text trên material [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755674233666.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755674233666.png) 6. VD: Customer Text [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755674673524.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755674673524.png) - Mở mẫu nón vừa import [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755674741787.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755674741787.png) - Custom text với material dai [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755674856051.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755674856051.png) 7. collapse [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755676666273.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755676666273.png) - Danh sách material theo group [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755676719641.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755676719641.png) - Hidden [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755676771154.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755676771154.png) [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755676834160.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755676834160.png) ## B. Setting logo size ### Dev mode: - import nón ở local - Mở hàm showModelDimensions xem chiều dài của nón trên web 3d (B) - Đo chiều dài thực tế của nón (A) - Tính hệ số theo công thức: A/8*20 - Lưu hệ sống này trong bảng model_actual_measurements cột real_centermeter(base_20) với model_3d_id đúng với mẫu nón import - check lại logo size đúng với kích thước thực tế nếu chưa điều chỉnh lại hệ số ### Demo - Chiều dài trên web 3d: 8.7cm [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755682916171.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755682916171.png) - Chiều dài đo thực tế: 12cm - Hệ số: 27.5 - Với hệ số trên logo size ch đúng kích thước thực tế nhất [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755683255180.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755683255180.png) - Điều chỉnh hệ số: 22.5 [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755683487053.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755683487053.png) ## C. import vải màu #### ***Yêu cầu: File fabric import có cùng mẫu nón Bước 1: Click 3 chấm ở mẫu nón muốn import vải màu -> click "List Fabric" -> mở modal import Fabric Bước 2: Click "Import Fabric" Bước 3: Chọn tất cả file (.gltf,.bin.png,...) trong folder import Bước 4: Setup màu và vải - Fabric name*: Tên vải. Gợi ý đặt tên: Tên vải + tên màu - List of images: + Group: Tên vải + Patone: Tên màu ( map mẫu nón 3d vs TTD) + Color: Mã màu (Không có mã màu sẽ hiển thị ảnh của màu trong file import) + isShow: show color in select + Display name: tên màu ( hiên thị trong select) - Note: Bật Material trong setting mẫu nón chỉnh ( theo yêu cầu edit màu vải của material) #### ***Demo 1. Mở modal import fabric [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755688249725.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755688249725.png) 2. Click import fabric [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755688634308.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755688634308.png) 3. Chọn tất cả file trong folder import 4. setup màu vải [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755689326747.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755689326747.png) 5.kết quả [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755689435971.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755689435971.png) [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755689460516.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755689460516.png) #### ***Chức năng thay đổi màu khi đổi material Mô tả: - Material Choose: Material được chọn - Material Stiches: Material đổi màu - Color: mã hex ### ***Demo - Setup sự kiện đổi màu material [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755689889778.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755689889778.png) - Mẫu nón khi chưa chọn vải [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755689974337.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755689974337.png) - Khi chọn vải, đai đổi màu [![](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/scaled-1680-/image-1755690047618.png)](https://book.app.tms-s.vn/uploads/images/gallery/2025-08/image-1755690047618.png)