Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/blog/2024-11-08-updated-bitbybit-runners.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.7`). 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.8`). 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
Expand Down
2 changes: 1 addition & 1 deletion docs/learn/3d-bits/theme-app-extensions/bitbybit-viewer.md
Original file line number Diff line number Diff line change
Expand Up @@ -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://ik.imagekit.io/bitbybit/app/assets/start/shopify/viewer-scene-config-schema-0-20-6.json). (Note: This schema link points to version `0.20.7`. 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://ik.imagekit.io/bitbybit/app/assets/start/shopify/viewer-scene-config-schema-0-20-6.json). (Note: This schema link points to version `0.20.8`. 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
Expand Down
2 changes: 1 addition & 1 deletion docs/learn/3d-bits/tutorials/product-customizable-text.mdx

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/learn/3d-bits/tutorials/product-laptop-holder.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.7","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.8","type":"typescript"}}
title="Bitbybit Rete Editor - 3D Laptop Holder"
description="3D Laptop holder configurator"
/>
Expand Down
2 changes: 1 addition & 1 deletion docs/learn/3d-bits/tutorials/product-palm-table.mdx

Large diffs are not rendered by default.

Loading