Simple Material Configurator Sample

The goal of this walkthrough is to get from a Lagoa scene to a first configurator, customizable via the API. The Project for this example scene (Sample) can be found here, and the sample code located here.

1. First we set up a scene where the editable elements are identifiable via a sentinel value. In the image below you can see that the editable materials have been prefixed with “edit_”.
api-step-1
2. When the scene is ready for publishing, save the scene. Fixed versions created by a Save are available for publishing.
api-step-2
3. Once the scene has been saved, go to the Share options to get an embed link.
api-step-3
4. When preparing an embed for API usage, some typical options to enable are:

  • Auto Load Scene
  • Enable Rendering
  • Load Most recent version
api-step-4
5. Once the share has been configured as you like, copy the embed link. The embed link will later be used in your html document.
api-step-5
6. Create a new HTML document, and paste in the embed code you have just copied. What you see below is a minimal page for loading a Lagoa embed.
api-step-6
7. Save the document as index.html. To preview the results, you can typically drag and drop index.html into your web browser. The page which loads should look like the image below.
Screen Shot 2014-04-21 at 4.55.25 PM
8. Congratulations, you have just embeded Lagoa content in your web page. Lets start configuring the content, first add our own render button.
api-step-8
9. Here is an example on how you can change the size of the window.
api-step-9
10. Finally we’re ready to add colour selectors which we’ll use to modify the materials in the scene. First get the Scene object, then fetch an array of the materials in the scene.
api-step-10
11. Next loop over the materials we have found. In this case we are looking for materials who’s name starts with the sentinel value we have setup in our scene, see example on the right.
api-step-11
12. Get the current colour value in the scene and use it to initialize our colour picker
api-step-12
13. Next, create the function which will be called back when the colour picker value changes. On the callback use the API to change the scene material colour.
api-step-13
14. Done, now the reflectance of the materials should update in real time with our colour picker!
api-done