This page will describe the main concepts that compose the WebGL configurator and it's surrounding libraries.
WebGL configurator consists of IFRAME that contains main configurator display and interaction logic. This Iframe can be integrated into any customer's content management system or web application. Customer adds Iframe that is pointed to specific URL, hosted on Tronog's servers, and is different for every partner and project, into his web page of choice. The customer's web page can then communicate with configurator iframe via the HTML5 Web Meessaging technique. Web page must also include the supporting library that is provided by Tronog (api.js), that establishes such communication and eases the integration with existing content management system.
<html>
<body onload="init();">
...
<iframe src="https://devtest.tronog-engine.com/gersch/shirtfactory-basketball/widget/index.html">
...
...
<script src="https://devtest.tronog-engine.com/gersch/shirtfactory-basketball/widget/js/api.js"></script>
<script>
function init() {
...
API.init());
...
}
</script>
...
</body>
</html>
Developer has to integrate IFRAME with correct URL (differs from project to project, subject to discussion between developers and configurator providers) and the supporting JavaScript library (api.js). It is also important that system is initialized after page finishes loading by calling API.init() during the initialization procedure (an example provided in HTML snippet above).
After the system is initialized, developer can trigger changes to the iframe's content by sending message throught API. For example if we want to change the texture on the model to for example texture2 we can call API.textureSelect('texture2').
This can be integrated in HTML page:
...
<button onclick="onTexture2Click()">Change to texture2</button>
...
...
<script>
function onTexture2Click() {
API.textureSelect('texture2');
API.applyMaterials();
}
</script>
...