Drupal for VR

Building VR Content with Drupal for the Banter VR application

Banter is a Social VR platform, please see the Banter page for more information.

As the spaces built within Banter are entirely web-based, Drupal can provide a unique and powerful way to build such content using ThreeJS and A-Frame.

This is a project currently in progress, so this page includes some example screenshots :

Configuring "ActiveObjects" within Drupal

An "ActiveObject" is an abstract concept that represents an object that will be represented at runtime within a ThreeJS or Banter Scene. Within Drupal, the fields required to construct an ActiveObject represent the fields to store the data against entities within Drupal. By default, we have created an entity of type "Node" and a bundle of type "ActiveObject", and we have attached various "ActiveObject Components" (represented in Drupal as fields) to the entity bundle.

Drupal Fields as attached to an entity bundle

Create a scene with Mr Doobs ThreeJS editor

ThreeJS content can be created and laid out in 3D using Mr Doobs ThreeJS and then exported as a Scene JSON file.

Importing the scene into Drupal

The Scene can then be imported into Drupal using a Drush command.

Viewing the content within Drupal

Once the objects have been imported into Drupal, they can be edited using normal entity edit forms and viewed on a page. At the moment, a typical ThreeJS formatter has been implemented, and then that formatter has been extended to integrate with A-Frame (and thus the Banter application).

This is how the scene looks in a piece of Drupal content :

This is how the scene looks in Banter :

Using GLTF assets

ThreeJS and Banter support many file formats, that can be uploaded into Drupal, mapped to the ActiveObject field using the Token Module and displayed. This first image shows the creation of a piece of content representing a GLTF model, and the following image shows the "Khronos Duck" imported into Drupal as a file field and mapped using [node:field_activeobject_file:entity:url] as the Token mapping. Token Replace is applied during use of the JSON:API.