Introduction to Interactive 3D with Threekit
  • Dark
    Light

Introduction to Interactive 3D with Threekit

  • Dark
    Light

Interactive 3D refers to a product presentation within a webpage in which the customer can interact with the product in a meaningful way, such as spin it around or change options, while seeing a live update. These outputs utilize WebGL, a web technology, that enables high quality 3D graphics to be created within the webpage unique for each client. It leads to very fast, rich and engaging interactions.

Product Viewing

Our product viewer will load a 3D asset and then allow the customer to move it around in 3D. This can be great for a customer to understand your product in great detail and allow them to get a sense of it that they could normally not get without actually physically touching your product.

window.threekitPlayer({ authToken: "c2135b28-a743-435d-b458-ab8940c8ec22", el: document.getElementById("threeplayerdiv"), assetId:"f54ec0a9-9fa6-4832-a580-a18c0254c8e6", showConfigurator: false})

Product viewing is very easy to set up. In fact each time you are on product page you are using the product viewer. We call this our player. This works by default once your 3D assets are properly loaded into the platform and correctly associated with your products (Catalog Items). This player can be automatically pulled into your ecommerce site via an ecommerce connector.

Interactive 3D Configuration

Interactive 3D configuration is similar to product viewing, but it includes the ability for the product to change its visual properties in response to option changes.

To enable interactive 3D configuration, you need only to have products with options, along with their backing 3D assets. Then, by default, you will see an interactive product viewer on the product page along with its configuration. When you change this configuration your changes will be seen live.

Product Tours

Product tours educate customers by highlighting product features in an interactive engaging fashion. This differentiates your products from competitors by ensuring that customers know your differentiators and remember.

To create a product tour, you must create a configurable product but in this case, the option should be of the type “tour steps”. This then changes the mode of the player into one that has a series of named steps, basically stops along the product tour. Your art team then needs to set up in the 3D asset the points of interest, the annotations, and the camera settings that represent the stops on the tour. Once this is one, if you connect this product to your ecommerce site, then it will show a product tour.

Was This Article Helpful?