Events Framework

The plattar-web SDK is bundled with an instance of the context-messenger framework that allows interfacing with the Plattar Renderer. This unlocks a vast array of use-cases and functionalities that would otherwise be impossible with static embeds.

In this example, we walk through the setup of a simple PEX Script that changes the colors of a dynamic Cube from within the main page.

Setup Example Project

In the Plattar CMS, create a new PEX Script called RotatingCube using the following Script.

The RotatingCube Script sets up a dynamic cube that rotates very slowly. It also defined a custom JavaScript function changeColor and exposes the function through the context-messenger framework. This will allow the main page to interface with this function.

RotatingCube PEX Script Source
// this will be called externally to change the color of the cube
Context.messenger.self.changeColor = (newcolor) => {
  this._materialInstance.color = new THREE.Color(newcolor);
};

this.create = () => {
  return new Promise((accept, reject) => {
	// create a dynamic white cube
	const geometry = new THREE.BoxGeometry( 1, 1, 1 );
	const material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
	const cube = new THREE.Mesh( geometry, material );
	
	// add the cube as a component to this script
	this.addComponent(cube);
	
	// make a note of the material as a reference
	this._materialInstance = material;
	
	accept();
  });
}

this.tick = (deltaTime) => {
  // slowly rotate the cube on all axis
  this.transform.rotation.x += deltaTime * 0.2;
  this.transform.rotation.y += deltaTime * 0.2;
  this.transform.rotation.z += deltaTime * 0.2;
}
The final PEX Script should look like the following
The final PEX Script should look like the following

Using the Plattar CMS, add the Script to a new empty Scene and save. You should see a white rotating cube in the editor. Note down the scene-id as we are going to use that to embed the Scene using the plattar-web SDK.

Create a new HTML file with the following source. Ensure to host the HTML in a https server.

For simplicity, we have created a Scene with the above Script with scene-id of a5da2850-ffdc-11eb-b022-73fc09dbd874

Sample HTML that embeds the newly created Scene
<html>

<head>
    <title>Rotating Cube Scene</title>
    <script src="https://cdn.jsdelivr.net/npm/@plattar/plattar-web/build/es2019/plattar-web.js"></script>
</head>

<body>
    <p>Choose your Cube Color:</p>
    <div>
        <input type="color" id="head" name="head" value="#ffffff">
        <label for="head">Cube Color</label>
    </div>
    <plattar-viewer id="embed" scene-id="a5da2850-ffdc-11eb-b022-73fc09dbd874" server="staging" />

    <script>
        // watch the color change and call our custom script
        document.getElementById("head").addEventListener("input", (event) => {
            const embed = document.getElementById("embed");

            if (embed) {
                // changeColor was defined in our PEX Script!
                embed.messenger.changeColor(event.target.value);
            }
        }, false);
    </script>
</body>

</html>

Running the HTML should yield the following results. A simple application that changes the color of a dynamic cube using the context-messenger framework.

For an indepth PEX Scripting tutorial see the PEX Scripting Guides section.

The RotatingCube application
The RotatingCube application