HomeLập trìnhJavaScriptCách sử dụng...

Cách sử dụng Thực tế tăng cường với JavaScript — một nghiên cứu điển hình


của Apurav Chauhan

Trong thử nghiệm này, tôi nói về cách sử dụng Thực tế tăng cường với JS để làm cho việc học trở nên thú vị và tương tác hơn. Nghiên cứu điển hình sẽ thảo luận về quá trình thiết kế, thực hiện và phản hồi từ trẻ em trong độ tuổi từ 2 đến 10 tuổi.

1*evN61t_cenPxPZgDZOB2Mw
Học bảng chữ cái giáo dục và tương tác bằng thực tế Augmented và Javascript

Thực tế tăng cường (AR) luôn thu hút tôi và trong thử nghiệm này, tôi cố gắng tạo ra một ứng dụng AR thực tế. Trường hợp sử dụng mà chúng tôi sẽ đề cập là giáo dục tiểu học và chúng tôi sẽ xem cách chúng tôi có thể làm cho việc học trở nên thú vị và có tính tương tác. Chúng tôi sẽ tạo một ứng dụng để học bảng chữ cái bằng ba ngôn ngữ chủ yếu: Tiếng Ba Tư, Tiếng Hindi và Tiếng Anh.

Ứng dụng Thực tế tăng cường Javascript hiện không có tính năng phát hiện máy bay. Để đơn giản, chúng tôi chỉ đặt chồng các đối tượng của mình lên khung nhìn bằng tính năng theo dõi chuyển động 3d.

MỤC TIÊU KẾT THÚC

Dưới đây là bản demo thử nghiệm Javascript AR của chúng tôi. Bạn có thể tải xuống và chơi với ứng dụng tại đây.

Mã đầy đủ đã được mã nguồn mở cho mục đích học tập và có sẵn tại đây.

1*nfxElKKhaa0zlcdODDdtPg
1*O6FCChAd2dNaJwK32GL-A
1*UKBmHOO3uW7NIKuoHYDNXA
Bảng chữ cái trong thực tế tăng cường và javascript để làm cho giáo dục trở nên thú vị và hấp dẫn hơn

Quy trình thiết kế

Để làm cho việc học trở nên thú vị và dễ dàng, tôi dựa vào những điểm sau:

  1. Sự tham gia tích cực của trẻ
  2. Cho trẻ hoạt động thể chất thay vì ngồi một chỗ
  3. Một chút nỗ lực trong việc tìm kiếm các bảng chữ cái.
  4. UX/UI trực quan.
Đọc thêm  Đối tượng trong JavaScript – Hướng dẫn cho người mới bắt đầu

Chủ đề cốt lõi của ứng dụng sẽ khá giống với ứng dụng thực tế tăng cường Pokemon Go nổi tiếng. Chỉ có hai thành phần chính sẽ được tham gia: Chế độ xem máy ảnhbảng chữ cái.

Bảng chữ cái UX cho trò chơi AR

lặp lại 1

1*_711pNZKifCSaa9bXWbc5g
1*YdiDXaHGXYKPMD1gdGbZaw
1*EmkTDWxyVZYcqA9vn2Ixtg
Bảng chữ cái 2d bằng tiếng Anh, tiếng Hindi và tiếng Ba Tư cho Trò chơi thực tế tăng cường JS của chúng tôi

Trong lần lặp đầu tiên của chúng tôi, chúng tôi có bảng chữ cái 2d mà chúng tôi sẽ cố gắng hợp nhất trong chế độ xem máy ảnh của mình. Ý tưởng của ứng dụng Thực tế tăng cường (AR) là để trẻ em tìm các chữ cái trong bảng chữ cái này trong phòng hoặc không gian xung quanh chúng. Nguyên mẫu sau khi hợp nhất không gian với bảng chữ cái 2d sẽ trông giống như thế này:

1*gu70VjYLyFLzzmMvhafZyA
Cảm biến chuyển động AR với đối tượng 2d

Như bạn có thể thấy ở trên, trải nghiệm nhập vai bị thiếu với mô hình 2d vì mắt người nhìn thấy mọi thứ ở dạng 3d.

lặp lại 2

Hãy thử tạo một mô hình 3d và xem liệu chúng ta có thể cải thiện trải nghiệm của trò chơi Thực tế tăng cường dựa trên Javascript của mình hay không:

1*lHUszUcxZfFJj0f81Ebixg
1*cyXqdHs11SmHwICi-P461g
1*GK2PuNQlEEJU8FY9edCR8A
Bảng chữ cái 3D bằng tiếng Anh, tiếng Hindi và tiếng Ba Tư cho dự án AR của chúng tôi

Và dưới đây là so sánh trải nghiệm của cảm biến chuyển động với mô hình bảng chữ cái 2d và 3d. Như bạn có thể thấy, 3D tự nhiên mang đến cho bạn trải nghiệm sống động hơn nhiều khi nói đến thực tế Tăng cường.

