@threekit-tools/treble-recipes v0.0.1

Threekit Recipes

Threekit Recipes are custom scripts for use on the Threekit Platform's Assets and Catalog Items

Table of Contents

• Threekit Recipes
  • Table of Contents
  • Getting Started
  • Animations Recipes
    • Turntable
    • Wobble

Getting Started

To add Threekit Recipes to a Configurator, you simply need to create a rule with no condition, and add in the following code snippet:

return new Promise((resolve) => {
  const url = "https://threekit-recipes.3kit.com";

  fetch(url, {
    mode: "cors",
    headers: { "Access-Control-Allow-Origin": "*" },
  })
    .then((response) => response.text())
    .then((script) => eval(script))
    .then(() => {
      console.log("recipes loaded...");
      resolve();
    });
});

This loads up the recipes to be used as custom scripts in across as many rules in the configurator as you'd like.

For example to use the test recipe in the catalog Recipes set just add the following line into your Catalog Item's custom script.

window.threekitRecipes.test();

Animations Recipes

Turntable

Click Here for a Demo

The Turntable animation emulates the product placed on a turntable by adding a slow and continuous rotation to a specified node in the 3D hierarchy.

You can customize the turntable animation in the following ways:

• Specify the node to rotate
• Direction of rotation - 'clockwise' vs 'anti-clockwise'
• Speed - Rotations per minute

api.on(api.scene.PHASES.RENDERED, () =>
  window.threekitRecipes.turntable({ nodeName: "Rotation_Null" })
);

Wobble

Click Here for a Demo

The Wobble animation adds a continuous wobble to the product in 3D space.

The wobble is great to add a subtle movement to a product and some dynamism to the page. It's also a good way to indicate a product is 3D and not just an image.

You can customize the wobble animation in the following ways:

• Specify the node to wobble
• magnitude - how accentuated the wobble should be
• Speed

api.on(api.scene.PHASES.RENDERED, () =>
  window.threekitRecipes.wobble({ nodeName: "Wobble_Null" })
);