ứng dụng 3d VIRTUAL TRY ON thử đồ

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 2
Đề tài:

ỨNG DỤNG 3D VIRTUAL TRY-ON THỬ ĐỒ
Giảng viên hướng dẫn: ThS. Trần Anh Dũng
ThS. Phan Trung Hiếu

Sinh viên thực hiện:

Hồng Đình Quang

18520342

TP. Hồ Chí Minh, ngày 01 tháng 01 năm 2022


NHẬN XÉT CỦA GIẢNG VIÊN
.....................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
.......................................... ....................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................

...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
..................................................

LỜI CẢM ƠN
Lời đầu tiên nhóm chúng em xin chân thành gửi lời cảm ơn đến thầy - Ths
Trần Anh Dũng trong thời gian đã tận tâm giúp đỡ chúng em thông qua các


buổi báo cáo để giúp chúng em có thể hồn thành đồ án của mình một cách tốt
nhất
Đồng thời nhóm em cũng muốn gửi lời cảm ơn đến các anh chị khóa trên,
đặc biệt là những anh chị trong khoa đã chia sẻ những kinh nghiệm quý báu về
môn học cũng như những kiến thức liên quan. Cũng xin cảm ơn bạn bè đã tạo
điều kiện thuận, mọi người đã đưa ra nhận xét và góp ý chân thành, vơ cùng
quý giá. Những người đã động viên, hỡ trợ nhóm hoàn thành đề tài.
Dù đã rất cố gắng hoàn thành đề tài trong phạm vi và khả năng cho phép
nhưng chúng em vẫn chưa thể làm tốt đồ án. Quá trình thực hiện đồ án này
cũng là bài học học cho chúng em để rút ra những kinh nghiệm cho những lần
thực hiện đồ án tiếp theo. Em mong rằng trong thời gian sau vẫn luôn được
Thầy cùng với bạn bè ủng hộ và giúp đỡ cho nhóm chúng em
Chúng em xin chân thành cảm ơn.

Nhóm thực hiện

Hồng Đình Quang


Chương I: Giới thiệu đề tài
I . Lý do chọn đề tài
Ecommerce hiện nay đang phát triển mạnh mẽ với thói quen sử dụng thiết bị
cơng nghệ và mua hàng online. Với sự tiện lợi mà Ecommerce mang lại cho các
ngành hàng nói chung và ngành thời trang nói riêng, việc thử đồ khi mua đồ
online còn mang lại nhiều hạn chế về khoảng cách. Khách hàng phải tự ướm xem
sản phẩm với người mẫu và tự so sánh với mình để xem nó có phù hợp hay
khơng. Do đó, khách hàng khi nhận sản phẩm thường sẽ bị hớ về kích cỡ hay mặc
khơng hợp.
Hiện nay các trang web Ecommerce thời trang còn chưa chú trọng vào việc thử
đồ online, rất ít cửa hàng áp dụng nó. Với những lý do trên phát triển một công
nghệ cho phép khách hàng có thể thử đồ trên các web ecommerce thời trang là
một việc thiết yếu cho hiện tại và tương lai.

II. Xác định yêu cầu
1. Danh sách yêu cầu:
STT

Tên yêu cầu

Biểu mẫu

1

Thêm Model

BM 1

2

Thêm loại model

BM 2

2. Danh sách các biểu mẫu:
2.1 Biểu mẫu 1:

Quy định Ghi chú


2.2 Biểu mẫu 2:


Chương II: Phân tích
I. Sơ đồ Usecase:

II. Danh sách Actor:
STT
1

Tên Actor
Quản lý

2

Người dùng

Ý nghĩa/Ghi chú
Người có vị trí cao nhất, chịu trách nhiệm quản lý các
model.
Người dùng sử dụng dịch vụ thử đồ với các model
người quản lý tạo

III. Danh sách Usecase:
STT
1
2

Tên Usecase
Quản lý model
Quản lý loại model

Ý nghĩa/Ghi chú
Thêm/Sửa/Xóa các model.
Thêm/Sửa/Xóa loại model


3

Thử đồ

Thử đồ với các model có sẵn

IV. Đặc tả Usecase:
1. Quản lý model

-

Thêm model

