Making 3D WordPress Themes With WebVR

We all know WordPress is a hugely popular and easy to use publishing platform, but what if what you want to publish is not simple content?

I felt like experimenting with something different, and I’ve had a project in mind for a long time to create a kind of travel agency application for future space travel vacations.

My idea is basically, imagine you are planning a vacation to another planet or star system, naturally you’d want to do some research on possible locations first and maybe read some reviews, look at some images and maybe even have a virtual tour of your potential holiday destination.

You’d access your local Interstellar travel agency website and browse the locations and deals on offer. It’s fairly common in our current, less advanced, society for a travel agency website to be built with WordPress but I imagine in a future space-faring society, WordPress is still a popular CMS for building websites.

I don’t really want to delve into all the details of building a WordPress theme for a travel agency, but I do want to focus on one particular aspect of it. Can WordPress handle Virtual Reality? Or, more specifically, can you build a WordPress theme capable of rendering back end data into a Virtual Reality interface?

You’d want the theme to be fairly dynamic. Assuming you’d have multiple travel consultants updating content in the CMS for different destinations, it makes sense that data entered into either standard fields or custom fields in WordPress, contribute to the rendering of content on the front end.

To make a long story short, I’ve set up a fairly basic WordPress theme with the fantastic WebVR library AFrame. The theme could utilise different templates for different post types if necessary, and the VR code to create and render the scene would be in the template.

This approach might be limiting for more advanced VR applications, but for the sake of rendering a single planet on a single template, I think this should be fine for now.

While it’s not even close to being finished, I wanted the ability to add a new Planet destination as a post, and most importantly I wanted to use an image uploaded to the featured image field to render on the front end as the texture map for a Virtual Reality planet animation.

Planets Custom Post Type

For the sake of keeping things organised, let’s create a custom post type for ‘Planets’, I called it Planets for simplicity, we could call it something else as well in case you wanted to visit Moons, or a resort on a nearby Asteroid.

Creating a post type is simple in WordPress. I’ve integrated the CPT into my theme for the purposes of this demo but a better solution would probably be to use a plugin like Custom Post Type UI , so I’ll move on.

Texture Map

I’ve sourced some texture maps for the various Planets in our Solar System and uploaded them to the Planet post. For example, I created a Planet post called ‘Mars’, gave it a little description and the featured images.

Planets Custom Post Type with Texture Map Featured image

You’ll notice I’ve got two featured images. I wanted the ability to have a normal image, for use in an archive page or on the front page, as well as the texture map. There’s a great plugin called Multi Post Thumbnails that I’m using to accomplish this.

Using the first featured image as a thumbnail

AFrame makes it almost ridiculously easy to set up a VR scene, so to keep it simple for this demo, I’ve created a single page PHP template for the Planets CPT and after enqueuing the AFrame library, I created a basic scene using the featured image as a texture.

https://raw.githubusercontent.com/dgroddick/star-travel-vr/master/single-planet.php

I won’t go into detail about how this works, you can find it on the AFrame tutorials. The important parts are the WordPress functions to display the content, specifically the assets block at the top to load the texture map as an img tag which it gets using the MultiPostThumbnails method.

Towards the bottom, you should see <a-sphere>, this is what creates the Planet in the scene. The src attribute echos the ID of the texture, which in this case would be:

src="#MarsTexture"

Aside from that, the scene is set to a black background (it is in Space), and I do have an entity for the stars in the background which is generated in a different script.

All going well, we should be able to publish the post and view a 3D rendered scene on the front end that can be viewed in a VR headset.

Mars Virtual Reality scene

Which is really cool. If you want to see the work in progress you can see the demo site as a subdomain of my site and play around. While I haven’t gone so far as it make it a true VR experience yet, you can still navigate around with the mouse and keyboard, it looks Ok with my VR headset too.

You can also find the theme code at https://github.com/dgroddick/star-travel-vr

It was remarkably easy to make this work. Granted it’s only a fairly simple demo, but there’s the potential to make something really amazing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.