HƯỚNG DẤN THỰC HIỆN CHƯƠNG TRÌNH

MÔ PHỎNG TÀU BIỂN

*****
1. Mục tiêu
- Xây dựng hệ thống phần mềm mô phỏng 3d cho phép người dùng có thể xem và tham quan kiến
trúc của tàu biển.

2. Nội dung cần nghiên cứu

3. Cách thức triển khai.
- Kết hợp giữa lập trình và khảo sát thu thập dữ liệu thực tế
- Tìm hiểu và xây dựng cấu trúc hệ thống theo một nền tảng nhất định (Web, app). Ở đây sử dụng
nền tảng web để dễ thích ứng với các thiết bị và màn hình trình chiếu.

4. Các nội dung cần nghiên cứu

- Các thức tạo một trang web. Có thể tạo web bằng nhiều nền tảng (Dot Net, React, Wordpress…).
Ở đây chọn web bằng ngôn ngữ javascript/jquery kết hợp php để thực hiện một trang web.
- Để tạo được một hệ thống mô phỏng 3d cần phải làm việc với ảnh 360 độ hoặc ảnh toàn cảnh, gọi
là panoramic picture/ 360 picture. Từ đây có ba định nghĩa cần tìm hiểu panoramic picture và
360 pictuer (1) là gì, những thiết bị nào có thể chụp được một panoramic picture và 360 picture
(2) và xử lý những ảnh đó như thế nào để có được mô phỏng (3).

5. Thực hiện nội dung

6. Nghiên cứu về cách làm ra một sản phẩm website
- Cần cài đặt xampp (https://vietnix.vn/xampp-la-gi/?gclid=CjwKCAjwh-
CVBhB8EiwAjFEPGV9Aw7NYcjtfhoWtipU_OHhlgeuoZjvF7cnr0uxAa2eU-
pnmHb50whoChUcQAvD_BwE) và subslime-text (https://howkteam.vn/course/huong-dan-cai-
dat/huong-dan-cai-dat-sublime-text-3-1534 )
- Trong đó xampp để host một web trên thiết bị máy tính, còn subslime text là trình soạn thảo code
6.1. Tìm hiểu về ngôn ngữ:
- Css: https://freetuts.net/hoc-html-css/hoc-css-can-ban-nang-cao
- Html: https://www.codehub.com.vn/Hoc-HTML/HTML-Co-Ban
- Javascipt: https://fullstack.edu.vn/courses/javascript-co-ban
- Php: https://freetuts.net/hoc-php/hoc-lap-trinh-php-can-ban
6.2. Tìm hiểu về kiến trúc và các thư viện tạo nên một trang web
- Tạo web cơ bản: https://daotaodigitalmarketing.vn/tao-giao-dien-don-gian-bang-bang-html-va-
css/
- Kiến trúc MVC trong web php: https://topdev.vn/blog/mo-hinh-mvc-trong-php/
- Sử dụng boostrap 4 để tạo giao diện website:
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

7. Nghiên cứu về panoramic picture / 360 picture

7.1. Panoramic picture / 360 picture
- https://quantrimang.com/su-khac-biet-giua-anh-panorama-va-anh-chup-360-do-128992
7.2. Các thiết bị có thể chụp được
- https://thuvienhoidap.net/may-chup-hinh-360-do-toan-canh-tot-nhat.html
8. Thư viện hỗ trợ thiết kế mô phỏng 3d từ ảnh panoramic/360
- Thư viện: panolens.js https://pchen66.github.io/Panolens/#Home (Trong thư mục đã có mã
nguồn đính kèm)
- Làm việc với panolens.js https://youtu.be/NuOmD7cnygk (code mẫu, thực hiện code theo)