v0.20.14

docs/blog/2024-11-08-updated-bitbybit-runners.md

@@ -121,7 +121,7 @@ We are serving the Bitbybit Runners from the **JSDelivr CDN**. You can include t
     <script src="https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@<version-number-of-bitbybit>/runner/bitbybit-runner-lite-threejs.js"></script>
     ```
 
-**Note:** You should replace `<version-number-of-bitbybit>` with an actual version number (e.g., `0.20.13`). You can find all the official versions of Bitbybit.dev here:
+**Note:** You should replace `<version-number-of-bitbybit>` with an actual version number (e.g., `0.20.14`). You can find all the official versions of Bitbybit.dev here:
 ➡️ **[Bitbybit.dev GitHub Releases](https://github.com/bitbybit-dev/bitbybit/releases)**
 
 ### Examples of the Runners

docs/learn/3d-bits/theme-app-extensions/bitbybit-viewer.md

@@ -110,7 +110,7 @@ Save your JSON configurator as a file, upload it to Shopify CDN as a file. Copy
 
 While our Viewer Editor is the recommended way to create and manage the Scene Config JSON, you can also edit the JSON directly using any text editor. For a better editing experience with features like syntax highlighting and autocompletion (intellisense), we provide a JSON schema.
 
-*   **JSON Schema:** You can find the schema [here](https://app-store.bitbybit.dev/files/ecommerce/viewer-editor/viewer-scene-schema-v0.20.13.json). (Note: This schema link points to version `0.20.13`. The schema may be updated in the future, so ensure you refer to the latest version compatible with your "3D Bits" app version.)
+*   **JSON Schema:** You can find the schema [here](https://app-store.bitbybit.dev/files/ecommerce/viewer-editor/viewer-scene-schema-v0.20.14.json). (Note: This schema link points to version `0.20.14`. The schema may be updated in the future, so ensure you refer to the latest version compatible with your "3D Bits" app version.)
     Many modern code editors (like VS Code) can use this schema to provide validation and autocompletion as you edit the JSON.
 
 ## Video Tutorial: BITBYBIT VIEWER Block Setup

docs/learn/3d-bits/tutorials/bitbybit-viewer/settings.md

@@ -203,7 +203,7 @@ The system automatically detects if you're providing a URL (starting with `http:
 - For complex configurations, use a URL to an external JSON file - it keeps your theme settings cleaner and makes updates easier
 - Use the Viewer Editor to generate valid configurations
 - Test your scene configuration thoroughly before going live
