The XML3D Module provides a simple and easy way to integrate the XML3D models and applications into Drupal. The current 7.x-1.x version allows to simply enter the XML3D code into a Long Text field that has the XML3D Input Field formatter. The content will then be displayed on the page in the form of an iframe having the same size as the XML3D application.
The project has been added to Drupal.org. Here is its sandbox link: http://drupal.org/sandbox/vkosenko/1959792.
We added this module to the blog and added a field with a XML3D example, see it at the end of this Article in action.
RequirementsThe module has the following requirements:
- Drupal 7
- the field, field_ui, libraries modules
- a browser with Web GL support (currently, Firefox and Chrome)
- if you have a Intel GPU Chip and are using Chromium/Chrome on a Linux based OS, try to enable "Override software rendering list Mac, Windows, Linux, Chrome OS" under chrome://flags
- the js library files (xml3d.js and camera.js) must be located in the corresponding folder in the libraries directory (the current version of the module uses XML3D version 4.3):
Adding the Field Type
After having installed and enabled the XML3D module, you must create a field of the Long Text type by going to Structure -> Content types -> Manage Fields:
Then you must assign the XML3D Input Field formatter to the field by going to Structure -> Content types -> Display Fields and select it from the Format drop-down list:
In order to add/modify your XML3D content you just need to go to your content type that contains a field with the XML3D formatter and paste the content into the field (you can grab the code from one of the examples available: http://xml3d.github.com/xml3d-examples/):
The content is supposed to have one tag containing the rest of the content.
After performing all the step correctly, you should be able to see your XML3D content visualized:
As mentioned above, the XML3D element will be presented as an iframe that will have the size of the content inside (the width and height parameters of the element will be used for this). By default, the iframe has neither borders nor scrolling. That can easily be changed via the CSS file in the module ([modules folder]/xml3d/css/xml3d.css). The iframe has a class named "xml3d_frame" that you can use for styling it.
Global Integration into Drupal
While working on the module we met some obstacles. The major obstacle was the requirement to use the MIME-type application/xhtml+xml for the pages that have XML3D content. Moreover, the page must start with:
<?xml version="1.0" encoding="UTF-8"?>
The problem is that a standard page in Drupal is not of application/xhtml+xml type and it has the following header (doctype) element:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>
The header is hard coded in the html template file (modules/system/html.tpl.php) and is not/or hardly editable from within a module (it could be overridden by a theme, though). Thus, the first attempt to set the MIME type with php and change the header in the template file manually failed (it worked in Chrome only).
At the end, an iframe referring to a separate page (generating the content for a certain field) was decided to be used. The page must receive four arguments: entity type, entity id, field name and delta. For example: http://example.com/xml3d/iframe/node/18/field_testxml3d/0
The current version of the module is aimed to present a simple integration of the XML3D technology into Drupal. Thus, the content to be inserted is not supposed to be very long.
As an alternative option to the currently implemented variant could be uploading a file (or files) with the content to be inserted or selecting from a predefined list of content residing on the same or a third-party server. It would make the integration process of large pieces of code easier for the end user.