In this post I want to share the details about the latest project being done on Krestianstvo SDK.
So, I have developed a model and view drivers for VWF, that provides basic support for using A-Frame components in Virtual World Framework apps. That allows to build a VWF collaborative apps with 3D visualisation, WebVR, HMD, trackers and mobile devices support easily.
Code for using in original VWF
Here is a small video demonstration, that shows the interaction within collaborative Virtual World Framework app, which is composed by the A-Frame components.
In the video three Google Chrome web-browsers are directing to the same VWF app instance's URL. Every browser shows the replicated A-Frame scene with components in it. The users are represented with small cubes and are visible to each other. The cube on the right is holding the simulation, which is staying the same on all browsers.
Try online demo here: https://livecoding.space
Simple scenario for collaboration:
- Open in Web-browser the given URL (http://demo.krestianstvo.org)
- Copy the generated URL and open it in another browser window
or direct Web-browser to http://demo.krestianstvo.org/app,
where you could find all running VWF app instances to join to.
- Open the generated URL at your phone or tablet.
- Move in space with arrows or WASD and point objects with a cursor in the centre of the screen (this will generate Click event).
- You could create any number of isolated VWF app instances, but for connecting to them you will need to know the generated URL.
So, how a simple VWF app with A-Frame is look like?
Here is a simple code of index.vwf.yaml:
extends: http://vwf.example.com/aframe/ascene.vwf properties: children: spaceText: extends: http://vwf.example.com/aframe/atext.vwf properties: value: "Virtual World Framework & A-Frame" textColor: "#b74217" position: [-2, 2.5, -2] sphere: extends: http://vwf.example.com/aframe/asphere.vwf properties: position: [1, 1.25, -4] color: "#e0e014" radius: 1 wireframe: true children: box2: extends: http://vwf.example.com/aframe/abox.vwf properties: position: [2, -1.25, 0] color: "#2167a5" depth: 1 sky: extends: http://vwf.example.com/aframe/asky.vwf properties: color: "#ECECEC" camentity: extends: http://vwf.example.com/aframe/aentity.vwf properties: position: [0, 0, 0] children: camera: extends: http://vwf.example.com/aframe/acamera.vwf properties: look-controls-enabled: true forAvatar: true children: cursor: extends: http://vwf.example.com/aframe/acursor.vwf