-- The scene configuration follows a [JSON schema](https://app-store.bitbybit.dev/files/ecommerce/viewer-editor/viewer-scene-schema-v0.20.13.json) that defines all available options
+- The scene configuration follows a [JSON schema](https://app-store.bitbybit.dev/files/ecommerce/viewer-editor/viewer-scene-schema-v0.20.14.json) that defines all available options
 :::
 
 ---

docs/learn/3d-bits/tutorials/getting-started/common-settings.md

@@ -121,7 +121,7 @@ These settings are specific to RUNNER and APPS blocks:
 ### Runner CDN Link
 
 **Available in:** VIEWER, RUNNER  
-**Default:** `https://cdn.jsdelivr.net/gh/bitbybit-dev/[email protected].13/runner/bitbybit-runner-babylonjs.js`
+**Default:** `https://cdn.jsdelivr.net/gh/bitbybit-dev/[email protected].14/runner/bitbybit-runner-babylonjs.js`
 
 Specifies which version of the Bitbybit runner library to use. The runner is the core engine that loads and renders 3D content in your browser.
 
@@ -173,7 +173,7 @@ The URL follows this pattern:
 https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@{VERSION}/runner/bitbybit-runner-babylonjs.js
 ```
 
-Replace `{VERSION}` with the desired version number (e.g., `0.20.13`).
+Replace `{VERSION}` with the desired version number (e.g., `0.20.14`).
 
 **Self-Hosting on Shopify CDN:**
 

docs/learn/3d-bits/tutorials/videos-tutorials/product-laptop-holder.mdx

@@ -63,7 +63,7 @@ To save you time and provide a starting point, here is the embedded Bitbybit Typ
 
 <BitByBitRenderCanvas
   requireManualStart={true}
-  script={{"script":"Bit.mockBitbybitRunnerInputs({\n    \"Laptop Type\": \"MacBook Pro 16\",\n    \"Number Laptops\": \"3\",\n    \"Color\": \"Black\",\n});\nconst inputs = Bit.getBitbybitRunnerInputs();\n\nconst laptops: Laptop[] = []\n\nlet laptop: Laptop;\n\nswitch (inputs[\"Laptop Type\"]) {\n    case \"MacBook Pro 16\":\n        laptop = {\n            length: 1.63,\n            width: 35.8,\n            height: 24.6\n        };\n        break;\n    case \"MacBook Pro 14\":\n        laptop = {\n            length: 1.57,\n            width: 31.3,\n            height: 22.2\n        }\n        break;\n    case \"MacBook Air\":\n        laptop = {\n            length: 1.2,\n            width: 30.5,\n            height: 21.6\n        }\n        break;\n    default:\n        break;\n}\n\nlet flipColor = false;\nswitch (inputs[\"Color\"]) {\n    case \"Blue\":\n        flipColor = true;\n        break;\n    default:\n        break;\n}\n\nconsole.log(\"laptop \", laptop);\n\nconst nrLaptops = +inputs[\"Number Laptops\"];\n\nfor (let i = 0; i < nrLaptops; i++) {\n    laptops.push({ ...laptop });\n}\n\nconst whiteColor = \"#ffffff\";\nconst holderColor = \"#333333\";\n\nconst laptopLiftedHeight = 3;\nconst distanceBetweenLaptops = 1.7;\nconst exportSTEP = false;\n\nbitbybit.babylon.scene.backgroundColour({ colour: \"#bbbbbb\" });\n\nconst pointLightConf = new Bit.Inputs.BabylonScene.PointLightDto();\npointLightConf.position = [-15, 20, -5];\npointLightConf.intensity = 8000;\npointLightConf.diffuse = \"#3333ff\";\npointLightConf.radius = 0;\nbitbybit.babylon.scene.drawPointLight(pointLightConf);\n\nconst controlPoints = [\n    [-12.5, 0, 0],\n    [-8, 13, 0],\n    [-4, 11, 0],\n    [-2, 6, 0],\n    [2, 6, 0],\n    [4, 14, 0],\n    [8, 17, 0],\n    [12.5, 0, 0]\n] as Bit.Inputs.Base.Point3[];\n\nlet laptopStand;\nlet laptopStandMesh;\n\nconst laptopsFilletsMesh = [];\n\nasync function start() {\n    const ground = await bitbybit.occt.shapes.face.createCircleFace({ center: [0, 0, 0], direction: [0, 1, 0], radius: 75, });\n    const groundOptions = new Bit.Inputs.Draw.DrawOcctShapeOptions();\n    groundOptions.faceColour = whiteColor;\n    groundOptions.drawEdges = false;\n    await bitbybit.draw.drawAnyAsync({ entity: ground, options: groundOptions });\n\n    const renderLaptops = async (laptops) => {\n\n        laptops.forEach(laptop => {\n            laptop.center = [0, laptop.height / 2 + laptopLiftedHeight, 0] as Bit.Inputs.Base.Point3;\n        });\n\n        let laptopFillets = [];\n        let totalDistance = 0;\n        let previousLaptopLength = 0;\n\n        laptops.forEach(async (laptop, index) => {\n            totalDistance += distanceBetweenLaptops + laptop.length / 2 + previousLaptopLength / 2;\n            previousLaptopLength = laptop.length;\n            laptop.center[2] = totalDistance;\n            const laptopBaseModel = await bitbybit.occt.shapes.solid.createBox({\n                width: laptop.width,\n                length: laptop.length,\n                height: laptop.height,\n                center: laptop.center\n            });\n            const laptopFillet = await bitbybit.occt.fillets.filletEdges({ shape: laptopBaseModel, indexes: undefined, radius: 0.2 });\n            laptopFillets.push(laptopFillet);\n\n            const laptopVisModel = await bitbybit.occt.shapes.solid.createBox({\n                width: laptop.width,\n                length: laptop.length - 0.01,\n                height: laptop.height,\n                center: laptop.center\n            });\n            const laptopVisFillet = await bitbybit.occt.fillets.filletEdges({ shape: laptopVisModel, indexes: undefined, radius: 0.2 });\n            laptopFillets.push(laptopFillet);\n\n            const di = new Bit.Inputs.Draw.DrawOcctShapeOptions();\n\n            di.faceOpacity = 0.2;\n            di.edgeWidth = 5;\n            di.edgeOpacity = 0.6;\n            di.edgeColour = whiteColor;\n            di.faceColour = whiteColor;\n            const laptopFilletMesh = await bitbybit.draw.drawAnyAsync({ entity: laptopVisFillet, options: di });\n            laptopsFilletsMesh.push(laptopFilletMesh);\n        })\n\n        const polygonWire = await bitbybit.occt.shapes.wire.createPolygonWire({\n            points: controlPoints\n        });\n        const extrusion = await bitbybit.occt.operations.extrude({\n            shape: polygonWire, direction: [0, 0, totalDistance += distanceBetweenLaptops + previousLaptopLength / 2]\n        });\n        const laptopStandFillet = await bitbybit.occt.fillets.filletEdges({ shape: extrusion, indexes: undefined, radius: 1 });\n        const laptopStandThick = await bitbybit.occt.operations.makeThickSolidSimple({ shape: laptopStandFillet, offset: -0.5 });\n\n        laptopStand = await bitbybit.occt.booleans.difference({ shape: laptopStandThick, shapes: laptopFillets, keepEdges: false });\n        const li = new Bit.Inputs.OCCT.DrawShapeDto(laptopStand);\n        li.faceOpacity = 1;\n        if (flipColor) {\n            li.faceColour = \"#0000ff\";\n            li.edgeColour = whiteColor;\n        } else {\n            li.faceColour = holderColor;\n            li.edgeColour = whiteColor;\n        }\n        li.edgeWidth = 5;\n        laptopStandMesh = await bitbybit.draw.drawAnyAsync({ entity: laptopStand, options: li });\n        const laptopsMeshes = await Promise.all(laptopsFilletsMesh);\n        return [laptopStandMesh, ...laptopsMeshes];\n    }\n\n    const meshes = await renderLaptops(laptops);\n    return { meshes };\n}\n\nclass Laptop {\n    width: number;\n    length: number;\n    height: number;\n    center?: Bit.Inputs.Base.Point3;\n}\n\nBit.setBitbybitRunnerResult(start());","version":"0.20.13","type":"typescript"}}
+  script={{"script":"Bit.mockBitbybitRunnerInputs({\n    \"Laptop Type\": \"MacBook Pro 16\",\n    \"Number Laptops\": \"3\",\n    \"Color\": \"Black\",\n});\nconst inputs = Bit.getBitbybitRunnerInputs();\n\nconst laptops: Laptop[] = []\n\nlet laptop: Laptop;\n\nswitch (inputs[\"Laptop Type\"]) {\n    case \"MacBook Pro 16\":\n        laptop = {\n            length: 1.63,\n            width: 35.8,\n            height: 24.6\n        };\n        break;\n    case \"MacBook Pro 14\":\n        laptop = {\n            length: 1.57,\n            width: 31.3,\n            height: 22.2\n        }\n        break;\n    case \"MacBook Air\":\n        laptop = {\n            length: 1.2,\n            width: 30.5,\n            height: 21.6\n        }\n        break;\n    default:\n        break;\n}\n\nlet flipColor = false;\nswitch (inputs[\"Color\"]) {\n    case \"Blue\":\n        flipColor = true;\n        break;\n    default:\n        break;\n}\n\nconsole.log(\"laptop \", laptop);\n\nconst nrLaptops = +inputs[\"Number Laptops\"];\n\nfor (let i = 0; i < nrLaptops; i++) {\n    laptops.push({ ...laptop });\n}\n\nconst whiteColor = \"#ffffff\";\nconst holderColor = \"#333333\";\n\nconst laptopLiftedHeight = 3;\nconst distanceBetweenLaptops = 1.7;\nconst exportSTEP = false;\n\nbitbybit.babylon.scene.backgroundColour({ colour: \"#bbbbbb\" });\n\nconst pointLightConf = new Bit.Inputs.BabylonScene.PointLightDto();\npointLightConf.position = [-15, 20, -5];\npointLightConf.intensity = 8000;\npointLightConf.diffuse = \"#3333ff\";\npointLightConf.radius = 0;\nbitbybit.babylon.scene.drawPointLight(pointLightConf);\n\nconst controlPoints = [\n    [-12.5, 0, 0],\n    [-8, 13, 0],\n    [-4, 11, 0],\n    [-2, 6, 0],\n    [2, 6, 0],\n    [4, 14, 0],\n    [8, 17, 0],\n    [12.5, 0, 0]\n] as Bit.Inputs.Base.Point3[];\n\nlet laptopStand;\nlet laptopStandMesh;\n\nconst laptopsFilletsMesh = [];\n\nasync function start() {\n    const ground = await bitbybit.occt.shapes.face.createCircleFace({ center: [0, 0, 0], direction: [0, 1, 0], radius: 75, });\n    const groundOptions = new Bit.Inputs.Draw.DrawOcctShapeOptions();\n    groundOptions.faceColour = whiteColor;\n    groundOptions.drawEdges = false;\n    await bitbybit.draw.drawAnyAsync({ entity: ground, options: groundOptions });\n\n    const renderLaptops = async (laptops) => {\n\n        laptops.forEach(laptop => {\n            laptop.center = [0, laptop.height / 2 + laptopLiftedHeight, 0] as Bit.Inputs.Base.Point3;\n        });\n\n        let laptopFillets = [];\n        let totalDistance = 0;\n        let previousLaptopLength = 0;\n\n        laptops.forEach(async (laptop, index) => {\n            totalDistance += distanceBetweenLaptops + laptop.length / 2 + previousLaptopLength / 2;\n            previousLaptopLength = laptop.length;\n            laptop.center[2] = totalDistance;\n            const laptopBaseModel = await bitbybit.occt.shapes.solid.createBox({\n                width: laptop.width,\n                length: laptop.length,\n                height: laptop.height,\n                center: laptop.center\n            });\n            const laptopFillet = await bitbybit.occt.fillets.filletEdges({ shape: laptopBaseModel, indexes: undefined, radius: 0.2 });\n            laptopFillets.push(laptopFillet);\n\n            const laptopVisModel = await bitbybit.occt.shapes.solid.createBox({\n                width: laptop.width,\n                length: laptop.length - 0.01,\n                height: laptop.height,\n                center: laptop.center\n            });\n            const laptopVisFillet = await bitbybit.occt.fillets.filletEdges({ shape: laptopVisModel, indexes: undefined, radius: 0.2 });\n            laptopFillets.push(laptopFillet);\n\n            const di = new Bit.Inputs.Draw.DrawOcctShapeOptions();\n\n            di.faceOpacity = 0.2;\n            di.edgeWidth = 5;\n            di.edgeOpacity = 0.6;\n            di.edgeColour = whiteColor;\n            di.faceColour = whiteColor;\n            const laptopFilletMesh = await bitbybit.draw.drawAnyAsync({ entity: laptopVisFillet, options: di });\n            laptopsFilletsMesh.push(laptopFilletMesh);\n        })\n\n        const polygonWire = await bitbybit.occt.shapes.wire.createPolygonWire({\n            points: controlPoints\n        });\n        const extrusion = await bitbybit.occt.operations.extrude({\n            shape: polygonWire, direction: [0, 0, totalDistance += distanceBetweenLaptops + previousLaptopLength / 2]\n        });\n        const laptopStandFillet = await bitbybit.occt.fillets.filletEdges({ shape: extrusion, indexes: undefined, radius: 1 });\n        const laptopStandThick = await bitbybit.occt.operations.makeThickSolidSimple({ shape: laptopStandFillet, offset: -0.5 });\n\n        laptopStand = await bitbybit.occt.booleans.difference({ shape: laptopStandThick, shapes: laptopFillets, keepEdges: false });\n        const li = new Bit.Inputs.OCCT.DrawShapeDto(laptopStand);\n        li.faceOpacity = 1;\n        if (flipColor) {\n            li.faceColour = \"#0000ff\";\n            li.edgeColour = whiteColor;\n        } else {\n            li.faceColour = holderColor;\n            li.edgeColour = whiteColor;\n        }\n        li.edgeWidth = 5;\n        laptopStandMesh = await bitbybit.draw.drawAnyAsync({ entity: laptopStand, options: li });\n        const laptopsMeshes = await Promise.all(laptopsFilletsMesh);\n        return [laptopStandMesh, ...laptopsMeshes];\n    }\n\n    const meshes = await renderLaptops(laptops);\n    return { meshes };\n}\n\nclass Laptop {\n    width: number;\n    length: number;\n    height: number;\n    center?: Bit.Inputs.Base.Point3;\n}\n\nBit.setBitbybitRunnerResult(start());","version":"0.20.14","type":"typescript"}}
   title="Bitbybit Rete Editor - 3D Laptop Holder"
   description="3D Laptop holder configurator"
 />