Uncategorized

BHSOFT xây dựng gian hàng sự kiện ảo 3D với Three.js

Đại dịch gần đây đã thúc đẩy sự phổ biến của các gian hàng sự kiện ảo 3D. Mọi người đều đang tìm kiếm một giải pháp để không cần gặp mặt trực tiếp, từ các sự kiện lớn đến nhỏ như hội nghị kinh doanh, triển lãm thương mại và các chuyến tham quan khuôn viên trường.

Bằng cách xây dựng các gian hàng sự kiện ảo 3D, nhà cung cấp và khách truy cập vẫn có thể tương tác với nhau một cách hiệu quả và tiết kiệm.

BHSOFT có giải pháp riêng cho triển lãm thương mại ảo dựa trên web. Chúng tôi có nhiều kinh nghiệm với mô hình 3D, hoạt hình, CMS và thu thập dữ liệu cho các dự án 3D. Bài viết này sẽ chỉ ra cách chúng tôi sử dụng Three.js và WebGL để tạo và hiển thị một gian hàng ảo 3D cho khách hàng của mình.

Trước hết, hãy thảo luận về vấn đề tại sao Three.js và WebGL là sự kết hợp hoàn hảo để xây dựng gian hàng ảo 3D.

Lợi ích của việc sử dụng Three.js & WebGL để hiển thị số lượng lớn hình ảnh trực quan

Three.js là một thư viện JavaScript 3D dễ sử dụng và nhẹ, giúp các nhà phát triển tạo và hiển thị đồ họa máy tính 3D. Sự kết xuất là một trong những nhiệm vụ chính của thư viện, Three.js cung cấp 4 trình kết xuất chính bao gồm <canvas>, <svg>, CSSD và WebGL. WebGL nổi bật hơn trong số đó nhờ nhiều tính năng hữu ích và hiệu suất cao.

WebGL hoàn toàn vượt trội so với Canvas và SVG về khả năng hiển thị các đa giác đơn giản. Đây là kỹ thuật hoàn hảo nhất để hiển thị các chế độ xem cấp cao của các hình ảnh trực quan mạng cực lớn. Tùy thuộc vào card đồ họa, WebGL có thể hiển thị từ mười đến một trăm nghìn phần tử trên màn hình cùng một lúc với tốc độ khung hình hoàn hảo.

WebGL không chỉ hoạt động tốt trên các trình duyệt khác nhau (Chrome, Firefox, Edge, Safari và các dẫn xuất), nó còn có thể hiển thị một số lượng lớn các mục trên thiết bị di động nhờ GPU tích hợp.

Cách BHSOFT sử dụng Three.js & WebGL trong dự án Gian hàng sự kiện ảo

Những gì khách hàng mong muốn

Khách hàng cần xây dựng một ứng dụng web sự kiện ảo nơi người dùng có thể tìm và tương tác với các nhà cung cấp phù hợp cho việc lập kế hoạch sự kiện của họ. Người dùng có thể tự tay chọn nhà cung cấp, xem các mẫu sự kiện với các chủ đề cụ thể và đặt trước nhà cung cấp yêu thích của họ ngay trên nền tảng. Điều này giúp tiết kiệm thời gian cho cả nhà cung cấp và khách hàng của họ bằng cách tự động hóa tất cả các quy trình đồng thời mang đến cho khách hàng trải nghiệm thực sự trên nền tảng ảo.

Chúng tôi đã làm điều đó như thế nào

Nhóm phát triển của chúng tôi đã làm việc cùng nhau để tạo ra và xác định các đối tượng 3D chính xác như mong muốn của khách hàng. Chúng tôi đã sử dụng 3ds Max để tạo, thiết kế và sửa đổi các đối tượng 3D như gian hàng, con người, sàn nhà và đồ nội thất.

Yêu cầu lớn nhất đối với dự án này là làm cho gian hàng ảo hoạt động tốt trên tất cả các trình duyệt web. Với kinh nghiệm tích lũy được từ các dự án 3D, BHSOFT biết Three.js chính là công cụ tốt nhất. Những điều chúng tôi làm được với Three.js:

  1. Tạo ra các bối cảnh
  2. Tải tất cả các mô hình glTF
  3. Thêm góc sáng vào khung cảnh
  4. Khai báo vị trí camera và định hướng 
  5. Cuối cùng, thêm một vài tương tác vì gian hàng cần tương tác

Với sự trợ giúp của phần mềm thiết kế 3D và trình chỉnh sửa three.js, chúng tôi đã cấu trúc lại và gán các thuộc tính cho tất cả các đối tượng. Chúng tôi có thể dễ dàng nhập các mô hình 3D và dịch chúng thành các tệp glTF để kết xuất sau này.

Three.js đã giúp chúng tôi tương tác với các thuộc tính một cách hiệu quả. Thư viện cho phép các nhà phát triển dễ dàng ánh xạ màu sắc và chất liệu với một đối tượng cụ thể. Nhóm có thể nhanh chóng sửa đổi đồ nội thất và màu sắc gian hàng, chọn điểm nổi bật, di chuột qua / chọn sự kiện.

Khi các đối tượng nhất định giao nhau với một tia kết nối máy ảnh và vị trí chuột, chúng tôi đã thêm các hành động. Ví dụ: thay đổi hình thức / chất liệu của một đối tượng hoặc mở một liên kết trong một tab mới.

Three.js thực sự đã giúp chúng tôi rất nhiều vì chúng tôi cần hiển thị một số lượng lớn các phần tử trên màn hình cùng một lúc. Nhóm BHSOFT đã đặc biệt chọn Three.js cho dự án Sự kiện ảo này vì:

  • Three.js là một thư viện kết xuất 3D ổn định
  • Thư viện có hỗ trợ loại tệp glb và gltf (hiện là tiêu chuẩn mở)
  • Three.js dễ dàng hơn trong việc kiểm soát và truy cập vào mô hình / đối tượng 3D 
  • Dễ dàng tùy chỉnh mô hình 3D cụ thể
  • Cung cấp đủ tương tác cho điều khiển mô hình 3D
  • Hỗ trợ tích hợp mô hình tốt hơn

Kết luận

Chúng ta đang sống trong một thế giới ngày càng kết nối và nhu cầu ảo chắc chắn sẽ tiếp tục mở rộng. BHSOFT cung cấp trọn gói thiết kế và xây dựng dự án 3D cho khách hàng. Chúng tôi có thể bắt đầu với các mô hình CAD có sẵn từ khách hàng hoặc có thể làm điều đó từ đầu. Liên hệ với chúng tôi qua [email protected] hoặc các kênh liên lạc khác để biết thêm chi tiết.

Author

Nguyen Bao Ngoc