Tên chức năng

Thêm model

Tóm tắt

Thêm các thông tin của model như: tên model, loại model và các
thơng tin chi tiết khác.

Dịng sự kiện chính

1. Vào trang quản lý điền thông tin vào form thêm model và chọn
“Thêm model”.
3. Hệ thống kiểm tra thông tin, nếu các thơng tin hợp lệ sẽ tiến hành
bước tiếp theo.

Dịng sự kiện khác

4. Hệ thống lưu dữ liệu và thông báo thành công.
3.1. Thông tin không hợp lệ:
Hệ thống hiển thị thông báo màu đỏ tại chỗ bị lỗi và yêu cầu nhập

Các u cầu đặc biệt

lại thơng tin.
Khơng có

Trạng thái hệ thống Actor: Quản lý.
trước khi thực hiện use
case

Điều kiện: Người dùng đã đăng nhập vào hệ thống và có quyền sử
dụng chức năng này.

Trạng thái hệ thống sau Người dùng thêm thông tin model thành công vào hệ thống.
khi thực thiện use case
Điểm mở rộng

-

Khơng có

Sửa model

Tên chức năng
Tóm tắt
Dịng sự kiện chính

Sửa thơng tin model
Cập nhật thơng tin của model
1. Vào mục danh sách model trong trang quản lý, nhấn vào nút “Thông
tin” của model.
2. Người dùng nhập thông tin mới vào form thông tin và nhấn “Lưu”.
3. Hệ thống kiểm tra thông tin, nếu các thông tin hợp lệ sẽ tiến hành

bước tiếp theo.
Dòng sự kiện khác

4. Hệ thống cập nhật dữ liệu và thông báo thành công.
3.1. Thông tin không hợp lệ:

Các yêu cầu đặc biệt
Trạng thái hệ thống trước

Hệ thống hiển thị thông báo yêu cầu nhập lại thông tin.
Khơng có
Actor: Quản lý

khi thực hiện use case

Điều kiện: người dùng đã đăng nhập vào hệ thống và có quyền sử dụng

Trạng thái hệ thống sau

chức năng này.
Người dùng cập nhật thông tin model thành công vào hệ thống.

khi thực thiện use case
Điểm mở rộng

Khơng có

-

Xố model

Tên chức năng
Tóm tắt
Dịng sự kiện chính

Xóa thơng tin model
Xóa thơng tin của model
1. Vào mục danh sách model trong trang quản lý, nhấn vào nút “Xóa
thơng tin” của model.
2. Người dùng chọn model cần xóa thơng tin và nhấn “Xác nhận”.

Dịng sự kiện khác
Các yêu cầu đặc biệt
Trạng thái hệ thống trước

3. Hệ thống cập nhật dữ liệu và thông báo thành công.
Không có
Khơng có
Actor: Quản lý

khi thực hiện use case

Điều kiện: người dùng đã đăng nhập vào hệ thống và có quyền sử dụng

Trạng thái hệ thống sau

chức năng này.
Người dùng xóa thông tin nhân viên thành công.

khi thực thiện use case

Điểm mở rộng

Khơng có

-

Xem thơng tin model

Tên chức năng

Xem thơng tin model

Tóm tắt

Xem thơng tin của model

Dịng sự kiện chính

1. Nhấn vào nhân viên cần xem chi tiết thơng tin.

Dịng sự kiện khác

2. Hệ thống hiển thị thơng tin model.
Khơng có

Các u cầu đặc biệt

Khơng có

Trạng thái hệ thống Actor: Quản lý
trước khi thực hiện use

Điều kiện: Khơng có

case
Trạng thái hệ thống sau Hệ thống hiển trị trang thông tin model.
khi thực thiện use case
Điểm mở rộng

Khơng có

2. Quản lý loại model
-

Thêm loại model

Tên chức năng

Thêm loại model

Tóm tắt

Thêm các thơng tin của loại model như: tên loại model và các
thơng tin chi tiết khác.

Dịng sự kiện chính

1. Vào trang quản lý điền thơng tin vào form thêm loại model và
chọn “Thêm loại model”.

3. Hệ thống kiểm tra thông tin, nếu các thông tin hợp lệ sẽ tiến hành
bước tiếp theo.

