WordPress in Amazon Sumerian

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

Step 2

Step 3

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

getBlogPosts.js

// 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('https://jamesmiller.blog/wp-json/wp/v2/posts')
  .then(response => {
	  return response.json();
  });
	
  return response;
}

Html3d Entity

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

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

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

James Miller

Creative Technologist