Browser-Based Manipulation of Virtual Objects Through MVVM Architecture with Data Binding

Abstract

This paper considers the problem of sharing complex virtual objects among remote users through Web browsers. Although drag-and-drop of object is one of new features available in HTML5, it is not sufficient to realize the transformation of virtual objects consisting of several rigid bodies connected with joints, and for such a purpose, it is necessary to keep track of the location of the fulcrum of the rigid body object currently being grasped, and to set various attributes such as fulcrum and action points for each object, not just the 2D coordinates of the object on the screen. To realize such functionality, we focus on the data binding capability of interactive Web application framework based on the MVVM (Model-View-ViewModel) architecture and implement a prototype system using Vue.js as the concrete framework, Three.js as the library to handle 3D space in the Web browser, and Google Firestore as the database for data sharing among remote users. The result of experiments conducted on the prototype system indicates that we could realize the transformation information sharing within 300 ms on average.