Dòng sự kiện khác

4. Hệ thống lưu dữ liệu và thông báo thành công.
3.1. Thông tin không hợp lệ:
Hệ thống hiển thị thông báo màu đỏ tại chỗ bị lỗi và yêu cầu nhập

Các yêu cầu đặc biệt

lại thơng tin.
Khơng có

Trạng thái hệ thống Actor: Quản lý.
trước khi thực hiện use
case

Điều kiện: Người dùng đã đăng nhập vào hệ thống và có quyền sử
dụng chức năng này.

Trạng thái hệ thống sau Người dùng thêm thông tin model thành công vào hệ thống.
khi thực thiện use case
Điểm mở rộng

-

Khơng có

Sửa loại model

Tên chức năng

Sửa thơng tin loại model


Tóm tắt
Dịng sự kiện chính

Cập nhật thơng tin của loại model
1. Vào mục danh sách loại model trong trang quản lý, nhấn vào nút
“Thông tin” của model.
2. Người dùng nhập thông tin mới vào form thông tin và nhấn “Lưu”.
3. Hệ thống kiểm tra thông tin, nếu các thông tin hợp lệ sẽ tiến hành
bước tiếp theo.

Dòng sự kiện khác

4. Hệ thống cập nhật dữ liệu và thông báo thành công.
3.1. Thông tin không hợp lệ:

Các yêu cầu đặc biệt
Trạng thái hệ thống trước

Hệ thống hiển thị thông báo yêu cầu nhập lại thơng tin.
Khơng có
Actor: Quản lý

khi thực hiện use case

Điều kiện: người dùng đã đăng nhập vào hệ thống và có quyền sử dụng

Trạng thái hệ thống sau

chức năng này.
Người dùng cập nhật thông tin model thành công vào hệ thống.

khi thực thiện use case
Điểm mở rộng

Khơng có

-

Xố model

Tên chức năng
Tóm tắt
Dịng sự kiện chính

Xóa thơng tin loại model
Xóa thơng tin của loại model
1. Vào mục danh sách loại model trong trang quản lý, nhấn vào nút “Xóa
thơng tin” của loại model.
2. Người dùng chọn loại model cần xóa thơng tin và nhấn “Xác nhận”.

Dịng sự kiện khác
Các yêu cầu đặc biệt
Trạng thái hệ thống trước

3. Hệ thống cập nhật dữ liệu và thơng báo thành cơng.
Khơng có
Khơng có
Actor: Quản lý

khi thực hiện use case

Điều kiện: người dùng đã đăng nhập vào hệ thống và có quyền sử dụng

Trạng thái hệ thống sau

chức năng này.
Người dùng xóa thơng tin nhân viên thành công.

khi thực thiện use case
Điểm mở rộng

Khơng có

-

Xem thơng tin model

Tên chức năng

Xem thơng tin loại model

Tóm tắt

Xem thơng tin của loại model

Dịng sự kiện chính

1. Nhấn vào loại model cần xem chi tiết thơng tin.

Dịng sự kiện khác

2. Hệ thống hiển thị thông tin loại model.
Khơng có


Các u cầu đặc biệt

Khơng có

Trạng thái hệ thống Actor: Quản lý
trước khi thực hiện use

Điều kiện: Khơng có

case
Trạng thái hệ thống sau Hệ thống hiển trị trang thông tin model.
khi thực thiện use case
Điểm mở rộng

Khơng có

V. Sơ đồ lớp:
1. Sơ đồ lớp (Mức phân tích)

2. Danh sách các lớp đối tượng
STT

Tên lớp

Loại

Ý nghĩa/ Ghi chú

1

Model

Model 3d

2

ModelCategory

loại Model 3d


3. Mô tả chi tiết từng đối tượng
3.1 Model
-

Danh sách thuộc tính:

STT

Thuộc tính

Kiểu dữ liệu

Phạm vi truy
cập

Ý nghĩa

1

ModelCode

String

Public

Id của model 3d

2

ModelName

String

Public

Tên của model
3d

3

ModelDescripte

String

Public

Mô tả của model
3d

4

ModelCategory

String

Public

Loại model 3d

5

ModelObj

Object

Public

