START DOCUMENTATION

Product - Laptop holder

How to create laptop holder

In this tutorial you will learn how to use three sets of variants to drive the behaviour of your 3D products. For that we will use an example of a laptop holder that was coded in TypeScript.

Here is the link to demo store product of Laptop Holder.

Demo store password: 3d-bits-demo

3D Laptop holder screenshot

Model Example

Setting up the laptop holder variants

You will need these product variants:

  • Laptop Type - MacBook Pro 16, MacBook Pro 14, MacBook Air
  • Number Laptops - 1, 2, 3
  • Color - Black, Blue

The script on bitbybit.dev

In order to save you some time we have this embedded script that you can pick up from this tutorial page and export to bitbybit runner.

TypeScript

Laptop Holder

Why TypeScript

You may have noticed that this example does not use Rete or Blockly, but opts for TypeScript. TypeScript offers the most powerful features to your configurators as you can tap into the full power of the language and access all features of BabylonJS core. This is why we have decided to use TypeScript for this example and show how it can be integrated as configurable 3D product.