Skip to content

Commit c92fe98

Browse files
matas-bitbybit-devmatas-bitbybit-dev
committed
fixed broken links, added new docs for chamfers
1 parent 2f6e6b2 commit c92fe98

12 files changed

Lines changed: 179 additions & 10 deletions

‎docs/learn/3d-bits/tutorials/preview-3d-scans.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ tags: [shopify, 3d-bits]
1111

1212
## What's Inside This Tutorial?
1313

14-
The **BITBYBIT PREVIEW** theme app extension block, part of our "3D Bits" Shopify app, allows you to embed **publicly available Bitbybit projects** directly onto your Shopify product pages. While these embedded 3D experiences generally cannot be configured by Shopify product variants in the same dynamic way as with the [RUNNER](/shopify/3d-bits-app/bitbybit-runner) or [VIEWER](/shopify/3d-bits-app/bitbybit-viewer) (with Scene Config JSON) blocks, they are excellent for showcasing rich, unique, and interactive 3D product presentations, including those featuring **3D scanned products**.
14+
The **BITBYBIT PREVIEW** theme app extension block, part of our "3D Bits" Shopify app, allows you to embed **publicly available Bitbybit projects** directly onto your Shopify product pages. While these embedded 3D experiences generally cannot be configured by Shopify product variants in the same dynamic way as with the [RUNNER](/learn/3d-bits/theme-app-extensions/bitbybit-runner) or [VIEWER](/learn/3d-bits/theme-app-extensions/bitbybit-viewer) (with Scene Config JSON) blocks, they are excellent for showcasing rich, unique, and interactive 3D product presentations, including those featuring **3D scanned products**.
1515

1616
This tutorial, led by Matas Ubarevičius, will guide you through:
1717
* Setting up a Shopify product template to use the BITBYBIT PREVIEW block.

‎docs/learn/3d-bits/tutorials/product-3d-bike-scan.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ We will cover:
1616
* **3D Scanning the Bike:** Tips and considerations for capturing the bike.
1717
* **Editing and Processing the Scan:** Basic steps to refine the raw 3D scan data.
1818
* **Uploading to Shopify CDN:** How to get your processed 3D model onto Shopify's Content Delivery Network.
19-
* **Exposing as a Product with "3D Bits":** Using our "3D Bits" app (likely the [BITBYBIT VIEWER block](/shopify/3d-bits-app/bitbybit-viewer)) to display the 3D scan on your product page.
19+
* **Exposing as a Product with "3D Bits":** Using our "3D Bits" app (likely the [BITBYBIT VIEWER block](/learn/3d-bits/theme-app-extensions/bitbybit-viewer)) to display the 3D scan on your product page.
2020

2121
By the end of this tutorial, you'll be able to showcase a detailed, interactive 3D model of a bike (or similar product) in your Shopify store.
2222

‎docs/learn/3d-bits/tutorials/product-customizable-text.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ This tutorial focuses on creating a Shopify product that features **customizable
1818

1919
* Use **Shopify product variants** to allow customers to select different fonts for the 3D text.
2020
* Implement **custom Liquid line item inputs** to enable customers to enter their own text content and adjust properties like the text's height.
21-
* Integrate a Bitbybit Rete script (designed for generating 3D text) into your Shopify product page using the "3D Bits" app and the [BITBYBIT RUNNER block](/shopify/3d-bits-app/bitbybit-runner).
21+
* Integrate a Bitbybit Rete script (designed for generating 3D text) into your Shopify product page using the "3D Bits" app and the [BITBYBIT RUNNER block](/learn/3d-bits/theme-app-extensions/bitbybit-runner).
2222

