This guide will take you through the process of creating immersive visual experiences using Threekit. By the end of this guide, you will understand the process of creating a product catalog full of interactive 3D assets, replete with 3D configurations and beautiful visuals, ready to expose anywhere on the web.

Before we get started

In a real-world implementation, Threekit will be utilized by a variety of personas who conduct various tasks and workflows in Threekit which are then neatly packaged together to expose the results on the web. In this guide, we will discuss the various personas involved and their general tasks within the Threekit Platform.

Throughout the guide, we will also assume a certain knowledge of 3D and, for certain tasks, developer-level competency. Other tasks will require knowledge of the business and the products/product rules defined by the business.

Also, we will guide you through a progression involving simpler, contained tasks packaged for the purpose of exposing various concepts. Eventually, the tasks will become more complex and specialized and will require a greater knowledge of either 3D, 3D technology, front end web development, or some combination. Don't worry, though, we'll let you know when you are stepping into complex territory. The intention of this progression seeks to not only inform stakeholders of what can be expected in a standard interactive 3D implementation but also to familiarize the greater outside audience of what it is Threekit does, with a clear path to discovering how.

Lastly, the intent is to illustrate both how the platform facilitates seamless delivery of immersive commerce on the web, and how merchandisers leverage their existing Product Catalog structure to drive asset management at-scale.

It is worth mentioning that this overview does not imply strict adherence to a singular workflow, but it will emphasize where Threekit addresses inefficiencies in the maintenance and delivery of immersive commerce experiences on the web.

Successful Deployment

Effective delivery of an interactive 3D experience is a collaborative endeavor involving developers, 3D Artists and, most importantly, merchandisers. We know that the three groups don't often work together and rarely intersect in the same system. Threekit is a system that brings together those stakeholders and facilitates easy communication and collaboration.

Stakeholder Roles

The following roles are involved in the delivery of a typical 3D configuration experience. There are numerous instances in which everyone works collaboratively; those instances will be spoken to in context.

Merchandiser/Product Manager

Collectively, the merchandising and product management teams have comprehensive knowledge of the product catalog. From providing the framework for all viable Product configurations to final approval of visual assets and corresponding presentation thereof, these individuals and their respective teams sit at the epicenter of all things Threekit.

Front-End Developer

Responsible for assisting the Merchandising/Product Management teams in importing data, addressing the UI requirements of the configurator, and integrating to the front-end, the developer provides all necessary technical assistance along the way.

3D Artist

The Artist is responsible for ensuring visuals are at standard and fully representative of the dictate set forth by the Merchandisers and Product Managers. Where the Merchandiser provides the blueprint, the Artist does the building, ensuring the 3D representation of the products satisfy all viable combinations of options and meet visual quality standards.

Deployment Steps

1) Create or Import Product Data

The Threekit product catalog should be a mirror of your real product catalog. Traditionally a merchandiser or a product manager would maintain and update this data. Threekit will consume the product data from any well-formed external sources via an import process using a JSON file format. Direct integrations may be built using our public APIs. Generally, a product catalog consists of catalog items such as products, parts, and materials. This will include a variety of product data and metadata. Most often the products will be in some sort of a hierarchy.

2) Import Visual Assets

The components that make up the final 3D view are generally referred to as visual assets. These will include 3D models, scenes (including camera and lighting setup), materials and textures. In Threekit, you will then associate these visual assets with their corresponding product catalog items. The final result displayed to the end-user is an assembly of visual assets based on product configuration data.

3) Create Configurators

Once the product catalog items and visual assets are associated, the options available to the end customer. The final end product will then include the rules and constraints that impact the end-user experience.

4) Build Your Visual Experience

Lastly, we will approve and publish all the assets and build the final visual experiences. The final user experience and the types of assets that will be generated will be dependent upon the needs of the business. This step will also include embedding the assets in the final user experience wherever it is required.

Step 0: Prerequisites

Prior to reading further, its important to clarify some of the more common vocabulary used throughout Threekit documentation.

What is the Threekit Player?

The Threekit Player is the tip of the spear in terms of how customers experience Products. The Threekit Player presents the 3D model of the product, and allows for controlling the nature of user-interaction, such as boundaries for zooming in and out, rotation restrictions, available buttons, etc.

INSERT PURSE CONFIGURATOR HERE

Further detail on the Threekit Player can be found here.

What is the Configuration Form?

The Configuration Form presents all configurable Attributes of the Product.

Helpful Resource to get Started

Regardless of role, if unfamiliar with the 3D domain, it is very easy to slide down a slippery-slope of jargon. Threekit is specifically designed so Merchandisers do not have to suffer this fate; however, there will be collaboration between all parties, so it best to at least know 3D Basics. This will ensure everyone is speaking the same language, especially when engaged in conversations around visual fidelity and approvals.

Step 1: Import Product Data

In simple terms, the developer is responsible for leveraging the Product Import API, or importing a JSON file, to get all Product Data into the Threekit Organization. The Merchandiser is responsible for ensuring the Product Data is accurate, comprehensive, and consumable by the Threekit Platform.

Product Data --> Catalog Items

It is important to note "Product Data" is not inclusive of "Visual Data". The Threekit Platform intentionally decouples these data sets in order to lay the foundation for conferring superpowers upon the Merchandiser. It's easiest to think of this step as describing the qualities of a Product without being able to see it, akin to the lists of Product Data housed in ERPs/PIMs/perhaps CSV files. In the parlance of Threekit, Catalog Items are the records created upon import of Product Data. All products will require dedicated Catalog Items, but so too will any part/component of said Products. This includes dedicated Catalog Items per color/material combination. Taking this step is pivotal to leveraging the full capacity of the Threekit Platform.

What exists after Importing?

Navigating to any configurable Catalog Item, all associated metadata from the import is present, as well as the Configuration Form, populated with all relevant Attributes and Attribute Values. Note the attributes, with no corresponding visual Preview.

So, now what?

To this point, there are no visuals corresponding to the Catalog Items, but the Merchandiser has provided the necessary foundation to inform the work of the Artist, both in terms of how the the Products are composed along with all relevant configuration information.

Step 2: Import Visual Assets

We now have Product Data! This informs us how to import the Visual Assets most efficiently. At this point, it is understood that Product Data has been organized in a Threekit friendly manner, that being, a Catalog Item has been created for each part used to compose 3D Models of the products, all Attributes and Attribute Values are present on ALL configurable Catalog Items, and a Catalog Item has been created for every material which can be applied to a surface.

Prior to Importing Visual Assets...

Customers will have varying entry points in terms of their visual assets. Some will have dedicated CAD files for every single part, others will have 3D models representative of every Product, some will have only photos. Regardless, when attempting to represent a large Product Catalog with many shared/interchangeable parts, each part must be imported independently (or separated within the Platform), such that it can be referenced on its corresponding Catalog Item record.

Fortunately, dedicated Material Assets and Texture File Assets are automatically created when importing a Model. The Artist is only responsible for consulting the existing Product Data to determine what 3D Assets are required to support a given Catalog Item.

Step 3: Create Configurable Assets

Let's review the current state of creating our configurator. The Merchandiser has provided data on all requisite Catalog Items to the developer who has imported the data. Additionally, the 3D Artist has ensured there are unique 3D assets representing all necessary parts, including all materials applied to surfaces.

Now, using the Catalog Item Records for configurable products as a reference, the Logic Mode of the Editor is used to ensure the 3D representations adjust with fidelity relative to Attributes and Attribute Values.

Step 4: Integrate into Client Website or eCommerce Store

Once the Assets are configurable and associated to the appropriate Catalog items, the front-end developer works to deliver the UI to the specifications agreed upon at the outset of the project.

Additionally, the Merchandiser and the Artist work in concert to agree on staging the Products as desired, including requisite lighting and environments.