JanusVR Documentation

[BUILD] Misc: Site Translators

Site translators are JS scripts users can write that tell Janus how to interpret an existing 2D website as a 3D space.


Installing a Site Translator

The title of your site translator script tells Janus which domain you're translating into 3D. For instance, a translator script titled "example.com.js" translates the 2D website "www.example.com" into 3D. The translator will apply to all pages within that domain, e.g. "www.example.com/page1", so it is up to you to check the URL of the current page in the translator script and decide how to render the page accordingly. The URL of the current 2D page is accessible through the variable window.janus.url

Place the translator script in a folder titled "translators" inside your "assets" folder, and navigate to the domain you're translating in Janus to test it. The script can be reloaded with F5 if you're already inside that room.

Understanding the createroom Function

The translator's job is to define the createroom function. The syntax for that is:

EXAMPLE:

window.janus.createroom = function() { // Room creation code goes here }

This function will be called as soon as the DOM is loaded. Typically, you will want to iterate over some DOM elements, and map each of them to something in the 3D environment. You should open up the page you're translating in any 2D browser (e.g. Chrome, Firefox), and inspect the source to find the DOM elements you're interested in translating. The getElementsByClassName function will especially come in handy. You can find more functions for accessing DOM elements here. The following snippet provides an example of finding all posts on a Tumblr blog and extracting the title and the body:

EXAMPLE:

var tumblr_posts = document.getElementsByClassName("post_content");

for (var i = 0; i < tumblr_posts.length; i++) {
 var post_title = tumblr_posts[i].getElementsByClassName("post_title")[0];
 var post_body = tumblr_posts[i].getElementsByClassName("post_body")[0];
 // Create objects to correspond to post title and body...
}

Creating Assets and Objects

You can create the same kinds of assets and objects you can create in JML pages, only using a different syntax. The syntax for creating assets is as follows:

EXAMPLE:

window.janus.createasset("object", {id:"Cube", src:translator_path+"Cube.fbx"});

This loads a 3D model from an FBX file. The translator_path variable points to the location of all asset files. You can then add the 3D model to the room using the following syntax:

EXAMPLE:

window.janus.createobject("object", {id:"Cube", js_id:"Cube0", lighting:"true", collision_id:"Cube", pos:"0 0 0", scale:"20 0.1 20", fwd:"1 0 0"});

Adding User Interaction

You could use the onclick and oncollision attributes to add user interaction to objects. For example:

EXAMPLE:

window.janus.createobject("object", {id:"Cube", js_id:"Cube0", onclick:"cubeClick()"})

This sets the onclick function to cubeClick().

The next step is to actually define that function. To do that, you need to create an additional JS file, and add it as a script asset (using the below example.)

EXAMPLE:

window.janus.createasset("script", {src:"[path_to_script]"});

In that file, you can define the function as such:

EXAMPLE:

cubeClick = function() {}

You can also define other script asset functions in the same file as usual, such as room.update.