Merge pull request #88 from bitbybit-dev/develop

v0.20.6

Author: matas-bitbybit-dev

README.md

@@ -12,15 +12,18 @@ Essential introduction by Matas
 
 ## SUPPORT THE MISSION
 Best way to support us - [Silver or Gold plan subscription](https://bitbybit.dev/auth/pick-plan)    
-Buy unique products from our [Crafts shop](https://crafts.bitbybit.dev) all designed with Bitbybit algorithms       
 Check out [3D Bits app for Shopify](https://apps.shopify.com/3d-bits-1) also used in our Crafts shop   
+Buy unique products from our [Crafts shop](https://crafts.bitbybit.dev) all designed with Bitbybit algorithms       
 
 Your contributions allow this project to exist.
 
-## HISTORY
-
-This library was previously UI dependant and was heaviy intertwined with BabylonJS game engine. It is now decoupled from our editors to ensure protection of our corporate identity and cloud services. BabylonJS layer is now also separated into special package @bitbybit-dev/babylonjs - this will cause the breaking change in v0.18.0. If you are using the version prior to v0.18.0 and depend on the @bitbybit-dev/core package, please consider updating to use @bitbybit-dev/babylonjs NPM package. @bitbybit-dev/core is now game engine independent layer.
-
+## Important Topics
+[Getting Started With Bitbybit Platform](https://learn.bitbybit.dev/learn/getting-started/overview)
+[Integrate With ThreeJS](https://learn.bitbybit.dev/learn/npm-packages/threejs)
+[Integrate With BabylonJS](https://learn.bitbybit.dev/learn/npm-packages/babylonjs)
+[Bitbybit Runners](https://learn.bitbybit.dev/learn/runners)
+[Bitbybit Blog](https://learn.bitbybit.dev/blog)
+[3D Bits App For Shopify](https://learn.bitbybit.dev/learn/3d-bits/intro)
 
 ## Github
 https://github.com/bitbybit-dev/bitbybit  

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.5`). 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.6`). 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/docusaurus.config.ts

@@ -14,7 +14,8 @@ const config: Config = {
     // Set the /<baseUrl>/ pathname under which your site is served
     // For GitHub pages deployment, it is often '/<projectName>/'
     baseUrl: "/",
-
+    trailingSlash: false,
+    
     // GitHub pages deployment config.
     // If you aren't using GitHub pages, you don't need these.
     organizationName: "Bit by bit developers", // Usually your GitHub org/user name.

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.

docs/learn/3d-bits/intro.md renamed to docs/learn/3d-bits/intro.mdx

@@ -16,6 +16,14 @@ tags: [shopify, 3d-bits]
 *   Visit our **[Demo Store](https://bitbybit-dev-3d-configurators.myshopify.com)**
 *   Use password: `3d-bits-demo`
 
+<div style={{textAlign: 'left', margin: '2rem 0'}}>
+  <h2>
+    <a href="https://apps.shopify.com/3d-bits-1" target="_blank">
+      Install 3D Bits from Shopify App Store
+    </a>
+  </h2>
+</div>
+
 ## Why Use 3D Bits?
 
 Traditional online stores use static images, but modern shoppers want to see products from every angle and try out different options. 3D Bits makes this possible by letting you build interactive 3D experiences for your products—no advanced coding required.
@@ -24,7 +32,7 @@ Traditional online stores use static images, but modern shoppers want to see pro
   <iframe 
     width="560" 
     height="315" 
-    src="https://www.youtube.com/embed/UwIEYWxlGQ0?si=ZtLRjdJ8t2DXjdjl" 
+    src="https://www.youtube.com/embed/y868HEQ8-lQ" 
     title="3D Bits App For Shopify Demo" 
     frameborder="0" 
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 

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

@@ -105,7 +105,7 @@ Here's a glimpse of how the Viewer Editor looks within the "3D Bits" app environ
 
 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-2.json). (Note: This schema link points to version `0.20.2`. 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-5.json). (Note: This schema link points to version `0.20.6`. 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/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)

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]