File .Obj của

model

5

ModelMtl

Object

Public

File .mtl của
model

5

ModelMaterial

Object

Public

File màu chất
liệu của model

8

ModelStatus

String

Public

Trạng thái

-

danh sách phương thức

STT

Tên phương thức

Kiểu trả về

Ràng buộc

Ý nghĩa/ Ghi chú

1

FindByModelCode

Model

Public

Lấy thông tin một
model 3d

2

FindByModelCategory

List<Model>

Public

Lấy danh sách model
3d theo loại model

3

Create

Boolean

Public

Thêm mới model 3d

4

Update

Boolean

Public

Cập nhật model 3d

5

Delete

Boolean

Public

Xoá model 3d

3.2 ModelCategory


-

Danh sách thuộc tính:

STT

Thuộc tính

Kiểu dữ liệu

Phạm vi truy
cập

Ý nghĩa

1

ModelCategoryCode

String

Public

Id của loại model
3d

2

ModelCategoryName

String

Public

Tên của loại
model 3d

3

ModelCategoryDescripte

String

Public

Mô tả của loạik
model 3d

4

ModelCategoryStatus

String

Public

Trạng thái

-

danh sách phương thức

STT

Tên phương thức

1

Kiểu trả về

Ràng buộc

Ý nghĩa/ Ghi chú

FindByModelCategoryCode ModelCategory

Public

Lấy thông tin một
loại model 3d

2

FindAll

List<ModelCategory>

Public

Lấy danh sách tất cả
loại model 3d

3

Create

Boolean

Public

Thêm mới loại
model 3d

4

Update

Boolean

Public

Cập nhật loại model
3d

5

Delete

Boolean

Public

Xoá loại model 3d


Chương III: Thiết kế dữ liệu
I. Sơ đồ
1. Sơ đồ cơ sở dữ liệu

2. Sơ đồ logic

II. Mô tả bảng dữ liệu
1. Model
STT

Thuộc tính

Kiểu dữ liệu

Ý nghĩa

1

ModelCode

String

Id của model 3d

2

ModelName

String

Tên của model 3d

3

ModelDescripte

String

Mô tả của model 3d

4

ModelCategory

String

Loại model 3d


5

ModelObj

String

File .Obj của model

6

ModelMtl

String

File .mtl của model

7

ModelMaterial

String

File màu chất liệu của

model

8

ModelStatus

Trạng thái

2. ModelCategory
STT

Thuộc tính

Kiểu dữ liệu

Ý nghĩa

1

ModelCategoryCode

String

Id của loại model 3d

2

ModelCategoryName

String

Tên của loại model 3d

3

ModelCategoryDescripte

String

Mô tả của loạik model 3d

4

ModelCategoryStatus

String

Trạng thái


Chương IV: Thiết kế kiến trúc
I. Công nghệ sử dụng
- Technical Stack: MERN stack (MongoDB, ExpressJS, React, Node.js).
- Ngôn ngữ: JavaScript.
- Library: ReactJs, Mongoose.
- Framework: Express.
- Framework UI: Ant design.
- Library 3D: ThreeJS.
- Machine Learning solution: Tensorflow
- Cơ sở dữ liệu: MongoDB.

1. Giới thiệu:
-

MERN stack: là bộ combo open source các công nghệ đều liên
quan đến javascript hot hiện nay: MongoDB, ExpressJS, React/
React Native, NodeJS.

-

MongoDB: là một hệ cơ sở dữ liệu phân tán (noSQL database),
MongoDB thường đi với Mongoose – một library để giao tiếp với
MongoDB dễ dàng hơn.


-

Node.js: là một nền tảng được xây dựng dựa trên javascript
runtime của Chrome chạy theo hướng sự kiện không đồng bộ,
Nodejs được dùng để thiết kế, xây dựng một ứng dụng mạng mở
rộng.

-

Express: là web framework được xây bằng javascript chạy trên
nền Nodejs. Nó hỡ trợ thêm nhiều tính năng cần có của một web
framework như: routing, middlewares, template engines, vv.

-

React: là thư viện frontend của facebook được viết bằng javascript.

