WordPress in Amazon Sumerian

Visualise WordPress posts using a JS http fetch request. ...

I’ve recently begun experimenting with visualising WordPress posts within Amazon Sumerian and managed to get my first blog post displayed within a 3D environment.

This is done by writing a script that retrieves a wordpress post through a http fetch request, then passes that post’s data through to a Html3d Entity – which is then visualised in the 3D environment.

Step 1

WordPress in Amazon Sumerian
Create a HTML3D Entity called ‘Html3d Entity’ that you’d like the WordPress content to be visualised in.

Step 2

WordPress in Amazon Sumerian
Assign a script called ‘getBlogPosts.js’ to ‘Html3d Entity’ (copy the below code into both files).

Step 3

WordPress in Amazon Sumerian
Play the scene to visualise the content from the wordpess blog within the HTML3D Entity.

I’ve posted this script below (with comments) so you can now begin visualising WordPress posts within Amazon Sumerian 3D Entities. Enjoy! 😀


// import that preview version of the Sumerian Scripting API as a variable called 's'
import * as s from 'module://sumerian-common/api';

// the default function that is called automatically
export default async function(ctx) {
	// get wordpress posts
	const posts = await getPosts();
	// select post to visualise
	const selectedPost = posts[2];
	// display the header image
	document.getElementById('headerImage').style.backgroundImage = "url("+selectedPost.jetpack_featured_media_url+")";
	// display the header text
	document.getElementById('h1Text').innerHTML = selectedPost.title.rendered;
	// display the excerpt text
	document.getElementById('pText').innerHTML = selectedPost.excerpt.rendered;

 // the function that contains the asynchronous fetch post to my wordpress blog
function getPosts() {	
  let response = fetch('')
  .then(response => {
	  return response.json();
  return response;

Html3d Entity

	#headerImage {
		width: 100%;
		height: 260px;
		background-size: 100%;
		background-repeat: no-repeat;
		display: block;
		position: static;
	#textContainer {
		padding-left: 3em;
		padding-right: 3em;
		width: 100%;
		position: static;

<div id="headerImage"> </div>

<div id="textContainer"> 
	<h1 id="h1Text"></h1>
	<p id="pText"><p>

Share this post