2323
**View the Demo:**
2424
* Check out the live example on our [Demo Store: Text 3D Product Page](https://bitbybit-dev-3d-configurators.myshopify.com/products/industrial-part). (Note: The demo link might be for a generic "industrial part" but showcases the text functionality).
@@ -44,7 +44,7 @@ This tutorial focuses on creating a Shopify product that features **customizable
4444
## Key Configuration Steps
4545

4646
### Custom Liquid for Line Item Inputs
47-
Similar to the [Palm Table tutorial](/shopify/tutorials/product-palm-table), this example utilizes a custom Liquid form to gather specific inputs from the customer (the text content and its height) as line item properties.
47+
Similar to the [Palm Table tutorial](/learn/3d-bits/tutorials/product-palm-table), this example utilizes a custom Liquid form to gather specific inputs from the customer (the text content and its height) as line item properties.
4848

4949
* **Metafield Setup:** If you haven't already, you'll need to set up a product metafield with the key `custom.liquid-custom-line-items` to hold your Liquid form code. Please refer to the Palm Table tutorial or the video for detailed instructions on setting up this metafield.
5050
* **Liquid Form Snippet:**

‎docs/learn/code/common/occt/fillets/chamfer-circular-edges.mdx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
sidebar_position: 8
3+
title: "OCCT Chamfers: Applying to Circular and Curved Edges"
4+
sidebar_label: Chamfers on Curved Edges
5+
description: Learn how to apply OCCT chamfers to non-linear edges, such as circular or elliptical edges (e.g., around a hole), in Bitbybit using Rete, Blockly, and TypeScript.
6+
tags: [occt]
7+
---
8+
9+
import BitByBitRenderCanvas from '@site/src/components/BitByBitRenderCanvas';
10+
11+
# OCCT Chamfers: Applying to Circular and Curved Edges
12+
13+
Chamfering operations in OpenCascade Technology (OCCT) are not restricted to straight, linear edges. They can also be successfully applied to **non-linear edges**, including:
14+
* Circular edges (e.g., the edge of a cylindrical hole or a rounded boss).
15+
* Elliptical edges.
16+
* Even more complex free-form (spline-based) edges.
17+
18+
This capability allows for the creation of beveled transitions around curved features, which is common in mechanical design and for aesthetic detailing.
19+
20+
![A 3D solid box with a cylindrical hole, where the circular edges of the hole have been chamfered, creating a beveled entry.](https://ik.imagekit.io/bitbybit/app/assets/start/general/editor-categories/chamfer-with-circular-hole.jpeg "Circular edge chamfer on a 3D solid")
21+
*Circular edge chamfer on a 3D solid.*
22+
23+
The examples below demonstrate creating a box with a cylindrical hole through its middle. Then, a chamfer operation is applied to the circular edges formed by this hole.
24+
25+
**TypeScript Example: Chamfer Circular Edge of a Hole**
26+
<BitByBitRenderCanvas
27+
requireManualStart={true}
28+
script={{"script":"const start = async () => {\n\n const boxOpt = new Bit.Inputs.OCCT.BoxDto();\n boxOpt.width = 5;\n boxOpt.length = 8;\n boxOpt.height = 10;\n const box = await bitbybit.occt.shapes.solid.createBox(boxOpt);\n const cylinderOpt = new Bit.Inputs.OCCT.CylinderDto();\n cylinderOpt.direction = [1, 0, 0];\n cylinderOpt.center = [-5, 0, 0];\n cylinderOpt.radius = 2;\n cylinderOpt.height = 10;\n\n const cylinder = await bitbybit.occt.shapes.solid.createCylinder(cylinderOpt)\n\n const difference = await bitbybit.occt.booleans.difference({\n shape: box,\n shapes: [cylinder],\n keepEdges: false\n });\n\n const chamfered = await bitbybit.occt.fillets.chamferEdges({\n shape: difference,\n distance: 0.4\n })\n\n bitbybit.draw.drawAnyAsync({\n entity: chamfered,\n });\n}\n\nstart();\n","version":"0.20.3","type":"typescript"}}
29+
title="Chamfer Circular Edge"
30+
/>
31+
32+
**Blockly Example: Chamfer Circular Edge of a Hole**
33+
<BitByBitRenderCanvas
34+
requireManualStart={true}
35+
script={{"script":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable id=\"k(XkWbWdxnl0%TB_4u9_\">differenceSolid</variable></variables><block type=\"variables_set\" id=\"}C{{n^m.?vXLuU(.~7mY\" x=\"-525\" y=\"-1335\"><field name=\"VAR\" id=\"k(XkWbWdxnl0%TB_4u9_\">differenceSolid</field><value name=\"VALUE\"><block type=\"bitbybit.occt.booleans.difference\" id=\"I,Im[%,@!wAU5T-h?x=%\"><value name=\"Shape\"><block type=\"bitbybit.occt.shapes.solid.createBox\" id=\"mQ8NHOuARgLyhBk6}g^s\"><value name=\"Width\"><block type=\"math_number\" id=\"7fG@;W/:Vts$zSO}4j(]\"><field name=\"NUM\">5</field></block></value><value name=\"Length\"><block type=\"math_number\" id=\"LCj)(O6k1)^yPkJEoMzD\"><field name=\"NUM\">8</field></block></value><value name=\"Height\"><block type=\"math_number\" id=\"?-!Ip3I^G@=fxbcl4Iu|\"><field name=\"NUM\">10</field></block></value><value name=\"Center\"><block type=\"bitbybit.point.pointXYZ\" id=\"}!.!!0$]TL43CwavkTh*\"><value name=\"X\"><block type=\"math_number\" id=\"z5z_A~D,9e0jpC)1{_g:\"><field name=\"NUM\">0</field></block></value><value name=\"Y\"><block type=\"math_number\" id=\"5=3R#MG7#!Q8TG1[{=P`\"><field name=\"NUM\">0</field></block></value><value name=\"Z\"><block type=\"math_number\" id=\"y*}sZo/[)Qb/ZUE?u!ep\"><field name=\"NUM\">0</field></block></value></block></value></block></value><value name=\"Shapes\"><block type=\"lists_create_with\" id=\"(h9J`BPx^V,0XTyq=PnP\"><mutation items=\"1\"></mutation><value name=\"ADD0\"><block type=\"bitbybit.occt.shapes.solid.createCylinder\" id=\"zCXY$3~6]yn!t?2NHYO0\"><value name=\"Radius\"><block type=\"math_number\" id=\"Gf/92+]J{]Z=%hjB)bF6\"><field name=\"NUM\">2</field></block></value><value name=\"Height\"><block type=\"math_number\" id=\"t??PSPjr1RL0+IIV*~fB\"><field name=\"NUM\">10</field></block></value><value name=\"Center\"><block type=\"bitbybit.point.pointXYZ\" id=\"GR4I^-d3-$v7{E+qreOr\"><value name=\"X\"><block type=\"math_number\" id=\"%%gSbrNZIFNH~maeVi-a\"><field name=\"NUM\">-5</field></block></value><value name=\"Y\"><block type=\"math_number\" id=\"*dZ2.kWamII0yD^(#{Pa\"><field name=\"NUM\">0</field></block></value><value name=\"Z\"><block type=\"math_number\" id=\"mIk*_{8$CQ=,1mQ.Z*zX\"><field name=\"NUM\">0</field></block></value></block></value><value name=\"Direction\"><block type=\"bitbybit.vector.vectorXYZ\" id=\"!XCU9xf(N!O53i#nAlEQ\"><value name=\"X\"><block type=\"math_number\" id=\"IMsq+E`6P@HN$;~8^lbZ\"><field name=\"NUM\">1</field></block></value><value name=\"Y\"><block type=\"math_number\" id=\"DG87Vv06K:Z/54Zb=ne~\"><field name=\"NUM\">0</field></block></value><value name=\"Z\"><block type=\"math_number\" id=\"~gn3U8iS+pqmQjZ}M8Sk\"><field name=\"NUM\">0</field></block></value></block></value></block></value></block></value><value name=\"KeepEdges\"><block type=\"logic_boolean\" id=\"N5$-DTnFC:`~|SD12Wkh\"><field name=\"BOOL\">FALSE</field></block></value></block></value><next><block type=\"bitbybit.draw.drawAnyAsyncNoReturn\" id=\"pF!Mww.[{,{0LvKi|wH}\"><value name=\"Entity\"><block type=\"bitbybit.occt.fillets.chamferEdges\" id=\"76A-4pZ@I:Hre1*8I/vU\"><value name=\"Shape\"><block type=\"variables_get\" id=\"ilHm@HD^.hYBK_|2#HXU\"><field name=\"VAR\" id=\"k(XkWbWdxnl0%TB_4u9_\">differenceSolid</field></block></value><value name=\"Distance\"><block type=\"math_number\" id=\"a7qb/Osu:a!%Jv23@FkJ\"><field name=\"NUM\">0.4</field></block></value></block></value></block></next></block></xml>","version":"0.20.3","type":"blockly"}}
36+
title="Chamfer Circular Edge"
37+
/>
38+
39+
**Rete Example: Chamfer Circular Edge of a Hole**
40+
<BitByBitRenderCanvas
41+
requireManualStart={true}
42+
script={{"script":"{\"id\":\"rete-v2-json\",\"nodes\":{\"465a6cff04eeb4c7\":{\"id\":\"465a6cff04eeb4c7\",\"name\":\"bitbybit.occt.fillets.chamferEdges\",\"customName\":\"chamfer edges\",\"async\":true,\"drawable\":true,\"data\":{\"genericNodeData\":{\"hide\":false,\"oneOnOne\":false,\"flatten\":0,\"forceExecution\":false},\"distance\":0.5},\"inputs\":{\"shape\":{\"connections\":[{\"node\":\"134db198c978e5a5\",\"output\":\"result\",\"data\":{}}]}},\"position\":[25.869618545988516,850.4317699140497]},\"b19bb772deab47ce\":{\"id\":\"b19bb772deab47ce\",\"name\":\"bitbybit.occt.shapes.solid.createCylinder\",\"customName\":\"cylinder\",\"async\":true,\"drawable\":true,\"data\":{\"genericNodeData\":{\"hide\":true,\"oneOnOne\":false,\"flatten\":0,\"forceExecution\":false},\"radius\":2,\"height\":8,\"center\":[0,0,0],\"direction\":[0,1,0],\"angle\":360,\"originOnCenter\":false},\"inputs\":{\"direction\":{\"connections\":[{\"node\":\"28b22e6329a3febd\",\"output\":\"result\",\"data\":{}}]},\"center\":{\"connections\":[{\"node\":\"36c94019c8ee49cf\",\"output\":\"result\",\"data\":{}}]}},\"position\":[-905.7708007163599,967.4837207911903]},\"28b22e6329a3febd\":{\"id\":\"28b22e6329a3febd\",\"name\":\"bitbybit.vector.vectorXYZ\",\"customName\":\"vector xyz\",\"async\":false,\"drawable\":true,\"data\":{\"genericNodeData\":{\"hide\":true,\"oneOnOne\":false,\"flatten\":0,\"forceExecution\":false},\"x\":1,\"y\":0,\"z\":0},\"inputs\":{},\"position\":[-1270.401024117951,1308.0223750907223]},\"3cc824a676577242\":{\"id\":\"3cc824a676577242\",\"name\":\"bitbybit.lists.createList\",\"customName\":\"create list\",\"data\":{},\"inputs\":{\"listElements\":{\"connections\":[{\"node\":\"b19bb772deab47ce\",\"output\":\"result\",\"data\":{}}]}},\"position\":[-548.0110127318145,1114.6413541651573]},\"134db198c978e5a5\":{\"id\":\"134db198c978e5a5\",\"name\":\"bitbybit.occt.booleans.difference\",\"customName\":\"difference\",\"async\":true,\"drawable\":true,\"data\":{\"genericNodeData\":{\"hide\":true,\"oneOnOne\":false,\"flatten\":0,\"forceExecution\":false},\"keepEdges\":false},\"inputs\":{\"shapes\":{\"connections\":[{\"node\":\"3cc824a676577242\",\"output\":\"list\",\"data\":{}}]},\"shape\":{\"connections\":[{\"node\":\"d3846c69e45faeee\",\"output\":\"result\",\"data\":{}}]}},\"position\":[-334.28492550210524,727.5800438660185]},\"d3846c69e45faeee\":{\"id\":\"d3846c69e45faeee\",\"name\":\"bitbybit.occt.shapes.solid.createBox\",\"customName\":\"box\",\"async\":true,\"drawable\":true,\"data\":{\"genericNodeData\":{\"hide\":true,\"oneOnOne\":false,\"flatten\":0,\"forceExecution\":false},\"width\":5,\"length\":8,\"height\":11,\"center\":[0,0,0],\"originOnCenter\":true},\"inputs\":{},\"position\":[-1099.250222686699,476.74125056103367]},\"36c94019c8ee49cf\":{\"id\":\"36c94019c8ee49cf\",\"name\":\"bitbybit.vector.vectorXYZ\",\"customName\":\"vector xyz\",\"async\":false,\"drawable\":true,\"data\":{\"genericNodeData\":{\"hide\":true,\"oneOnOne\":false,\"flatten\":0,\"forceExecution\":false},\"x\":-4,\"y\":0,\"z\":0},\"inputs\":{},\"position\":[-1295.6103092286526,922.9426725145504]}}}","version":"0.20.3","type":"rete"}}
43+
title="Chamfer Circular Edge"
44+
/>
45+
46+
Being able to chamfer curved edges is essential for achieving a wide range of design intents, from functional deburring of holes to specific aesthetic finishes on complex parts. The underlying principles of selecting edges (often by index if not chamfering all) and specifying chamfer distances remain similar to chamfering straight edges.

0 commit comments

Comments
 (0)