iJewel3D SDK

Appearance

Introduction to iJewel Viewer ​

iJewel Viewer

ijewelViewer allows you to easily embed and render 3D models directly within your web pages. This guide will help you get started with integrating the viewer into your project, configuring it, and displaying 3D content.

Getting Started ​

To get started with the iJewel3D Viewer, you'll need to include the necessary scripts and create an HTML container for the viewer. Let's dive into the setup process!

Including the Viewer Script ​

First, include the iJewel3D Viewer script in your HTML file. You can use the following link:

html
<script src="https://releases.ijewel3d.com/libs/mini-viewer/0.1.20/bundle.iife.js"></script>

INFO

We regularly update the version numbers of the packages. Make sure to check the latest version back on this page when updating.

Latest version: 0.1.1

Creating the HTML Container ​

Next, create a container element in your HTML where the viewer will be rendered. Here's a basic HTML structure:

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

Initializing the Viewer ​

With the container set up, you can now initialize the Viewer and render your 3D project. Here’s an example of how to do it:

html
<script type="module">
  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
  });
</script>

TIP

For more details on how to connect to iJewel Drive and retrieve the model URL and base path, check out our Connect to iJewel Drive section.

Standalone Model Embedding ​

In addition to connecting to iJewel Drive, you can also directly load models into the Viewer without needing a base path. This is useful if you have a 3D model file that you want to embed directly into your webpage without configuration files or additional assets.

Embedding a Standalone Model ​

Check out this sample of embedding a model from any source directly into the Viewer: