included tutorials for STEP to GLTF and Changing Material Variants

matas-bitbybit-dev · matas-bitbybit-dev · commit eca32b9dc397 · 2025-08-27T11:58:39.000+03:00
diff --git a/docs/learn/3d-bits/3d-assets/preparing-gltf.md b/docs/learn/3d-bits/3d-assets/preparing-gltf.md
@@ -27,6 +27,20 @@ Not all CAD or BRep editors can export directly to GLTF. In many cases, you’ll
 
 When you do triangulate, you’ll usually be able to choose how dense the mesh will be. This is a crucial decision: fewer triangles mean the GPU can render your model much faster. The goal is to create low-poly models that still look good. Don’t expect a browser to smoothly handle millions of triangles - especially on older devices. Even high-end GPUs will struggle if you push them too far. Designing a configurator is a lot like designing a video game: performance matters just as much as visual quality. We go deeper into this mindset in [Configurators Are Games](./configurators-are-games.md).
 
+## Video Tutorial: STEP TO GLTF
+
+<div class="responsive-video-container">
+  <iframe 
+    width="560" 
+    height="315" 
+    src="https://www.youtube.com/embed/7mqd2FLlpcU" 
+    title="From STEP to GLTF - Convert PRO CAD 3D Models For 3D Bits Shopify App" 
+    frameborder="0" 
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen>
+  </iframe>
+</div>
+
 # Editing Triangulated Models
 
 Once you have a triangulated model, you’ll probably need to make adjustments. We recommend Blender for this. It’s free, open source, and maintained by some of the most experienced 3D professionals in the industry. Of course, it’s not the only option - commercial tools like 3ds Max can also handle triangulated models perfectly well.