1*gu70VjYLyFLzzmMvhafZyA
1*IPTMBO-kP6EcqhL0tDD_8A
Trải nghiệm chuyển động 2d vs 3d AR

Quá trình triển khai AR

Để triển khai khái niệm AR ở trên, tôi sẽ sử dụng các công cụ và công nghệ sau:

  1. Ionic Framework: Để xây dựng ứng dụng lai
  2. Aframe: Để mang lại trải nghiệm Thực tế ảo (VR) và Thực tế tăng cường (AR) cho ứng dụng của chúng tôi
  3. MagicaVoxel: Để tạo mô hình 3D của chúng tôi
Đọc thêm  JavaScript là gì? Định nghĩa về ngôn ngữ lập trình JS

Quá trình xây dựng ứng dụng cơ bản rất đơn giản. Bạn có thể theo dõi bài viết trước của tôi để tìm hiểu cách xây dựng và triển khai một ứng dụng bằng khung Ionic tại đây.

Khi bạn đã làm theo hướng dẫn ở trên để tạo một ứng dụng đơn giản, đã đến lúc tích hợp Aframe để đưa bảng chữ cái 3D có cảm biến chuyển động vào ứng dụng của chúng ta.

Chỉ cần tải các thư viện lõi Aframe và trình tải Aframe bên dưới trong tệp index.html của dự án ionic:

<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>

Với điều này, chúng tôi đã sẵn sàng thực hiện một số phép thuật AR/VR trong cơ sở mã Javascript của mình.

Bây giờ trong home.html của thành phần nhà của bạn, hãy bao gồm các mô hình 3D của chúng tôi được xuất từ ​​​​magicavoxel:

Và điều này sẽ giúp cảnh 3D sẵn sàng tương tác với tất cả các cảm biến chuyển động:

1*fref3HwlAuN0AJ9VHRaWhQ
Cảnh thực tế ảo 3D cuối cùng đã sẵn sàng với bảng chữ cái 3D

Thêm hiệu ứng thực tế tăng cường

Phần cuối cùng của thử nghiệm này là thêm cảm giác Thực tế tăng cường (AR) vào ứng dụng lai dựa trên Javascript của chúng tôi. Như đã giải thích, Thực tế tăng cường là khi bạn đặt chồng các mô hình 3D hoặc các đối tượng khác lên trên chế độ xem máy ảnh của mình. Vì vậy, điều duy nhất còn thiếu là chế độ xem camera phía sau cảnh của chúng tôi.

Để làm điều này, chúng tôi sử dụng plugin xem trước máy ảnh như được giải thích tại đây. Và đây là ý chính đầy đủ sau khi tích hợp với plugin xem trước máy ảnh:

Chúng tôi cũng cần đảm bảo rằng nền của chúng tôi trong suốt để có thể nhìn thấy bản xem trước của máy ảnh trên thiết bị di động. Cái này rất QUAN TRỌNG nếu không, bạn có thể cảm thấy rằng plugin không hoạt động. Đây là tệp home.scss có bật css trong suốt:

Đọc thêm  Cách hoạt động của đối tượng proxy của JavaScript – Được giải thích bằng các trường hợp sử dụng ví dụ

Và đây là những gì nó cuối cùng sẽ trông như thế nào:

Phản ứng của người dùng đối với trò chơi JS thực tế tăng cường của chúng tôi

Bước cuối cùng để đo lường mức độ thành công của khái niệm của bạn là xác thực người dùng thực — trong trường hợp của chúng tôi là trẻ em 🙂 Và bên dưới là phản hồi trực tiếp của họ được ghi lại.

Rõ ràng là mỗi người trong số họ đều thích trò chơi và chúng tôi được trọn điểm cho phần thú vị. Tuy nhiên, ban đầu tôi phải bảo họ di chuyển điện thoại trong không gian để tìm các chữ cái. Mất điểm về trực giác 🙁

1*Fe97s79RI5BFONl9X5T27w
Điểm ghi được trên 10

Phản hồi của người dùng cho trò chơi Augmented Reality JS

Suy nghĩ cuối cùng

Chà, đó là một dự án thú vị và tôi có thể thấy rất nhiều tiềm năng của Thực tế tăng cường trong học tập và giáo dục. Trẻ em thực sự thích nó và nó chắc chắn sẽ bổ sung yếu tố thú vị còn thiếu cho giáo dục, đặc biệt là trong hệ thống Giáo dục đơn điệu của chúng ta.

Hãy bình luận và chia sẻ thông tin phản hồi của bạn.

Tải xuống

Mã cho ứng dụng này có sẵn trong github. Hãy chơi và đẩy các tính năng mới trong đó. Tôi rất sẵn lòng đẩy các bản cập nhật lên quá trình sản xuất.

Bạn có thể tải ứng dụng cho android tại đây.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status