iJewel3D

https://docs.ijewel3d.com
Admin
iJewel3D is a realistic 3D visualization platform for luxury products that enables uploading,...
Tokens:32,230
Snippets:359
Trust Score:6.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Project Dependencies

Source: https://docs.ijewel3d.com/viewer/connect-to-drive.html

Run this command in your project's root directory to install all listed dependencies.

```bash
npm install
```

--------------------------------

### Start Local File Server

Source: https://docs.ijewel3d.com/integrations/rhino-plugin-integration.html

Initializes and starts a local HTTP listener on a specified port to serve 3D model data to web clients. Ensures the port is not already in use before starting.

```csharp
protected void StartFileServer()
{
    if (IsPortInUse(Port)) return;
    
    _listener = new HttpListener();
    _listener.Prefixes.Add($"http://localhost:{Port}/");
    _listener.Start();
    
    _serverThread = new Thread(() => 
        ServerUtility.ServerThreadStart(_listener, _cancellationTokenSource.Token));
    _serverThread.Start();
}
```

--------------------------------

### Apply Materials via URL Examples

Source: https://docs.ijewel3d.com/viewer/tutorial-embed-drive.html

Demonstrates how to apply specific materials to a 3D model when it loads by appending query or hash parameters to the viewer URL. These examples show different material keys and values.

```url
https://ijewel3d.com/drive/files/{MODEL_ID}/embedded?Metal=Gold
```

```url
https://ijewel3d.com/drive/files/{MODEL_ID}/embedded#?Band=Rose-Gold&Gem=Ruby
```

```url
https://ijewel.design/embedded?slug=d8c22bf&Metal=Gold
```

--------------------------------

### Setup AR Buttons

Source: https://docs.ijewel3d.com/tryon/demo.html

Configure buttons to manage AR mode, including starting AR, flipping cameras, and saving images. Ensure the AR mode is not already running before starting.

```javascript
const startAr = controls.querySelector('#start-ar')
const flipCamera = controls.querySelector('#flip-camera')
const saveImage = controls.querySelector('#save-image')
startAr.style.display = 'block'
flipCamera.style.display = 'none'
saveImage.style.display = 'none'
startAr.onclick = ()=>{
    !tryon.running && tryon.start()
    startAr.style.display = 'none'
    flipCamera.style.display = 'block'
    saveImage.style.display = 'block'
}
flipCamera.onclick = ()=>tryon.flipCamera()
saveImage.onclick = ()=>tryon.saveImage()
```

--------------------------------

### Example URL for Advanced Template v2

Source: https://docs.ijewel3d.com/ring-configurator/using-ring-configurator.html

This example demonstrates how to load the Advanced Template v2 with specific file ID and instance name for real-time rendering of your ring configurator data.

```html
https://ijewel3d.github.io/iJewelTemplates/ringconfigurator/advanced/template-v2.html?fileId=abc123&instanceName=drive
```

--------------------------------

### Start and Stop AR Mode

Source: https://docs.ijewel3d.com/tryon/demo.html

Use these methods to control the AR experience. The start method requires user interaction for camera permissions.

```javascript
const tryon = viewer.getPlugin(RingTryonPlugin);
// to start. This will prompt the user for camera access 
tryon.start();
// to stop
tryon.stop();
```

--------------------------------

### Basic Self-Hosted Ring Configurator Setup

Source: https://docs.ijewel3d.com/ring-configurator/using-ring-configurator.html

