Skip to main content
Language

Adding Templates

You can use the asset source system to offer a series of templates, that act as a quick start for your users.

Explore a full code sample on Stackblitz or view the code on Github.

Demo templates#

By default, the CE.SDK ships with a predefined set of default templates, that can be added to your installation using the addDemoAssetSources() method:



Custom template asset source#

Templates consist of predefined scenes created using CE.SDK. To create your own template, just design your desired file using CE.SDK and save the scene to disk using the 'Download' button. The scene file can then act as a template for your users.

To make the templates you created available to users, you need to create an asset source. This example shows the minimal amount of code you need to write to have your templates appear in the Asset Library. For a more complete description of the different ways you can configure the asset library, take a look at the Asset API documentation and the customize asset library guide.

Add local asset source#

Add a local asset source, using an arbitrary id that identifies the asset source. In this case the asset source id is my-templates.

applyAsset()#

Assets that the user has chosen from the asset library are passed to the applyAsset function.

This function determines what to do with the selected asset. In our case we want to apply it to the scene using the Scene API. Note that you can access the entire asset object here. This means you can use it to store and process arbitrary information in the meta property. In this example, we are passing a URI to a template file, but you could also pass an internal identifier, a serialized scene string, or additional data to further modify or process the template using the available API methods.

Source Id#

Every asset source needs a source id. Which one you chose does not really matter, as long as it is unique.

Add template assets to the source#

Every template asset should have four different properties:

  • id: string needs to be a uniqe identifier. It is mainly used internally and can be chosen arbitrarily.
  • label: string describes the template and is being rendered inside the template library via tooltip and as ARIA label.
  • meta.thumbUri: string pointing to a thumbnail source. Thumbnails are used in the template library shown in the inspector and should ideally have a width of 400px for landscape images. Keep in mind, that a large number of large thumbnails may slow down the library.
  • meta.uri: string provides the scene to load, when selecting the template. This can either be a raw scene string starting with UBQ1, an absolute or relative URL pointing at a scene file, or an async function that returns a scene string upon resolve.

UI Config#

It is not enough to add the asset source to the Creative Engine. You also need to configure how the asset source will appear in the asset library. For more information, see the asset library guide. In this example we provide the minimal configuration to have the template library we just created appear.