Về cơ bản ta cũng sẽ có các phương pháp vẽ bản đồ, xác định vị trí và vẽ biểu đồ tương ứng. Trong đó ta sẽ vận dụng cơ sở lý thuyết được dùng trong hệ thống mới nhưng với việc cài đặt thực thi sử dụng các thành phần đồ họa mà Flash và Away3D cung cấp. Tất cả những cài đặt chương trình sẽ được biên dịch thành một file Flash SWF và sẽ được nhúng trong thẻ div HTML và gửi cho Client. Nhìn chung các hàm cũng như các đối tượng của Away3D cũng tương đối giống so với các hàm trong ThreeJS. Điều này sẽ giúp ta dễ hiểu và đơn giản hóa hơn trong việc chuyển đổi.
Vẽ và hiển thị bản đồ
Hiện tại có hai hướng đi trong việc vẽ bản đồ là vẽ bản đồ tĩnh lấy ảnh bản đồ tĩnh trực tiếp từ OpenStreetMap như hệ thống sử dụng WebGL) đã làm và lấy dữ liệu bản đồ theo hình thức phân tầng dữ liệu (Openlayers). Dưới đây tôi sẽ trình bày việc vẽ bản đồ lấy dữ liệu trực tiếp từ OpenStreetMap, còn về việc lấy dữ liệu thông qua phân lớp dữ liệu tôi sẽ trình bày trong một phần riêng trong chương này.
Với việc vẽ bản đồ ảnh tĩnh, ta áp dụng phương pháp giống với hệ thống ban đầu trong việc lấy các ảnh bản đồ nhỏ và ghép chúng lại với nhau thành bản đồ lớn. Để vẽ bản đồ ta sử dụng đối tượng mặt phẳng PlaneGeometry mà Away3D cung cấp cũng với các tham số cơ bản về kích thước:
Away3D cũng hỗ trợ ta trong việc phủ vật chất (material) là các ảnh bản bản đồ lên bề mặt mặt phẳng bằng cách sử dụng thành phần TextureMaterial.
TextureMaterial(BitmapTexture(bitmapData)::BitmapTexture) Trong đó bitmapData chính là dữ liệu ảnh bitmap mà ta lấy từ ảnh bản đồ.
Tuy nhiên, phương thức tải ảnh bản đồ theo URL mà Flash sử dụng có đôi chút khác biệt.
Hình 3.12 Luồng hoạt động trong việc tải ảnh bản đồ trong Flash
Thay vì thực hiện vòng lặp và thực hiện tải ảnh một cách đơn giản, lần lượt đồng bộ theo hàng đợi như trong WebGL thì Flash lại thực hiện việc tải ảnh không đồng bộ. Điều này có nghĩa là các ảnh sẽ không được tải lần lượt theo thứ tự ảnh này tải xong rồi mới đến ảnh tiếp theo. Cụ thể, khi ta thực hiện vòng lặp tải ảnh và vẽ bản đồ thì hàm load()
của Loader sẽ không đợi ảnh của vòng lặp hiện thời tải xong mà sẽ nhảy ngay đến thực hiện vòng lặp tiếp theo. Điều này dẫn tới việc ảnh sẽ không được tải hết và sẽ gây lỗi trong khi vẽ bản đồ. Theo đó để xử lý việc không đồng bộ ta sẽ sử dụng hàm sự kiện COMPLETE. Cụ thể chi tiết hoạt động của luồng tải ảnh như sau:
Khi một ảnh được tải thì khi ảnh đó được tải xong thì sẽ sự kiện COMPLETE sẽ xảy ra và gọi đến hàm loaded(). Hàm loaded() sẽ đẩy ảnh vừa tải vào một mảng đã được khởi tại từ trước đồng thời kiểm tra xem đã tải hết tất cả các ảnh bản đồ chưa; nếu đã tải hết thì sẽ thực hiện việc vẽ bản đồ còn nếu không sẽ lặp lại việc tải ảnh đến khi hoàn tất.
Việc sắp xếp các ảnh bản đồ thành một bản đồ lớn cũng cần chú ý vì hệ tọa độ 3 chiều của Away3D có khác biệt một chút so với hệ tọa độ 3 chiều thông thường khi trục X trong Away3D ngược chiều so với trục X trong ThreeJS (WebGL).
Để vẽ biểu đồ ta sử dụng đối tượng CubeGeometry mà Away3D cung cấp các tham số cơ bản về chiều rộng, chiều cao và chiều dài.
CubeGeometry(width:Number,height:Number,depth:Number)
Away3D cũng cung cấp việc tô màu các cột thông qua sử dụng ColorMaterial. ColorMaterial(colorsetHexa)
Việc xác định vị trí vẽ trên bản đồ ta hoàn toàn có thể sử dụng phương pháp đã đề cập ở phần phân tích hệ thống mới đồng thời cũng cần lưu ý về hệ toa độ của Away3D như khi vẽ bản đồ.
Các thành phần đồ họa và tương tác với đồ thị, bản đồ
Thành phần đồ họa: Away3D cũng cung cấp các thành phần cơ bản tương ứng như ThreeJS để tạo nên các đối tượng 3D như View3D, Camera3D, Scene3D, DirectionalLight. Trong đó
- View3D là thành phần cha chứa tất cả các thành phần đồ họa 3D khác như Camera3D và Scene3D. View3D sẽ có phương thức render() và được gọi để xuất ra các frame và hiển thị lên trình duyệt.
- Camera3D cung cấp khung nhìn chiếu phối cảnh lên các thực thể 3D. - Scene3D là nơi chứa các thực thể 3D được tạo ra.
- DirectionalLight cung cấp nguồn sáng chiếu từ một hướng cụ thể với các tia sáng song song làm tăng hiệu ứng hiển thị cho các thực thể 3D.
Thành phần tương tác: Cũng như trong ThreeJS cung cấp thư viện OrbitControl hỗ trợ các tương tác di chuyển, xoay hay phóng to thu nhỏ thì trong Away cung cấp đối tượng HoverController giúp điều khiển camera thực hiện các tương tác tương ứng. Tuy nhiên với các tương tác này ta phải định nghĩa các hàm tương ứng để có thể xử lý các sự kiện chuột cũng như bàn phím, không như OrbitControl đã gói gọn các tương tác đó.