Tutorial: Creating a Parametric Palm Table Configurator for Shopify
What You Will Learn: Advanced 3D Configuration
This tutorial takes you a step further, demonstrating how more complex Bitbybit scripts can be integrated into your Shopify store using the "3D Bits" app. We will use a pre-prepared parametric palm table script and show you how to:
- Integrate it into your Shopify product page.
- Combine 3D scans with parametric 3D CAD models.
- Link script parameters to Shopify product variants.
- Create and use custom Liquid UI elements (as line item properties) for more granular product configuration.
View the Demo:
- Check out the live example on our Demo Store: Palm Table Product Page.
- Demo store password:
3d-bits-demo
3D Palm Table Configurator Example
Video Tutorial: Building the Palm Table Configurator
Key Concepts Covered
Setting Up Product Variants
Shopify variants allow you to offer different versions of a product (e.g., different sizes, colors, materials). Each variant can have its own price, SKU, and inventory. In this tutorial, we'll use variants to control aspects like the number of legs for the table and potentially assign custom pricing based on these selections.
Custom Liquid UI Elements for Line Item Properties
While variants are great, sometimes you need finer control over product configuration. Custom Liquid UI elements, implemented as line item properties, allow you to add sliders, dropdowns, checkboxes, and other custom inputs to your product page. Customers can use these to configure product details that might not be covered by standard variants.
Important Note on Pricing with Line Items:
Line item properties in Shopify cannot directly affect the product's base price. If you need custom UI elements that dynamically change the price, you would typically need to use a third-party Shopify app designed for complex pricing rules and attempt to integrate the "3D Bits" app with it. We cannot guarantee compatibility, but as long as the inputs generated by such apps have name attributes, our app should be able to pick up their values.
How to Create a Custom Liquid Form for Line Items
-
Create a Metafield for Liquid Code:
- You'll need a product metafield to store your custom Liquid code. You can name the metafield descriptively (e.g., "Custom Product Options").
- The key for this metafield must be
custom.liquid-custom-line-items. The video tutorial explains how to set this up.
-
Liquid Snippets: You'll typically use two Liquid snippets:
- Snippet 1: Context and Form Identification (Add to your theme's product form Liquid file, e.g.,
main-product.liquidor a custom section): This snippet sets up the context and helps identify the product form for our app. (The exact implementation of this "magic" might vary or be handled by the "3D Bits" app's block itself. The video tutorial will provide the precise method.)
- Snippet 1: Context and Form Identification (Add to your theme's product form Liquid file, e.g.,
{% assign product_form_id = 'product-form-' | append: section.id %}
{% assign replaced = product.metafields.custom.liquid-custom-line-items | replace: "{{product_form_id}}", product_form_id %}
{{replaced}}
- Snippet 2: The Form Itself (Paste into the
custom.liquid-custom-line-itemsproduct metafield): This snippet defines the actual HTML for your custom UI elements. Here's a conceptual example for controlling table dimensions:
<style>
label {
margin-top: 20px;
}
input {
width: 100%;
max-width: 440px;
}
input[type='text'] {
height: 40px;
padding: 20px;
-webkit-user-select: text;
}
::selection {
background-color: #ffffff;
color: #000000;
}
input[type='range'] {
margin: 0px;
appearance: none;
background-color: #000000;
color: #000000;
height: 2px;
border-radius: 0.5vmin;
}
input::-webkit-slider-thumb {
cursor: pointer;
appearance: none;
width: 1vmin;
height: 1vmin;
background: black;
}
</style>
<p class="line-item-property__field">
<label class="form__label" id="height-range-label" for="height-range">Height</label>
<input
id="height-range"
form="{{product_form_id}}"
name="properties[Height]"
type="range"
min="0.1"
max="1.5"
value="1"
step="0.1"
class="slider"
/>
<label class="form__label" id="leg-thickness-range-label" for="leg-thickness-range">Leg Thickness</label>
<input
id="leg-thickness-range"
form="{{product_form_id}}"
name="properties[Leg Thickness]"
type="range"
min="0.1"
max="0.4"
value="0.2"
step="0.05"
class="slider"
/>
</p>
<script>
setTimeout(() => {
setupUpdates('height-range', 'Height: ');
setupUpdates('leg-thickness-range', 'Leg Thickness: ');
});
function setupUpdates(id, label){
const value = document.querySelector(`#${id}-label`);
const input = document.querySelector(`#${id}`);
value.textContent = label + input.value;
input.addEventListener('change', (event) => {
value.textContent = label + event.target.value;
});
}
</script>
The Bitbybit Script (Rete)
To save you time, here is the embedded Rete script used in this tutorial for the parametric palm table. You can explore it here and then use the "Export to Runner" feature in the Bitbybit editor to get the JavaScript code for your Shopify BITBYBIT RUNNER block.
Script Source (rete)
{
"id": "rete-v2-json",
"nodes": {
"31837c43efb7c836": {
"id": "31837c43efb7c836",
"name": "bitbybit.occt.shapes.wire.interpolatePoints",
"customName": "interpolate",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"periodic": true,
"tolerance": 1e-7
},
"inputs": {
"points": {
"connections": [
{
"node": "a70860061600161b",
"output": "list",
"data": {}
}
]
}
},
"position": [
-1593.7776113512678,
253.2915455643589
]
},
"7062a429128bbbda": {
"id": "7062a429128bbbda",
"name": "bitbybit.occt.shapes.wire.interpolatePoints",
"customName": "interpolate",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"periodic": true,
"tolerance": 1e-7
},
"inputs": {
"points": {
"connections": [
{
"node": "b51edd3cfa39f8fc",
"output": "list",
"data": {}
}
]
}
},
"position": [
-1185.8133115671612,
579.5999499926052
]
},
"6a1a83648fcec1c3": {
"id": "6a1a83648fcec1c3",
"name": "bitbybit.babylon.scene.drawDirectionalLight",
"customName": "directional light",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"direction": [
-100,
-100,
-100
],
"intensity": 2,
"diffuse": "#2e58ff",
"specular": "#ffffff",
"shadowGeneratorMapSize": 4000,
"enableShadows": true,
"shadowDarkness": 0,
"shadowUsePercentageCloserFiltering": true,
"shadowContactHardeningLightSizeUVRatio": 0.2,
"shadowBias": 0.0001,
"shadowNormalBias": 0.002,
"shadowMaxZ": 1000,
"shadowMinZ": 0
},
"inputs": {},
"position": [
2092.6072846964635,
795.1080497935234
]
},
"29413c06018aa432": {
"id": "29413c06018aa432",
"name": "bitbybit.occt.shapes.wire.reversedWire",
"customName": "reversed",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "aac363f7d7b0d8c5",
"output": "result",
"data": {}
}
]
}
},
"position": [
7551.793538509435,
-130.72768372770645
]
},
"1f0078851cb91cab": {
"id": "1f0078851cb91cab",
"name": "bitbybit.occt.shapes.face.createFaceFromWires",
"customName": "face from wires",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"planar": true
},
"inputs": {
"shapes": {
"connections": [
{
"node": "2f9c392ce2d6b979",
"output": "result",
"data": {}
}
]
}
},
"position": [
9034.803885634217,
-413.0281787163233
]
},
"e0419a05fe8e64c7": {
"id": "e0419a05fe8e64c7",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "34cb18f6e31ecbbc",
"output": "list",
"data": {}
},
{
"node": "aa72fd1f6e8121b5",
"output": "list",
"data": {}
}
]
}
},
"position": [
8326.289547872313,
-352.91919602436724
]
},
"2f9c392ce2d6b979": {
"id": "2f9c392ce2d6b979",
"name": "bitbybit.lists.flipLists",
"customName": "flip lists",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 1,
"forceExecution": false
},
"clone": true
},
"inputs": {
"list": {
"connections": [
{
"node": "e0419a05fe8e64c7",
"output": "list",
"data": {}
}
]
}
},
"position": [
8666.790633357406,
-400.68348899578194
]
},
"aa72fd1f6e8121b5": {
"id": "aa72fd1f6e8121b5",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "29413c06018aa432",
"output": "result",
"data": {}
}
]
}
},
"position": [
7941.746116134559,
-123.41999711044451
]
},
"e0aaf1341ecc66d4": {
"id": "e0aaf1341ecc66d4",
"name": "bitbybit.occt.shapes.wire.divideWireByEqualDistanceToPoints",
"customName": "points by distance",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"nrOfDivisions": 10,
"removeStartPoint": false,
"removeEndPoint": true
},
"inputs": {
"shape": {
"connections": [
{
"node": "31837c43efb7c836",
"output": "result",
"data": {}
}
]
},
"nrOfDivisions": {
"connections": [
{
"node": "149339a9019fcd93",
"output": "result",
"data": {}
}
]
}
},
"position": [
-637.8723204165638,
-132.43958949213663
]
},
"d0e10b585b8951f6": {
"id": "d0e10b585b8951f6",
"name": "bitbybit.occt.shapes.wire.divideWireByEqualDistanceToPoints",
"customName": "points by distance",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"nrOfDivisions": 10,
"removeStartPoint": false,
"removeEndPoint": true
},
"inputs": {
"shape": {
"connections": [
{
"node": "7062a429128bbbda",
"output": "result",
"data": {}
}
]
},
"nrOfDivisions": {
"connections": [
{
"node": "149339a9019fcd93",
"output": "result",
"data": {}
}
]
}
},
"position": [
-654.2587613672749,
328.84442164361764
]
},
"ca2e8b84a5142533": {
"id": "ca2e8b84a5142533",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "eff8d987165307b6",
"output": "list",
"data": {}
},
{
"node": "e0aaf1341ecc66d4",
"output": "result",
"data": {}
},
{
"node": "d0e10b585b8951f6",
"output": "result",
"data": {}
},
{
"node": "8d542d9159ccbc16",
"output": "list",
"data": {}
}
]
}
},
"position": [
5506.96937644226,
-497.0650606049488
]
},
"df30296fdfaee3e5": {
"id": "df30296fdfaee3e5",
"name": "bitbybit.lists.flipLists",
"customName": "flip lists",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 1,
"forceExecution": false
},
"clone": true
},
"inputs": {
"list": {
"connections": [
{
"node": "ca2e8b84a5142533",
"output": "list",
"data": {}
}
]
}
},
"position": [
5836.0056398228235,
-474.74874869309394
]
},
"6805de2fe91353b5": {
"id": "6805de2fe91353b5",
"name": "bitbybit.occt.shapes.wire.createPolygonWire",
"customName": "polygon",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"points": {
"connections": [
{
"node": "df30296fdfaee3e5",
"output": "result",
"data": {}
}
]
}
},
"position": [
6234.471739129379,
-447.28540345269926
]
},
"18110ee4725a9a45": {
"id": "18110ee4725a9a45",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "d0e10b585b8951f6",
"output": "result",
"data": {}
},
{
"node": "eff8d987165307b6",
"output": "list",
"data": {}
}
]
}
},
"position": [
2316.8535255340144,
-91.11856333942043
]
},
"80241bbb86d474c9": {
"id": "80241bbb86d474c9",
"name": "bitbybit.lists.flipLists",
"customName": "flip lists",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 1,
"forceExecution": false
},
"clone": true
},
"inputs": {
"list": {
"connections": [
{
"node": "18110ee4725a9a45",
"output": "list",
"data": {}
}
]
}
},
"position": [
2685.0146558579254,
73.29352462936126
]
},
"d67b70bead711b5c": {
"id": "d67b70bead711b5c",
"name": "bitbybit.lists.addItemAtIndex",
"customName": "add item",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 1,
"clone": true
},
"inputs": {
"item": {
"connections": [
{
"node": "dc518580e3c246e1",
"output": "result",
"data": {}
}
]
},
"list": {
"connections": [
{
"node": "353793a2747f5024",
"output": "result",
"data": {}
}
]
}
},
"position": [
917.5232148681898,
-623.0236044635359
]
},
"dc518580e3c246e1": {
"id": "dc518580e3c246e1",
"name": "bitbybit.math.number",
"customName": "number",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"number": 0
},
"inputs": {},
"position": [
437.9114505526686,
-311.9722167448897
]
},
"40f70be758f5a235": {
"id": "40f70be758f5a235",
"name": "bitbybit.lists.passThrough",
"customName": "pass through",
"data": {},
"inputs": {
"item": {
"connections": [
{
"node": "d67b70bead711b5c",
"output": "result",
"data": {}
}
]
}
},
"position": [
1330.2747597784746,
-597.7199493604561
]
},
"c9685df3943837f6": {
"id": "c9685df3943837f6",
"name": "bitbybit.lists.removeItemAtIndex",
"customName": "remove item",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 2,
"clone": true
},
"inputs": {
"list": {
"connections": [
{
"node": "40f70be758f5a235",
"output": "item",
"data": {}
}
]
}
},
"position": [
1625.897902712436,
-672.4470822874287
]
},
"eff8d987165307b6": {
"id": "eff8d987165307b6",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "c9685df3943837f6",
"output": "result",
"data": {}
}
]
}
},
"position": [
2017.0837107167417,
-557.6884465021725
]
},
"73e24c87db754344": {
"id": "73e24c87db754344",
"name": "bitbybit.occt.operations.offset",
"customName": "offset",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": true,
"flatten": 0,
"forceExecution": false
},
"distance": 0.2,
"tolerance": 0.1
},
"inputs": {
"shape": {
"connections": [
{
"node": "6805de2fe91353b5",
"output": "result",
"data": {}
}
]
},
"face": {
"connections": [
{
"node": "e8e247ab73390a97",
"output": "result",
"data": {}
}
]
},
"distance": {
"connections": [
{
"node": "c73eaf8cb35cb484",
"output": "result",
"data": {}
}
]
}
},
"position": [
7229.5438787190615,
-701.5207348868968
]
},
"aac363f7d7b0d8c5": {
"id": "aac363f7d7b0d8c5",
"name": "bitbybit.occt.operations.offset",
"customName": "offset",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": true,
"flatten": 0,
"forceExecution": false
},
"distance": 0.05,
"tolerance": 0.1
},
"inputs": {
"shape": {
"connections": [
{
"node": "6805de2fe91353b5",
"output": "result",
"data": {}
}
]
},
"face": {
"connections": [
{
"node": "e8e247ab73390a97",
"output": "result",
"data": {}
}
]
}
},
"position": [
7215.494481762919,
-114.08034575053713
]
},
"e8e247ab73390a97": {
"id": "e8e247ab73390a97",
"name": "bitbybit.occt.shapes.face.createFaceFromWire",
"customName": "face from wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"planar": true
},
"inputs": {
"shape": {
"connections": [
{
"node": "6805de2fe91353b5",
"output": "result",
"data": {}
}
]
}
},
"position": [
6691.511851141748,
-504.13957383343063
]
},
"34cb18f6e31ecbbc": {
"id": "34cb18f6e31ecbbc",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "73e24c87db754344",
"output": "result",
"data": {}
}
]
}
},
"position": [
7583.946364016251,
-666.6864199918559
]
},
"4f6bf108066fede3": {
"id": "4f6bf108066fede3",
"name": "bitbybit.occt.operations.makeThickSolidSimple",
"customName": "thicken",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"offset": 0.05
},
"inputs": {
"shape": {
"connections": [
{
"node": "1f0078851cb91cab",
"output": "result",
"data": {}
}
]
}
},
"position": [
9592.064111354663,
-528.943149090781
]
},
"cf1b282b54900559": {
"id": "cf1b282b54900559",
"name": "bitbybit.occt.fillets.chamferEdges",
"customName": "chamfer edges",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"distance": 0.02
},
"inputs": {
"shape": {
"connections": [
{
"node": "4f6bf108066fede3",
"output": "result",
"data": {}
},
{
"node": "f94b23403634688d",
"output": "result",
"data": {}
}
]
}
},
"position": [
9987.752536709344,
-392.21004729857964
]
},
"ba7a40ecbe3da221": {
"id": "ba7a40ecbe3da221",
"name": "bitbybit.draw.drawAnyAsync",
"customName": "draw async",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"options": {
"connections": [
{
"node": "1697279b3848816e",
"output": "result",
"data": {}
}
]
},
"entity": {
"connections": [
{
"node": "1a74caf6af606f8c",
"output": "result",
"data": {}
},
{
"node": "86142d7043ff6d8e",
"output": "result",
"data": {}
}
]
}
},
"position": [
11123.12325858764,
-411.89939781049566
]
},
"1697279b3848816e": {
"id": "1697279b3848816e",
"name": "bitbybit.draw.optionsOcctShapeMaterial",
"customName": "occt shape with material",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"precision": 0.02,
"drawEdges": false,
"edgeColour": "#ffffff",
"edgeWidth": 2
},
"inputs": {
"faceMaterial": {
"connections": [
{
"node": "f56f9a92f89b426f",
"output": "result",
"data": {}
}
]
}
},
"position": [
10595.357895082569,
-143.89850045847834
]
},
"f56f9a92f89b426f": {
"id": "f56f9a92f89b426f",
"name": "bitbybit.babylon.material.pbrMetallicRoughness.create",
"customName": "pbr material",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"name": "Custom Material",
"baseColor": "#000000",
"emissiveColor": "#000000",
"metallic": 0.9,
"roughness": 0.24,
"alpha": 1,
"backFaceCulling": false,
"zOffset": 0
},
"inputs": {},
"position": [
10225.046590903792,
9.156540865799798
]
},
"1a74caf6af606f8c": {
"id": "1a74caf6af606f8c",
"name": "bitbybit.occt.shapes.compound.makeCompound",
"customName": "make",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shapes": {
"connections": [
{
"node": "c2217718756f16d4",
"output": "list",
"data": {}
}
]
}
},
"position": [
10739.49858803467,
-411.96645101338845
]
},
"c2217718756f16d4": {
"id": "c2217718756f16d4",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "cf1b282b54900559",
"output": "result",
"data": {}
}
]
}
},
"position": [
10422.32816799044,
-366.5749066241308
]
},
"8bce50eeb08aee2a": {
"id": "8bce50eeb08aee2a",
"name": "bitbybit.occt.shapes.face.normalOnUV",
"customName": "normal on uv",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"paramU": 0.5,
"paramV": 0.5
},
"inputs": {
"shape": {
"connections": [
{
"node": "e8e247ab73390a97",
"output": "result",
"data": {}
}
]
}
},
"position": [
7185.858317782559,
-1071.0089788710666
]
},
"353793a2747f5024": {
"id": "353793a2747f5024",
"name": "bitbybit.lists.flatten",
"customName": "flatten",
"data": {
"nrLevels": 1
},
"inputs": {
"list": {
"connections": [
{
"node": "e0aaf1341ecc66d4",
"output": "result",
"data": {}
}
]
}
},
"position": [
-85.25070600002573,
-232.44378016688665
]
},
"2eaf39ab89fabcf7": {
"id": "2eaf39ab89fabcf7",
"name": "bitbybit.occt.shapes.wire.createPolylineWire",
"customName": "polyline",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"points": {
"connections": [
{
"node": "80241bbb86d474c9",
"output": "result",
"data": {}
}
]
}
},
"position": [
3023.505231579869,
78.53751425944878
]
},
"414499d00fddaff3": {
"id": "414499d00fddaff3",
"name": "bitbybit.occt.shapes.wire.pointOnWireAtParam",
"customName": "point at param",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"param": 0.7
},
"inputs": {
"shape": {
"connections": [
{
"node": "2eaf39ab89fabcf7",
"output": "result",
"data": {}
}
]
}
},
"position": [
3380.7815318657913,
64.783297190383
]
},
"1ed41fcc3663ff42": {
"id": "1ed41fcc3663ff42",
"name": "bitbybit.lists.addItemAtIndex",
"customName": "add item",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 1,
"clone": true
},
"inputs": {
"list": {
"connections": [
{
"node": "fb79bba15e16a06f",
"output": "item",
"data": {}
}
]
},
"item": {
"connections": [
{
"node": "dc518580e3c246e1",
"output": "result",
"data": {}
}
]
}
},
"position": [
4136.042395357145,
-151.4957597053613
]
},
"fb79bba15e16a06f": {
"id": "fb79bba15e16a06f",
"name": "bitbybit.lists.passThrough",
"customName": "pass through",
"data": {},
"inputs": {
"item": {
"connections": [
{
"node": "414499d00fddaff3",
"output": "result",
"data": {}
}
]
}
},
"position": [
3825.9622392500323,
-129.7988820383694
]
},
"7358bb07bad704fc": {
"id": "7358bb07bad704fc",
"name": "bitbybit.lists.passThrough",
"customName": "pass through",
"data": {},
"inputs": {
"item": {
"connections": [
{
"node": "1ed41fcc3663ff42",
"output": "result",
"data": {}
}
]
}
},
"position": [
4502.713709691637,
-175.64308007610293
]
},
"a6f24203a6359557": {
"id": "a6f24203a6359557",
"name": "bitbybit.lists.removeItemAtIndex",
"customName": "remove item",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 2,
"clone": true
},
"inputs": {
"list": {
"connections": [
{
"node": "7358bb07bad704fc",
"output": "item",
"data": {}
}
]
}
},
"position": [
4803.83887911686,
-239.45978049655076
]
},
"8d542d9159ccbc16": {
"id": "8d542d9159ccbc16",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "a6f24203a6359557",
"output": "result",
"data": {}
}
]
}
},
"position": [
5189.262585056546,
-210.96342850815395
]
},
"9758a707c31da08e": {
"id": "9758a707c31da08e",
"name": "bitbybit.draw.drawAnyAsync",
"customName": "draw async",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"options": {
"connections": [
{
"node": "e77ff54b9e661ca2",
"output": "result",
"data": {}
}
]
},
"entity": {
"connections": [
{
"node": "55adf97796d98f99",
"output": "result",
"data": {}
}
]
}
},
"position": [
7384.110253521927,
2432.003012760463
]
},
"e77ff54b9e661ca2": {
"id": "e77ff54b9e661ca2",
"name": "bitbybit.draw.optionsOcctShapeSimple",
"customName": "occt shape simple",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"precision": 0.01,
"drawFaces": true,
"faceColour": "#3b3b3b",
"drawEdges": false,
"edgeColour": "#ffffff",
"edgeWidth": 2
},
"inputs": {},
"position": [
6735.825312941648,
2698.646873905299
]
},
"f94b23403634688d": {
"id": "f94b23403634688d",
"name": "bitbybit.occt.operations.makeThickSolidSimple",
"customName": "thicken",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"offset": -0.05
},
"inputs": {
"shape": {
"connections": [
{
"node": "1f0078851cb91cab",
"output": "result",
"data": {}
}
]
}
},
"position": [
9604.27046451454,
-225.14058367024086
]
},
"9d06ef5e24369305": {
"id": "9d06ef5e24369305",
"name": "bitbybit.occt.shapes.edge.getEdge",
"customName": "get edge",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 3
},
"inputs": {
"shape": {
"connections": [
{
"node": "1326e004fd6a310e",
"output": "result",
"data": {}
}
]
}
},
"position": [
8108.693978539097,
-1526.8456962470411
]
},
"703cc6b980dc22a1": {
"id": "703cc6b980dc22a1",
"name": "bitbybit.occt.operations.loftAdvanced",
"customName": "loft adv.",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"makeSolid": false,
"closed": true,
"periodic": true,
"straight": true,
"nrPeriodicSections": 10,
"useSmoothing": false,
"maxUDegree": 3,
"tolerance": 0.001,
"parType": "approxCentripetal"
},
"inputs": {
"shapes": {
"connections": [
{
"node": "98577301857a6189",
"output": "list",
"data": {}
}
]
}
},
"position": [
10088.849642605684,
-1955.0927494499335
]
},
"1326e004fd6a310e": {
"id": "1326e004fd6a310e",
"name": "bitbybit.occt.operations.offset",
"customName": "offset",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"distance": 0.22,
"tolerance": 0.1
},
"inputs": {
"shape": {
"connections": [
{
"node": "6805de2fe91353b5",
"output": "result",
"data": {}
}
]
},
"distance": {
"connections": [
{
"node": "c73eaf8cb35cb484",
"output": "result",
"data": {}
}
]
}
},
"position": [
7421.752650249176,
-1533.771344993055
]
},
"98577301857a6189": {
"id": "98577301857a6189",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "087b35978a1e6653",
"output": "result",
"data": {}
}
]
}
},
"position": [
9788.883817447857,
-1902.945051512794
]
},
"34e1abf8b93ca0ac": {
"id": "34e1abf8b93ca0ac",
"name": "bitbybit.draw.drawAnyAsync",
"customName": "draw async",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"entity": {
"connections": [
{
"node": "1bad109c556ac293",
"output": "result",
"data": {}
}
]
},
"options": {
"connections": [
{
"node": "09d26f6e41a58c43",
"output": "result",
"data": {}
}
]
}
},
"position": [
10860.21013696698,
-1901.7839797477645
]
},
"1bad109c556ac293": {
"id": "1bad109c556ac293",
"name": "bitbybit.occt.operations.makeThickSolidSimple",
"customName": "thicken",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"offset": 0.05
},
"inputs": {
"shape": {
"connections": [
{
"node": "703cc6b980dc22a1",
"output": "result",
"data": {}
}
]
}
},
"position": [
10430.321933779813,
-1966.1238574042284
]
},
"09d26f6e41a58c43": {
"id": "09d26f6e41a58c43",
"name": "bitbybit.draw.optionsOcctShape",
"customName": "occt shape",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"faceOpacity": 0,
"edgeOpacity": 1,
"edgeColour": "#000000",
"faceColour": "#2e2e2e",
"vertexColour": "#ff00ff",
"edgeWidth": 1,
"vertexSize": 0.03,
"drawEdges": true,
"drawFaces": true,
"drawVertices": false,
"precision": 0.02,
"drawEdgeIndexes": false,
"edgeIndexHeight": 0.06,
"edgeIndexColour": "#ff00ff",
"drawFaceIndexes": false,
"faceIndexHeight": 0.06,
"faceIndexColour": "#0000ff"
},
"inputs": {},
"position": [
10420.127097016677,
-1670.3706727683414
]
},
"32fc443558202a83": {
"id": "32fc443558202a83",
"name": "bitbybit.occt.transforms.scale3d",
"customName": "scale 3d",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": true,
"flatten": 0,
"forceExecution": false
},
"scale": [
1,
1,
1
],
"center": [
0,
0,
0
]
},
"inputs": {
"shape": {
"connections": [
{
"node": "9d06ef5e24369305",
"output": "result",
"data": {}
}
]
},
"center": {
"connections": [
{
"node": "fba7fd1cece44d85",
"output": "result",
"data": {}
}
]
},
"scale": {
"connections": [
{
"node": "e9b6a54c5953ca00",
"output": "result",
"data": {}
}
]
}
},
"position": [
8984.508540035791,
-1743.0321640288685
]
},
"fba7fd1cece44d85": {
"id": "fba7fd1cece44d85",
"name": "bitbybit.occt.shapes.edge.startPointOnEdge",
"customName": "start point",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "9d06ef5e24369305",
"output": "result",
"data": {}
}
]
}
},
"position": [
8495.60473459495,
-1107.5823572387346
]
},
"e9b6a54c5953ca00": {
"id": "e9b6a54c5953ca00",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 1.4,
"y": 1,
"z": 1.4
},
"inputs": {},
"position": [
8496.363400313452,
-1408.2945223377474
]
},
"087b35978a1e6653": {
"id": "087b35978a1e6653",
"name": "bitbybit.occt.shapes.wire.createWireFromEdge",
"customName": "wire from edge",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "32fc443558202a83",
"output": "result",
"data": {}
}
]
}
},
"position": [
9390.068189654503,
-1925.670293250081
]
},
"13078489566b5eef": {
"id": "13078489566b5eef",
"name": "bitbybit.occt.transforms.translate",
"customName": "translate",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"translation": [
0,
0,
0
]
},
"inputs": {
"shape": {
"connections": [
{
"node": "7062a429128bbbda",
"output": "result",
"data": {}
}
]
},
"translation": {
"connections": [
{
"node": "054d08ce2bd66edf",
"output": "result",
"data": {}
}
]
}
},
"position": [
5732.396483767488,
2352.3445135497223
]
},
"054d08ce2bd66edf": {
"id": "054d08ce2bd66edf",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": -1.2,
"z": 0
},
"inputs": {
"y": {
"connections": [
{
"node": "55779498b35dc98f",
"output": "result",
"data": {}
}
]
}
},
"position": [
5156.97687940266,
2540.3761294290425
]
},
"55adf97796d98f99": {
"id": "55adf97796d98f99",
"name": "bitbybit.occt.shapes.face.createFaceFromWire",
"customName": "face from wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"planar": false
},
"inputs": {
"shape": {
"connections": [
{
"node": "4deb0b64f700dd4b",
"output": "result",
"data": {}
}
]
}
},
"position": [
6768.980996975437,
2391.5797184012094
]
},
"4deb0b64f700dd4b": {
"id": "4deb0b64f700dd4b",
"name": "bitbybit.occt.operations.offset",
"customName": "offset",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"distance": 2.5,
"tolerance": 0.1
},
"inputs": {
"shape": {
"connections": [
{
"node": "13078489566b5eef",
"output": "result",
"data": {}
}
]
}
},
"position": [
6342.77031174747,
2369.736569338771
]
},
"f22d900f9813a492": {
"id": "f22d900f9813a492",
"name": "bitbybit.babylon.scene.enableSkybox",
"customName": "skybox",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"skybox": "city",
"size": 1000,
"blur": 0.4,
"environmentIntensity": 0.7
},
"inputs": {},
"position": [
1650.7065963940333,
835.6647595775457
]
},
"ca40c47ead4360da": {
"id": "ca40c47ead4360da",
"name": "bitbybit.babylon.scene.drawDirectionalLight",
"customName": "directional light",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"direction": [
-100,
-100,
-100
],
"intensity": 2,
"diffuse": "#2e58ff",
"specular": "#ffffff",
"shadowGeneratorMapSize": 4000,
"enableShadows": true,
"shadowDarkness": 0,
"shadowUsePercentageCloserFiltering": true,
"shadowContactHardeningLightSizeUVRatio": 0.2,
"shadowBias": 0.0001,
"shadowNormalBias": 0.002,
"shadowMaxZ": 1000,
"shadowMinZ": 0
},
"inputs": {
"direction": {
"connections": [
{
"node": "18ae3157097a06c2",
"output": "result",
"data": {}
}
]
}
},
"position": [
3005.0053829155468,
824.7236024677266
]
},
"18ae3157097a06c2": {
"id": "18ae3157097a06c2",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 100,
"y": -100,
"z": -100
},
"inputs": {},
"position": [
2624.0215658508637,
841.8520354765467
]
},
"44a44f940d2403e9": {
"id": "44a44f940d2403e9",
"name": "bitbybit.babylon.gaussianSplatting.create",
"customName": "gaussian splatting mesh",
"async": true,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"url": "https://cdn.shopify.com/s/files/1/0700/3350/6556/files/palm.splat?v=1748366746"
},
"inputs": {},
"position": [
4751.9425490383555,
711.4816482546073
]
},
"841f165699246a73": {
"id": "841f165699246a73",
"name": "bitbybit.babylon.mesh.setPosition",
"customName": "position",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"babylonMesh": {
"connections": [
{
"node": "44a44f940d2403e9",
"output": "result",
"data": {}
}
]
},
"position": {
"connections": [
{
"node": "e505f9ef2fc88ee7",
"output": "result",
"data": {}
}
]
}
},
"position": [
5613.246744488098,
695.3142364056908
]
},
"e505f9ef2fc88ee7": {
"id": "e505f9ef2fc88ee7",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": -0.2,
"y": 1,
"z": 0.5
},
"inputs": {},
"position": [
5231.792196468373,
1004.8103018109294
]
},
"890ef81db9d88fc8": {
"id": "890ef81db9d88fc8",
"name": "bitbybit.babylon.mesh.setScale",
"customName": "scale",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"scale": {
"connections": [
{
"node": "d6b9373286243995",
"output": "result",
"data": {}
}
]
},
"babylonMesh": {
"connections": [
{
"node": "44a44f940d2403e9",
"output": "result",
"data": {}
}
]
}
},
"position": [
5891.1539251810345,
958.020720002286
]
},
"d6b9373286243995": {
"id": "d6b9373286243995",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 1,
"y": 1,
"z": 1
},
"inputs": {},
"position": [
5556.499207433067,
1286.6279930527721
]
},
"b8bb7b1d98e8c85b": {
"id": "b8bb7b1d98e8c85b",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": -0.18,
"y": 0,
"z": 0.45
},
"inputs": {
"y": {
"connections": [
{
"node": "eae61f00ce184b8b",
"output": "result",
"data": {}
}
]
}
},
"position": [
6373.181765925082,
1207.4768577537825
]
},
"0ccfe72266c5859a": {
"id": "0ccfe72266c5859a",
"name": "bitbybit.occt.shapes.solid.createCylinder",
"customName": "cylinder",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"radius": 0.5,
"height": 1.65,
"center": [
0,
0,
0
],
"direction": [
0,
1,
0
],
"angle": 360,
"originOnCenter": false
},
"inputs": {
"center": {
"connections": [
{
"node": "b8bb7b1d98e8c85b",
"output": "result",
"data": {}
}
]
},
"height": {
"connections": [
{
"node": "f2017f2958745284",
"output": "result",
"data": {}
}
]
}
},
"position": [
6968.899069960056,
1246.8500134109543
]
},
"86142d7043ff6d8e": {
"id": "86142d7043ff6d8e",
"name": "bitbybit.occt.fillets.chamferEdges",
"customName": "chamfer edges",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"distance": 0.05
},
"inputs": {
"shape": {
"connections": [
{
"node": "0ccfe72266c5859a",
"output": "result",
"data": {}
}
]
}
},
"position": [
7421.160467659323,
1296.3350040376863
]
},
"8c36b39be9c70c02": {
"id": "8c36b39be9c70c02",
"name": "bitbybit.math.numberSlider",
"customName": "number slider",
"data": {
"options": {
"min": 10,
"max": 60,
"step": 5,
"width": 350
},
"number": 25
},
"inputs": {},
"position": [
-4248.128815922817,
-439.6088574546025
]
},
"fa78a98177e286dc": {
"id": "fa78a98177e286dc",
"name": "bitbybit.runner.getRunnerInputValue",
"customName": "get runner input value",
"data": {
"property": "Number Of Legs"
},
"inputs": {},
"position": [
-4196.536420780811,
-614.9271423907692
]
},
"149339a9019fcd93": {
"id": "149339a9019fcd93",
"name": "bitbybit.logic.firstDefinedValueGate",
"customName": "first defined value gate",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"value1": {
"connections": [
{
"node": "fa78a98177e286dc",
"output": "result",
"data": {}
}
]
},
"value2": {
"connections": [
{
"node": "8c36b39be9c70c02",
"output": "result",
"data": {}
}
]
}
},
"position": [
-3242.3487200102836,
-590.3351837157991
]
},
"b1110e77898e19e6": {
"id": "b1110e77898e19e6",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 1,
"y": 1,
"z": 2
},
"inputs": {
"y": {
"connections": [
{
"node": "691d6389cfec4831",
"output": "result",
"data": {}
}
]
}
},
"position": [
-2403.0199548657074,
133.26323313104763
]
},
"ffdd0b6754519bd6": {
"id": "ffdd0b6754519bd6",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": -1.2,
"y": 1,
"z": 1
},
"inputs": {
"y": {
"connections": [
{
"node": "691d6389cfec4831",
"output": "result",
"data": {}
}
]
}
},
"position": [
-2403.6899334321893,
441.85230580617025
]
},
"de6b838dc25d88c7": {
"id": "de6b838dc25d88c7",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": -1.2,
"y": 1,
"z": -1.2
},
"inputs": {
"y": {
"connections": [
{
"node": "691d6389cfec4831",
"output": "result",
"data": {}
}
]
}
},
"position": [
-2404.1581532347413,
742.6765260379321
]
},
"a70860061600161b": {
"id": "a70860061600161b",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "b1110e77898e19e6",
"output": "result",
"data": {}
},
{
"node": "ffdd0b6754519bd6",
"output": "result",
"data": {}
},
{
"node": "de6b838dc25d88c7",
"output": "result",
"data": {}
}
]
}
},
"position": [
-1982.8246724408068,
488.03880933375115
]
},
"cc9a7471b3e3946d": {
"id": "cc9a7471b3e3946d",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 2,
"y": 1,
"z": 4
},
"inputs": {
"y": {
"connections": [
{
"node": "691d6389cfec4831",
"output": "result",
"data": {}
}
]
}
},
"position": [
-2406.5353954022034,
1124.4176898319151
]
},
"d6e613c863c15aef": {
"id": "d6e613c863c15aef",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": -3,
"y": 1,
"z": 2
},
"inputs": {
"y": {
"connections": [
{
"node": "691d6389cfec4831",
"output": "result",
"data": {}
}
]
}
},
"position": [
-2407.4606247744296,
1433.8058733485086
]
},
"822c8348e43e8ad7": {
"id": "822c8348e43e8ad7",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector XYZ",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": -2,
"y": 1,
"z": -4
},
"inputs": {
"y": {
"connections": [
{
"node": "691d6389cfec4831",
"output": "result",
"data": {}
}
]
}
},
"position": [
-2406.225270367969,
1744.8005843105161
]
},
"b51edd3cfa39f8fc": {
"id": "b51edd3cfa39f8fc",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "cc9a7471b3e3946d",
"output": "result",
"data": {}
},
{
"node": "d6e613c863c15aef",
"output": "result",
"data": {}
},
{
"node": "822c8348e43e8ad7",
"output": "result",
"data": {}
}
]
}
},
"position": [
-1921.2356582450416,
1410.6268943634414
]
},
"0f778b0a1065597b": {
"id": "0f778b0a1065597b",
"name": "bitbybit.math.numberSlider",
"customName": "number slider",
"data": {
"options": {
"min": 0.5,
"max": 1.5,
"step": 0.1,
"width": 350
},
"number": 1.1
},
"inputs": {},
"position": [
-4204.5920226457,
898.4830146129152
]
},
"f44c67c5f14d69f5": {
"id": "f44c67c5f14d69f5",
"name": "bitbybit.math.numberSlider",
"customName": "number slider",
"data": {
"options": {
"min": 0.1,
"max": 0.4,
"step": 0.05,
"width": 350
},
"number": 0.25
},
"inputs": {},
"position": [
-4249.543638794074,
2751.191594599157
]
},
"7932e6aadf05f2bb": {
"id": "7932e6aadf05f2bb",
"name": "bitbybit.math.twoNrOperation",
"customName": "two numbers",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": 1,
"operation": "add"
},
"inputs": {
"first": {
"connections": [
{
"node": "691d6389cfec4831",
"output": "result",
"data": {}
}
]
},
"second": {
"connections": [
{
"node": "c73eaf8cb35cb484",
"output": "result",
"data": {}
}
]
}
},
"position": [
4271.507570419937,
2654.000603389978
]
},
"55779498b35dc98f": {
"id": "55779498b35dc98f",
"name": "bitbybit.math.oneNrOperation",
"customName": "one number",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"number": 1,
"operation": "negate"
},
"inputs": {
"number": {
"connections": [
{
"node": "7932e6aadf05f2bb",
"output": "result",
"data": {}
}
]
}
},
"position": [
4739.730253011827,
2612.5233517649554
]
},
"eae61f00ce184b8b": {
"id": "eae61f00ce184b8b",
"name": "bitbybit.math.oneNrOperation",
"customName": "one number",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"number": 1,
"operation": "negate"
},
"inputs": {
"number": {
"connections": [
{
"node": "c73eaf8cb35cb484",
"output": "result",
"data": {}
}
]
}
},
"position": [
5591.062236951253,
1671.598403893827
]
},
"9fe43d005daa838c": {
"id": "9fe43d005daa838c",
"name": "bitbybit.math.number",
"customName": "number",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"number": 1.65
},
"inputs": {},
"position": [
6352.678960357757,
1640.0854172077222
]
},
"f2017f2958745284": {
"id": "f2017f2958745284",
"name": "bitbybit.math.twoNrOperation",
"customName": "two numbers",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": 1,
"operation": "add"
},
"inputs": {
"first": {
"connections": [
{
"node": "9fe43d005daa838c",
"output": "result",
"data": {}
}
]
},
"second": {
"connections": [
{
"node": "c73eaf8cb35cb484",
"output": "result",
"data": {}
}
]
}
},
"position": [
6761.8897649539995,
1850.5716394800186
]
},
"1a279cda69fd67d9": {
"id": "1a279cda69fd67d9",
"name": "bitbybit.runner.getRunnerInputValue",
"customName": "get runner input value",
"data": {
"property": "properties[Height]"
},
"inputs": {},
"position": [
-4184.949992696733,
724.2649439486801
]
},
"691d6389cfec4831": {
"id": "691d6389cfec4831",
"name": "bitbybit.logic.firstDefinedValueGate",
"customName": "first defined value gate",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"value2": {
"connections": [
{
"node": "0f778b0a1065597b",
"output": "result",
"data": {}
}
]
},
"value1": {
"connections": [
{
"node": "1a279cda69fd67d9",
"output": "result",
"data": {}
}
]
}
},
"position": [
-3568.0838829879604,
776.6838143286884
]
},
"54fc5a29afe80d17": {
"id": "54fc5a29afe80d17",
"name": "bitbybit.runner.getRunnerInputValue",
"customName": "get runner input value",
"data": {
"property": "properties[Leg Thickness]"
},
"inputs": {},
"position": [
-4179.531473814622,
2586.2386388504688
]
},
"c73eaf8cb35cb484": {
"id": "c73eaf8cb35cb484",
"name": "bitbybit.logic.firstDefinedValueGate",
"customName": "first defined value gate",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"value1": {
"connections": [
{
"node": "54fc5a29afe80d17",
"output": "result",
"data": {}
}
]
},
"value2": {
"connections": [
{
"node": "f44c67c5f14d69f5",
"output": "result",
"data": {}
}
]
}
},
"position": [
-2371.0444461204584,
2603.229365866762
]
},
"a6f00fa7c90754c5": {
"id": "a6f00fa7c90754c5",
"name": "bitbybit.runner.setRunnerResultValue",
"customName": "set runner result value",
"data": {
"property": "meshes"
},
"inputs": {
"value": {
"connections": [
{
"node": "54d9b6960627d6eb",
"output": "list",
"data": {}
}
]
}
},
"position": [
12367.318745824148,
645.5640762169619
]
},
"54d9b6960627d6eb": {
"id": "54d9b6960627d6eb",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "ba7a40ecbe3da221",
"output": "result",
"data": {}
},
{
"node": "34e1abf8b93ca0ac",
"output": "result",
"data": {}
},
{
"node": "44a44f940d2403e9",
"output": "result",
"data": {}
},
{
"node": "9758a707c31da08e",
"output": "result",
"data": {}
}
]
}
},
"position": [
11970.963984525006,
637.018196152786
]
}
}
}
Important Note on Mobile Devices
Scripts that involve complex geometry calculations or many detailed 3D models can be resource-intensive. Some mobile devices, particularly older models or iPhones (due to Safari's memory limitations for browser tabs), might struggle to run very heavy scripts. If the script exceeds the available memory, the browser tab may restart or crash.
Please take this into account when designing your scripts, especially if a significant portion of your audience uses mobile devices. Test your configurators thoroughly on various devices.
This tutorial provides a glimpse into creating more advanced 3D product configurators for Shopify by combining Bitbybit's parametric capabilities with Shopify's variants and custom Liquid UI elements.