Minimal HTML structure for a self-hosted ring configurator. This includes basic styling, a viewer div, a controls div, and loading the iJewel Viewer library. Remember to replace 'YOUR_FILE_ID' and 'YOUR_INSTANCE' with your actual values.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ring Configurator</title>
    <style>
        body { font-family: sans-serif; display: flex; height: 100vh; margin: 0; }
        #viewer { flex: 2; }
        #controls { flex: 1; padding: 20px; overflow-y: auto; }
        .group { margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
        button { margin: 5px; padding: 8px; cursor: pointer; }
        button.active { background: #000; color: #fff; }
    </style>
</head>
<body>
    <div id="viewer"></div>
    <div id="controls"><h2>Controls</h2></div>

    <!-- Load iJewel Viewer -->
    <script src="https://releases.ijewel3d.com/libs/mini-viewer/0.5.10/bundle.iife.js"></script>
    
    <script>
        // ============ CONFIGURATION ============
        const CONFIG = { 
            fileId: 'YOUR_FILE_ID',      // Replace with your File ID
            instance: 'YOUR_INSTANCE'     // Replace with your instance name
        };
        
        let viewer, ringConfigurator, materialPlugin;
        const ui = document.getElementById('controls');

        // Initialize viewer
        ijewelViewer.loadModelById(CONFIG.fileId, CONFIG.instance, document.getElementById('viewer'), {
            showConfigurator: false,
            showCard: false,
        });

        // Wait for viewer to be ready
        window.addEventListener('ijewel-viewer-ready', ({ detail }) => {
            viewer = detail.viewer;
            ringConfigurator = viewer.getPluginByType('RingConfigurator');
            materialPlugin = viewer.getPluginByType('MaterialConfiguratorPlugin');
            
            // Re-render UI when components or materials change
            if (ringConfigurator) ringConfigurator.addEventListener('componentProcessed', renderUI);
            if (materialPlugin) materialPlugin.addEventListener('refreshUi', renderUI);
            
            renderUI();
        });

        function renderUI() {
            ui.innerHTML = '<h2>Controls</h2>';
            renderComponents();
            renderMaterials();
        }

        // Render ring components (Heads, Shanks, etc.)
        function renderComponents() {
            if (!ringConfigurator?.components) return;
            
            ringConfigurator.components.forEach((component) => {
                if (!component.visible) return;
                
                const div = document.createElement('div');
                div.className = 'group';
                div.innerHTML = `<h3>${component.name}</h3>`;
                
                component.variations.forEach((variation, index) => {
                    const btn = document.createElement('button');
                    btn.textContent = variation.name || variation.title || `Variation ${index}`;
                    
                    if (index === component.selectedIndex) btn.className = 'active';

```

--------------------------------

### Initialize Viewer with Standalone Model

Source: https://docs.ijewel3d.com/viewer/introduction.html

Load a standalone 3D model directly into the viewer. This example uses a specific GLB file and sets showCard to false. It also includes an event listener for when the viewer is ready.

```javascript
const model = "https://playground.ijewel3d.com/sample-models/Spring.glb";

new ijewelViewer.Viewer(document.getElementById("viewer-root")
  ,{modelUrl : model} //project
  ,{showCard:false} // viewer options
);

window.addEventListener("webgi-viewer-ready", async (ev) => {
  console.log("ready");
  const viewer = ev.detail.viewer;
});
```

--------------------------------

### Core Command Workflow in Rhino Plugin

Source: https://docs.ijewel3d.com/integrations/rhino-plugin-integration.html

Executes the main command logic, including checking internet connectivity, starting the file server, exporting the model, and launching the iJewel Viewer.

```csharp
protected override Result RunCommand(RhinoDoc doc, RunMode mode) {
    try {
        RhinoApp.WriteLine("Checking internet connectivity...");

        if (!CheckInternetConnectivity()) {
            RhinoApp.WriteLine("Error: No internet connection detected.");
            ShowNoInternetDialog();
            return Result.Failure;
        }

        RhinoApp.WriteLine("Internet connection verified.");
        RhinoApp.WriteLine("Starting IJewelViewer...");

        // Only start server if one isn't already running
        StartFileServer();

        RhinoApp.WriteLine("Exporting model...");
        ExportModel(doc);

        string uri = "https://ijewel.design/rhinoceros";

        if (Rhino.Runtime.HostUtils.RunningOnOSX) {
            if (!BrowserLauncher.LaunchBrowserInMac(uri)) {
                //launch webview if none of the supported browsers are available on mac
                var webViewForm = new WebViewForm(uri);
                webViewForm.Show();
            } 
        }
        else {
            //use webview directly on windows
            var webViewForm = new WebViewForm(uri);
            webViewForm.Show();
        }

        return Result.Success;
    }
    catch (Exception ex) {
        RhinoApp.WriteLine($"Error in RunCommand: {ex.Message}");
        RhinoApp.WriteLine($"Stack Trace: {ex.StackTrace}");
        return Result.Failure;
    }
 }
```

--------------------------------

### Example iJewel Settings JSON

Source: https://docs.ijewel3d.com/integrations/shopify-dawn.html

This JSON object defines configuration settings for the iJewel viewer. It can be stored in Shopify metafields for dynamic theme updates.

```json
{
    "webgi_version": "0.9.19",
    "scene_settings": "",
    "environment_map": "",
    "loading": {
        "loadingTextHeader": "Loading iJewel 3D Experience",
        "showFileNames": false,
        "backgroundOpacity": 0.5,
        "background": "#ffffff",
        "textColor": "#222222",
        "logoImage": "https://playground.ijewel3d.com/logo_black.png"
    }
}
```

--------------------------------

### Create HTML Container for Viewer

Source: https://docs.ijewel3d.com/viewer/introduction.html

Define a div element in your HTML to serve as the container where the 3D viewer will be rendered. This example uses a full-viewport size.

```html
<body>
  <div id="root" style="width: 100vw; height: 100vh"></div>
</body>
```

--------------------------------

### Interactive Browser Console Setup

Source: https://docs.ijewel3d.com/tryon/demo.html

Include this script in your HTML to add an interactive console for debugging and testing on mobile devices. The console is activated by '?debug' in the URL or by setting 'active-eruda' to 'true' in local storage.

```html
<script>
;(function () {
    var src = '//cdn.jsdelivr.net/npm/eruda';
    if (!/debug/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
</script>
```

--------------------------------

### Manual JavaScript Embedding for iJewel3D Viewer

Source: https://docs.ijewel3d.com/viewer/tutorial-embed-drive.html

Integrate the iJewel Viewer JavaScript library for more control over viewer options. This example demonstrates loading a model by ID into a specified container element with basic viewer options.

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>iJewel3D Viewer</title>
</head>

<body>
  <div id="root"></div>
  <script src="https://releases.ijewel3d.com/libs/webgi-v0/bundle-0.22.0.js"></script>
  <script src="https://releases.ijewel3d.com/libs/mini-viewer/0.6.8/bundle.nowebgi.iife.js"></script>
  <script>
    const baseName = "drive" // or your enterprise 
    const modelId = urlParams.get('id');

    ijewelViewer.loadModelById(
      modelId,                        // the model ID 
      baseName,
      document.getElementById('root'), // the container element
      { /* Optional: Add ViewerOptions here if needed */
        showCard: true,
        showLogo: true,
        // Add other options from ViewerOptions documentation as required
      }
    );

  </script>
  <style>
    #root {
      width: 100vw;
      height: 100dvh;
    }
  </style>
</body>

</html>
```

--------------------------------

### Get All Components

Source: https://docs.ijewel3d.com/ring-configurator/plugin-detail.html

Retrieves an array of all components currently managed by the plugin. Useful for iterating or logging component names.

```typescript
const allComponents = ringConfigurator.getComponents();
allComponents.forEach(comp => console.log(comp.name));
```

--------------------------------

### Initialize and Render ijewelViewer

Source: https://docs.ijewel3d.com/viewer/viewer-class.html

Demonstrates how to initialize the ijewelViewer with project and viewer options, and how to update the 3D model using the render method.

```javascript
const project = {
  modelUrl: "https://example.com/model.glb",
  basePath: "https://example.com/assets/",
  logo: "https://example.com/logo.png",
  sceneConfig: { /* scene configuration */ },
  materialConfig: { /* material configuration */ },
  configuratorConfig: [/* configurator configuration */],
};

const viewerOptions = {
  showLogo: true,
  showCard: true,
  showSwitchNode: false,
  splitMaterialTabs: true,
  useIjewelLogo: false,
  hideQuality: true,
  logoScale: 1.5,
};

const viewer = new ijewelViewer.Viewer(document.getElementById("root"), project, viewerOptions);

// To update the project and the 3D model
viewer.render(newProject);
```

--------------------------------

### Get a Specific Component

Source: https://docs.ijewel3d.com/ring-configurator/plugin-detail.html

Retrieves a component by its name. If the component exists, you can then apply variations to it.

```typescript
const shank = ringConfigurator.getComponent("Shank");
if (shank) {
  await shank.applyVariation(shank.variations[0]);
}
```

--------------------------------

### Initialize WebGi Viewer and Load Models

Source: https://docs.ijewel3d.com/tryon/demo.html

Initialize the WebGi viewer, add necessary plugins including the RingTryonPlugin, and set API keys. Load the 3D model and its associated JSON configuration file.

```javascript
// Initialize the viewer
const viewer = new ViewerApp({
    canvas: document.getElementById("webgi-canvas")
});
viewer.renderer.displayCanvasScaling = 2;

// add and setup all necessary plugins
await addBasePlugins(viewer, {interactionPrompt: false});
const diamondPlugin = await viewer.addPlugin(DiamondPlugin);
diamondPlugin.setKey('LICENSE_KEY_FOR_IJEWEL_SDK')

// Add the Ring TryOn Plugin
// plugin needs to be included from ij_vto, as its separate from webgi.
const tryon = await viewer.addPlugin(ij_vto.RingTryonPlugin);
tryon.setKey('LICENSE_KEY_FOR_TRYON_SDK')
```

```javascript
await viewer.setEnvironmentMap("https://playground.ijewel3d.com/assets/lightmaps/gem/gem-2.exr");
await viewer.load("https://www.example.com/model.glb")
await viewer.load("https://www.example.com/model.glb.json")
```

--------------------------------

### Get Component Bounding Box

Source: https://docs.ijewel3d.com/ring-configurator/plugin-detail.html

Retrieves the bounding box of the component and calculates its size. Requires importing Vector3 from 'webgi'.

```typescript
const bounds = component.getBounds();
const size = bounds.getSize(new Vector3());
console.log(`Width: ${size.x}, Height: ${size.y}, Depth: ${size.z}`);
```

--------------------------------

### Shopify XR ProductModel Dummy Implementation

Source: https://docs.ijewel3d.com/integrations/shopify-dawn.html

Provides a dummy implementation for ProductModel, including stubbed methods for loading and setting up Shopify XR. This is useful for ensuring the application can run without errors when XR features are not actively used or are being mocked.

```javascript
// Set a dummy ProductModel in the window, just in case
window.ProductModel = {
    loadShopifyXR() {
    },

    setupShopifyXR(errors) {
        if (errors) return;
    },
};

```

--------------------------------

### Get iJewel Embed Code

Source: https://docs.ijewel3d.com/integrations/embedding.html

Copy this HTML code directly to embed your 3D model. Alternatively, click the 'view code' button for more options.

```html
<iframe src="https://embed.ijewel3d.com/viewer/YOUR_MODEL_ID" width="100%" height="600px" frameborder="0" allowfullscreen></iframe>
```

--------------------------------

### Add HTML Structure for TryOn

Source: https://docs.ijewel3d.com/tryon/demo.html

Add a container and canvas for 3D rendering, along with buttons for AR mode, camera flipping, and image saving.

```html
<div id="canvas-container" style="position: relative">
    <div id="header-text">iJewel Realtime Tryon</div>
    <canvas id="webgi-canvas" style="position: absolute; height: 100%; width: 100%"></canvas>
</div>
<button id="start-ar">Start AR</button>
<button id="flip-camera">Flip Camera</button>
<button id="save-image">Save Image</button>
```

--------------------------------

### Initialize iJewel Viewer

Source: https://docs.ijewel3d.com/viewer/introduction.html

Initialize the ijewelViewer with a target HTML element, project configuration (including model URL and base path), and viewer options. An event listener is set up for when the viewer is ready.

```javascript
const project = {
    modelUrl: "https://example.com/model.glb",
    basePath: "https://example.com/assets/",
    // Additional project configuration
  };

  const viewerOptions = {
    showLogo: true,
    showCard: true,
    // Additional viewer options
  };

  new ijewelViewer.Viewer(document.getElementById("root"), project, viewerOptions);
  
  window.addEventListener("ijewel-viewer-ready", async (ev) => {
    const viewer = ev.detail.viewer;
    // Additional actions to perform with the viewer instance
  });
```

--------------------------------

### Access Ring Components

Source: https://docs.ijewel3d.com/ring-configurator/using-ring-configurator.html

Get the RingConfigurator plugin and iterate over its components to access their names, available variations, and currently selected index. Apply a specific variation to a component.

```javascript
const ringConfigurator = viewer.getPluginByType('RingConfigurator');

ringConfigurator.components.forEach(component => {
    console.log(component.name);
    console.log(component.variations);
    console.log(component.selectedIndex);
});

await component.applyVariation(variation);
```

--------------------------------

### Basic Template URL Structure

Source: https://docs.ijewel3d.com/ring-configurator/using-ring-configurator.html

Use this URL structure to access a ready-made template. Append your fileId and instanceName as query parameters.

```html
https://ijewel3d.github.io/iJewelTemplates/ringconfigurator/simple/ring-configurator.html?fileId=YOUR_FILE_ID&instanceName=YOUR_INSTANCE_NAME
```

--------------------------------

### Include WebGi and iJewel3D Packages

Source: https://docs.ijewel3d.com/tryon/demo.html

Include the JavaScript bundles for webgi and web-vto in your HTML file. Ensure the webgi global variable is set correctly, especially when using CDN.

```html
<script src="https://releases.ijewel3d.com/webgi/runtime/bundle-0.15.0.js"> </script>
  <script>window.webgi = window;</script> <!-- Required for ij_vto to work(for now) -->
  <script src="https://releases.ijewel3d.com/libs/web-vto/0.0.36/web-vto.js"> </script>
```

--------------------------------

### Launch iJewel Viewer

Source: https://docs.ijewel3d.com/integrations/rhino-plugin-integration.html

Launches the iJewel Viewer application. It attempts to open the default browser on macOS or uses an embedded WebView on Windows. Includes logic for fallback mechanisms.

```csharp
string uri = "https://ijewel.design/rhinoceros";

    if (Rhino.Runtime.HostUtils.RunningOnOSX) {
        if (!BrowserLauncher.LaunchBrowserInMac(uri)) {
            //launch webview if none of the supported browsers are available on mac
            var webViewForm = new WebViewForm(uri);
            webViewForm.Show();
        } 
    }
    else {
        //use webview directly on windows
        var webViewForm = new WebViewForm(uri);
        webViewForm.Show();
    }
```

--------------------------------

### Viewer.render Method

Source: https://docs.ijewel3d.com/viewer/viewer-class.html

Renders the viewer with the given project configuration. This method can be called again to update the project and the 3D model.

```APIDOC
## Method `render(project: any)`

### Description
Renders the viewer with the given project configuration. This method sets up the viewer with the specified options and displays the UI components. To update the project and the 3D model, call `viewer.render(project)`. This will clear the previous project and render the new one.

### Parameters
#### Path Parameters
* **project** (any) - Required - The project configuration to be rendered.

### Example
```javascript
viewer.render(newProject);
```

### Tip
You can call `viewer.render(newProject)` to load new models and clear the previous scene on the same `Viewer` instance.
```

--------------------------------

### Listen for Viewer Ready Event and Adjust Camera Controls

Source: https://docs.ijewel3d.com/viewer/viewer-class.html

Attaches an event listener for the 'ijewel-viewer-ready' event. Once the viewer is ready, it adds a listener to the active camera's 'update' event to dynamically set the min and max distance for zoom controls based on screen orientation.

```javascript
window.addEventListener("ijewel-viewer-ready", async (ev) => {
  const viewer = ev.detail.viewer;
  // Additional actions to perform with the viewer instance

  //Example
  //set the max and min zoom for mobile and desktop 
  viewer.scene.activeCamera.addEventListener('update', (ev)=>{
      if(window.innerWidth < window.innerHeight){
        (viewer.scene.activeCamera.getControls()).minDistance = 14;
        (viewer.scene.activeCamera.getControls()).maxDistance = 9;

      }else{
        (viewer.scene.activeCamera.getControls()).maxDistance = 12;
        (viewer.scene.activeCamera.getControls()).minDistance = 7;
      }
  });
});
```

--------------------------------

### Configure Viewer Options

Source: https://docs.ijewel3d.com/ring-configurator/using-ring-configurator.html

Customize the viewer's behavior and appearance by passing specific options to the `loadModelById` function. This includes hiding UI elements and controlling branding.

```javascript
ijewelViewer.loadModelById(fileId, instance, container, {
    showConfigurator: false,
    showCard: false,
    transparentBg: false,
    showLogo: true,
    hideFullScreen: true,
    hideResetView: true,
    hideFitScene: true,
    hideRotateCamera: true,
    hideCameraViews: true,
    brandingSettings: {
        enable: true,
        showLoadingScreenLogo: true
    }
});
```

--------------------------------

### Viewer Constructor

Source: https://docs.ijewel3d.com/viewer/viewer-class.html

Initializes the Viewer class, responsible for rendering the iJewelMiniViewer in a specified HTML container.

```APIDOC
## Constructor `constructor(container: HTMLElement, project: Project, options?: ViewerOptions)`

### Description
Initializes the Viewer class, responsible for rendering the iJewelMiniViewer in a specified HTML container.

### Parameters
#### Path Parameters
* **container** (HTMLElement) - Required - The HTML element in which the viewer will be rendered.
* **project** (Project) - Required - An object containing the project configuration details.
* **options** (ViewerOptions) - Optional - An optional object containing various viewer options.
```

--------------------------------

### iJewel 3D Viewer Integration Script

Source: https://docs.ijewel3d.com/integrations/shopify-dawn.html

This JavaScript file replaces the default Shopify product model loader with the iJewel3D SDK's webgi-viewer. It includes settings for the viewer, such as version, environment maps, and loading screen customization.

```javascript
/**
 * This file is an alternative of `product-model.js` on Shopify.
 * It overloads the default model-viewer with the `webgi-viewer` from the iJewel3D SDK(https://ijewel3d.com).
 * This file must be included in the theme manually, and referenced in the pages where product-model.js was used.
 * Check the docs for more information and updates. - https://developer.ijewel3d.com/integrations/shopify
 *
 * File version - 26-07-2025
 */

// Settings for the iJewel3D SDK, this includes the webgi package version, environment maps etc.
// This can be set externally in the metafields or in the page where the product model is used, if not, the default settings will be used.
window.iJewelSDKSettings = {
    webgi_version: "0.15.0",
    scene_settings: "",
    environment_map: "",
    loading: {
        loadingTextHeader: "Loading iJewel 3D Experience",
        showFileNames: false,
        backgroundOpacity: 0.5,
        background: "#ffffff",
        textColor: "#222222",
        logoImage: "https://playground.ijewel3d.com/logo_black.png",
    },
    ...(window.iJewelSDKSettings||{}),
}

```

--------------------------------

### Updated Product Model Script Loading with iJewel3D

Source: https://docs.ijewel3d.com/integrations/shopify-dawn.html

This updated code block replaces the default script with the iJewel3D script and optionally loads settings from metafields.

```liquid
{%- if first_3d_model -%}
 <script type="application/json" id="ProductJSON-{{ product.id }}">
   {{ product.media | where: 'media_type', 'model' | json }}
 </script>
 {%- if shop.metafields.ijewel3d_settings -%}
   <script>
     var iJewelSDKSettings = {{ shop.metafields.ijewel3d_settings | json }};
   </script>
 {%- endif -%}
 <script src="{{ 'product-model-ijewel.js' | asset_url }}" defer></script>
{%- endif -%}
```

--------------------------------

### Import WebGi with NPM

Source: https://docs.ijewel3d.com/tryon/demo.html

When importing webgi via npm, set the global 'webgi' variable to the imported module before loading the ij_vto script.

```javascript
import * as webgi from "webgi";
window.webgi = webgi;
```

--------------------------------

### Recommended Component Naming Convention

Source: https://docs.ijewel3d.com/ring-configurator/prepare-components.html

Follow this format for naming ring components to ensure better organization, especially in large libraries. The convention is not mandatory but strongly advised.

```text
<SKU>-<DiamondShape><CaratSize>
```

```text
H123-Rd20
```

--------------------------------

### Applying Model Variations with Material Handling

Source: https://docs.ijewel3d.com/ring-configurator/plugin-detail.html

Demonstrates how to apply a model variation using the RingConfiguratorPlugin. The second argument controls whether materials are reapplied.

```typescript
// Apply variation without reapplying materials
await component.applyVariation(variation, false);
```

```typescript
// Apply variation with materials (default behavior)
await component.applyVariation(variation, true);
```

--------------------------------

### Update package.json for iJewel Viewer

Source: https://docs.ijewel3d.com/viewer/connect-to-drive.html

Add the iJewel 3D mini-viewer and its types to your project's dependencies in `package.json`.

```json
{
  "dependencies": {
    // ... other dependencies
    "@ijewel3d/mini-viewer": "https://releases.ijewel3d.com/libs/web/ijewel3d-mini-viewer-0.6.8.tgz",
    "@types/webgi": "https://releases.ijewel3d.com/libs/webgi-v0/bundle-types-0.22.0.tgz"
  }
}
```

--------------------------------

### Customize 3D Viewer Styles with CSS

Source: https://docs.ijewel3d.com/integrations/wordpress-woocommerce.html

Add custom CSS to modify the appearance of the 3D viewer and product elements. This can be done via Appearance > Customize > Additional CSS.

```css
#mini-viewer #webgi-wrapper+.absolute button {
  display: none !important;
}
#webgi-wrapper button.z-0 {
  padding-left: 10px;
  padding-right: 10px;
  margin: 0;
}
.row-small>.flickity-viewport>.flickity-slider>.col.ij-item a::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1;
  width: 25px;
  height: 25px;
  background: url('image/3d-rotate-icon-1.svg');
  background-repeat: repeat;
  background-repeat: no-repeat;
  opacity: 0.6;
}
.ij-model-product {
  min-height: 640px;
}
@media (max-width:1350px){
.ij-model-product {
  min-height: calc(50vw - 30px);
  max-height: 640px;
}
}
button.group {
  color: #000;
}
@media(max-width:849px) {
  .ij-model-product {
    min-height: calc(58vw - 30px);
  }
}
@media(max-width:549px) {
  .ij-model-product {
    min-height: calc(100vw - 30px);  }
}

```

--------------------------------

### Create a New Component

Source: https://docs.ijewel3d.com/ring-configurator/plugin-detail.html

Creates and adds a new component to the plugin with a specified name. This is the first step in adding new parts to the ring.

```typescript
const headComponent = ringConfigurator.createComponent("Head");
```

--------------------------------

### Load Model by Name and Parent ID using ijewelViewer

Source: https://docs.ijewel3d.com/viewer/connect-to-drive.html

Use `loadModelByName` to load a model by its filename and the ID of its parent folder. This method requires an authentication token and is useful when the file ID is unknown but the filename and folder structure are known. Ensure the viewer library and an authentication token are provided.

```typescript
// Example: Load a model named "ring_model.glb" from folder with ID "folder456"

// Ensure the viewer library script is loaded first
// <script src="https://releases.ijewel3d.com/libs/webgi-v0/bundle-0.22.0.js"></script>
// <script src="https://releases.ijewel3d.com/libs/mini-viewer/0.6.8/bundle.nowebgi.iife.js"></script>

const modelName = 'ring_model.glb'; // Replace with the exact model filename
const parentFolderId = 'folder456'; // Replace with the ID of the parent folder
const driveBasename = 'drive'; // Or your enterprise basename
const authToken = 'YOUR_AUTHENTICATION_TOKEN'; // Replace with a valid token
const containerElement = document.getElementById('viewer-container');

const viewerInstance = await ijewelViewer.loadModelByName(
  modelName,
  parentFolderId,
  driveBasename,
  authToken,
  containerElement,
  { // Optional ViewerOptions
    showCard: true,
    // Add other options as needed
  }
);

```

--------------------------------

### Original Product Model Script Loading

Source: https://docs.ijewel3d.com/integrations/shopify-dawn.html

This is the default code block found in Shopify's Dawn theme for loading the product model script.

```liquid
{%- if first_3d_model -%}
 <script type="application/json" id="ProductJSON-{{ product.id }}">
   {{ product.media | where: 'media_type', 'model' | json }}
 </script>
 <script src="{{ 'product-model.js' | asset_url }}" defer></script>
{%- endif -%}
```

--------------------------------

### Rhino Layer Guidelines for Ring Configurator

Source: https://docs.ijewel3d.com/ring-configurator/prepare-components.html

Use these layer naming conventions in Rhino to help iJewels correctly identify and apply materials to different parts of your ring components. Consistent naming and separation of material types are crucial.

```text
Metal 01
```

```text
Gem 01
```

```text
Pearl 01
```

```text
Ceramic 01
```

```text
ShankBase
```

```text
Head
```

```text
Shank
```
Tokens:
Raw