- Tensorflow: là một thư viện máy học với các mơ hình đặc trưng như body
segmentation, object detection....
- Threejs: là thư viện javascript dùng để tạo và hiển thị đồ hoạ máy tính 3D trong
trình duyệt sử dụng webGL.

II. Mơ hình kiến trúc hệ thống
- Sử dụng mơ hình Model View Controller (MVC):

· Model: là nơi chứa những nghiệp vụ tương tác với dữ liệu và hệ quản trị cơ
sở dữ liệu MongoDB; bao gồm các class/ function xử lý nhiều nghiệp vụ như kết
nối database, truy vấn dữ liệu, thêm – xóa – sửa dữ liệu….
· View: là nơi chứa những giao diện như nút bấm, khung nhập menu, hình ảnh,
… nó đảm nhiệm nhiệm vụ hiển thị dữ liệu và giúp người dùng tương tác với hệ
thống.
· Controller: là nơi tiếp nhận những yêu cầu xử lý được gửi từ người dùng, nó
sẽ gồm những class/ function xử lý nhiều nghiệp vụ logic lấy đúng dữ liệu thông tin
cần thiết nhờ các nghiệp vụ lớp Model cung cấp và hiển thị dữ liệu đó cho ra người
dùng nhờ lớp view.
- Sử tương tác giữa các thành phần:

· Controller tương tác qua lại với view.
· Controller tương tác qua lại với Model.
· Model và View khơng có sự tương tác với nhau mà nó tương tác thơng qua
Controller.


- Cấu trúc Modules

Chương V: Thiết kế giao diện
I. Danh sách các màn hình
STT

Màn hình

Loại màn hình

Chức năng

1

Màn hình thử đồ

Màn hình hiển
thị, thao tác

+ Cho phép người dùng xem danh sách
model và thử đồ

2

Màn hình Quản lý
loại model

Màn hình nhập
liệu và hiển thị,
thao tác

+ Cho phép người dùng thêm mới/sửa xóa

loại model,

Màn hình nhập
liệu và hiển thị,
thao tác

+ Cho phép người dùng thêm mới/sửa xóa
model,

3

Màn hình Quản lý
model

+ Xem thông tin loại model

+ Xem thông tin model


II. Sơ đồ liên kết màn hình

III. Mơ tả các đối tượng trên màn hình
1.màn hình thử đồ

STT

Tên

Kiểu

Chức năng
Hiển thị camera cùng với
model thử

1

Model

Card

2

Chụp hình

Button

Chụp hình

3

Hình ảnh

Button

Hiển thị hình ảnh đã chụp

Ghi chú


2.màn hình quản lý

STT

Tên

Kiểu

Chức năng
Load dữ liệu của model lên
form

1

Model

Card

2

Model Name

Textbox

Tên model

3

Textbox

Loại model

Textbox

Mô tả

5

Model category
Model
Description
Model Obj

File

File Obj

6

Model Mtl

File

File Mtl

7

Model Material

File

File Material

8

Model Image

File

Hình ảnh model

9

Save

Button

Lưu

10

Cancel

Button

Reset form

4

Ghi chú

Chương VII: Kết luận
I.
o
o
o
o

II.

Môi trường phát triển và môi trường triển khai
Phần mềm quản trị cơ sở dữ liệu: MongoDB
ReactJs
Tensorflow

Nền tảng: Windows

Kết quả đạt được

Sau thời gian tìm hiểu và tiến hành thực hiện đề tài. Nhóm chúng em đã
đạt được một số kết quả sau:
o
o
o

III.

Xây dựng, và hiểu biết được cơng nghệ virtual 3D.
Giao diện chương trình thân hiện, dễ dàng sử dụng.
Tìm hiểu và sử dụng thư viện ReactJs

Hướng phát triển

Với tính năng có thể vẽ các model 3D theo chuyển động của cơ thể, đã
có nhiều ứng dụng của nó áp dụng vào cuộc sống của chúng ta hiện nay như
filter, thử đồ, mark…. Nhóm chỉ phát triển đồ án ở mức độ hoàn thiện một số
chức năng chính của phần mềm. Nhóm sẽ cố gắng tìm hiểu thêm về công nghệ
để cải thiện và nâng cao khả năng đáp ứng nhu cầu của người dùng.