WordPress and Static Scenes

A method for loading WebXR scenes in WordPress.

I know there are a ton of ways of getting WebXR scenes into WordPress sites. Here is my lazy-bones way of doing it using a static folder for the scene code and a shortcode to load an iframe containing the scene. I’m thinking of using this technique on the Extended Collection and perhaps to publish small scenes here as blog posts.

The advantage of this is that I can work on the scene code in a standalone project while leaving the WordPress install alone. When I’m ready to push an update for a scene I can just FTP the files to the server. Since the scenes are running at the same origin as the WordPress install, I gain access to assets and API features that may otherwise be locked out if it were hosted elsewhere.

Step 1

Setup a static folder on the web server at the root of the domain.

Step 2

Upload or FTP your scene files into a subfolder in the static folder.

This could be a static site that you’ve coded yourself or a bundle that you generated with a framework. For the breathing example I have

• breathe – a folder to hold the project
  • breathe.php – loads all assets and renders HTML
  • breathe.js – the Babylon JS scene code
  • the audio files used in the scene

At this point, you can test the scene by typing in the path to the project folder. For the breathing timer example, it would be [rootdomain.com]/static/breathe.

Step 3

Embed the scene in an iframe. If you only have one scene to add to your site you could just do this in a code block in the blocks editor. I did this using the Code Snippets plugin. I added a new snippet called “Scene iframe Shortcode”.

This creates a shortcode that takes in a string parameter that should match the name of the subfolder created in Step 2.

Make sure to set the iframe property: allowfullscreen allow="xr-spatial-tracking". I setup all my scenes to render in the full available viewport.

add_shortcode( 'sceneFrame', function ($atts) {

	$default_atts = array(
		"title" => 'error'
	);
	$params = shortcode_atts( $default_atts, $atts );
	$name = $params["title"];
	
	$out = '<div style="position:relative;padding-bottom:56.25%;">
 				<iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;"
 					frameborder="0" width="100%" height="100%" 
 					allowfullscreen allow="xr-spatial-tracking"
 					src="https://vrhermit.com/static/' . $name . '">
				</iframe>	
			</div>';

	return $out;
} );

Step 4

Use the shortcode on a page or post to embed the scene. Pass in the name of the subfolder that contains our scene.

[sceneFrame title="breathe"]

Preview and test the scene. Publish when ready.