diff --git a/docs/learn/3d-bits/tutorials/changing-materials.md b/docs/learn/3d-bits/tutorials/changing-materials.md
@@ -0,0 +1,48 @@
+---
+sidebar_position: 3
+title: "Change Materials, Colours and Textures of 3D Shopify Products"
+sidebar_label: Changing Materials
+description: Change materials, colors, and textures of your 3D products on Shopify with 3D Bits app - in 41 minutes you’ll learn everything you need to know!
+tags: [shopify, 3d-bits]
+---
+
+# Change Materials, Colours, Textures of 3D Shopify Products
+
+## Blender to 3D Bits Workflow Explained
+
+In this step-by-step tutorial, you’ll discover how to create, assign, and save material variants in Blender, then export them with the help of the [KHR_materials_variants](https://www.khronos.org/blog/streamlining-3d-commerce-with-material-variant-support-in-gltf-assets) extension into a GLTF file using the official [Blender](https://www.blender.org/) add-on from the [Khronos Group](https://www.khronos.org/3dcommerce/). From there, we’ll guide you through the process of importing these material variants directly into the 3D Bits app for Shopify and mapping them to your product page inputs for a seamless shopping experience.
+
+## Video Tutorial
+
+<div class="responsive-video-container">
+  <iframe 
+    width="560" 
+    height="315" 
+    src="https://www.youtube.com/embed/s00GpQp5Qmg" 
+    title="Change Materials, Colors, And Textures Of 3D Products On Shopify With 3D Bits App" 
+    frameborder="0" 
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen>
+  </iframe>
+</div>
+
+With guidance from Matas Ubarevicius, you’ll also learn how to:
+
+With guidance from Matas Ubarevicius, you’ll also learn how to:
+
+- Set up your Shopify product & template using the BITBYBIT VIEWER theme app extension block.
+- Dynamically connect 3D Bits metafields with extension block settings inside your Shopify template.
+
+And that’s just the start! The most exciting part is using the 3D Bits Viewer Editor to fully customize your 3D product experience. You’ll learn how to:
+
+- Adjust GLTF asset scale for perfect display.
+- Assign material variants to Shopify variant values.
+- Change camera positions for the best viewing angles.
+- Apply skyboxes, backgrounds, and loading indicators.
+- Add dynamic lighting with shadows for realistic effects.
+- Save and copy your scene configuration directly to the Shopify product “3D Bits Scene Config” metafield.
+- Even add constant rotation to make your products stand out.
+
+By the end of this tutorial, you’ll have everything you need to create engaging, interactive 3D product pages that help your customers explore, customize, and fall in love with your products before they buy.
+
+Car 3D Model Credits: (c) 2015, Khronos Group, Khronos logo. (c) 2017, Khronos Group, 3D Commerce logo. Asset is CCBY 4.0, created by Eric Chadwick of Darmstadt Graphics Group GmbH, 2024. Original asset is public domain "FREE Concept Car 004" by [Unity Fan](https://sketchfab.com/3d-models/free-concept-car-004-public-domain-cc0-4cba124633eb494eadc3bb0c4660ad7e). Download and details here on [GitHub](https://github.com/KhronosGroup/glTF-Sample-Assets/tree/main/Models/CarConcept)
diff --git a/docs/learn/3d-bits/tutorials/preview-3d-scans.md b/docs/learn/3d-bits/tutorials/preview-3d-scans.md
@@ -1,7 +1,7 @@
 ---
 sidebar_position: 8
 title: "Tutorial: Using BITBYBIT PREVIEW with a 3D Scanned Product"
-sidebar_label: PREVIEW with 3D Scan
+sidebar_label: Preview with 3D Scan
 description: Learn how to use the BITBYBIT PREVIEW block in Shopify's "3D Bits" app to embed a Bitbybit project featuring a 3D scanned product onto your e-commerce store.
 slug: /shopify/tutorials/preview-3d-scan # Or adjust as needed
 tags: [shopify, 3d-bits]
diff --git a/docs/learn/3d-bits/tutorials/step-to-gltf.md b/docs/learn/3d-bits/tutorials/step-to-gltf.md
@@ -0,0 +1,83 @@
+---
+sidebar_position: 6
+title: "From STEP to GLTF - Convert PRO CAD 3D Models For 3D Bits Shopify App"
+sidebar_label: Preparing GLTF Assets
+description: Merchants often have product files created for manufacturing in professional CAD software such as FreeCAD, Fusion 360, CATIA, SolidWorks, Rhino, and others. But preparing these precise CAD models for web configurators is not straightforward.
+tags: [shopify, 3d-bits]
+---
+
+# FreeCAD → Blender → Khronos Compressor → 3D Bits App for Shopify
+
+## Learn how to prepare the models for web configurators
+
+Merchants often have product files created for manufacturing in professional CAD software such as FreeCAD, Fusion 360, CATIA, SolidWorks, Rhino, and others. But preparing these precise CAD models for web configurators is not straightforward.
+
+To achieve smooth performance and fast loading times, you need to:
+
+* Optimize tessellation to keep triangle counts low without losing detail.
+* Minimize the number of meshes - each extra mesh means an extra draw call, which can hurt frame rates.
+* Balance texture quality and file size so your models look great while loading quickly.
+
+That’s why it’s essential to choose an efficient workflow for converting STEP files into optimized, compressed GLTF models ready for the web.
+
+## Video Tutorial: STEP TO GLTF
+
+<div class="responsive-video-container">
+  <iframe 
+    width="560" 
+    height="315" 
+    src="https://www.youtube.com/embed/7mqd2FLlpcU" 
+    title="From STEP to GLTF - Convert PRO CAD 3D Models For 3D Bits Shopify App" 
+    frameborder="0" 
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen>
+  </iframe>
+</div>
+
+In this tutorial, Matas Ubarevicius walks you through the full process of converting BREP-based geometry into lightweight, high-quality meshes:
+
+1 - Start in FreeCAD – Import your STEP file, group parts by color, and tessellate them into meshes.
+2 - Merge meshes so each one represents a single material.
+3 - Export to PLY files and bring them into Blender.
+4 - Apply materials in Blender, then export the model as GLTF.
+5 - Compress your GLTF using the Khronos Compressor web tool.
+6 - Upload to Shopify and import it into the 3D Bits app for seamless store integration.
+
+By the end, you’ll have a streamlined, professional workflow for showcasing interactive 3D products in your online store—fast, optimized, and visually beautiful.
+
+Thanks to [Ironside Armour](https://ironsidearmour.com) for providing the example 3D model.
+
+[Python Macro For Selecting Objects By Colour](https://forum.freecad.org/viewtopic.php?p=733311&sid=b54256709987b58056037b42fab2ed73#p733311)   
+Author: Forum User Roy_043
+
+```python
+import FreeCAD as App
+import FreeCADGui as Gui
+
+def getShapeColor(obj):
+    if not hasattr(obj, "ViewObject"):
+        return None
+    if not hasattr(obj.ViewObject, "ShapeColor"):
+        return None
+    return obj.ViewObject.ShapeColor
+
+def selectByShapeColor():
+    doc = App.ActiveDocument
+    if doc is None:
+        App.Console.PrintWarning("There is no active document\n")
+        return
+    objs = Gui.Selection.getSelection()
+    if len(objs) != 1:
+        App.Console.PrintWarning("Select a single source object\n")
+        return
+    shape_col = getShapeColor(objs[0])
+    if shape_col is None:
+        App.Console.PrintWarning("Object does not have a ShapeColor\n")
+        return
+    objs = [obj for obj in doc.Objects if getShapeColor(obj) == shape_col]
+    Gui.Selection.clearSelection()
+    for obj in objs:
+        Gui.Selection.addSelection(obj)
+
+selectByShapeColor()
+```
diff --git a/docs/learn/3d-bits/tutorials/viewer-with-3d-scan.md b/docs/learn/3d-bits/tutorials/viewer-with-3d-scan.md
@@ -1,7 +1,7 @@
 ---
 sidebar_position: 4
 title: "Tutorial: Using BITBYBIT VIEWER with a 3D Scanned Product (Gaussian Splat)"
-sidebar_label: VIEWER with 3D Scan
+sidebar_label: Viewer with 3D Scan
 description: Learn how to use the BITBYBIT VIEWER block in Shopify's "3D Bits" app to display a 3D scanned product (Gaussian Splatting model) on your e-commerce store.
 tags: [shopify, 3d-bits]
 ---
