@seabasslab/init-viewer

Autores:

• @SeaBassLab

I decided to build the API from scratch in order to gain more control over the options and interactions with the Viewer API and even give you the ability to add a custom loader or take the default one.

tl;dr

• Install by executing npm install @seabasslab/init-viewer or yarn add @seabasslab/init-viewer.
• Import by adding import { initViewer } from '@seabasslab/init-viewer'.
• Use by adding this function initViewer(config).
• Use onMount because it needs to run on client side.

Description

@seabasslab/init-viewer is a small browser-oriented library that allows you to manipulate the Sketchfab Viewer API simply and easily.

Motivation

With the strong demand for 3D models on the web. Sketchfab has become an important benchmark for many reasons, one of which is connecting a 3D viewer to an iframe tag. I have personally had to work on several projects where it was necessary to implement and modify the API viewer. Hide a button, add a custom payload, custom icon, etc. The hard part is implementing the Sketchfab client in projects with server-side rendering.🤒 These and other common API viewer configuration errors that consume research time and cause us some headaches. This package will be handling them 👍🏻. So enjoy it 🙌🏼!!!

Getting started

Installation

Add @seabasslab/init-viewer to your project by executing

 npm install @seabasslab/init-viewer

or

 yarn add @seabasslab/init-viewer

Usage

Here's an example of basic usage:

• Add a container

<main id="1-iframe-container">
  <!-- <div id="loader">Loading!</div> -->
</main>

• Initialize the viewer

  import { initViewer } from "@ibisdev/init-viewer";
  import { onMount } from "svelte";
  
  const config = {
    model_uid: "a47b60046a9b45b9a465af72fac78deb", // required
    container_id: "1-iframe-container", // required
    request_settings: [
      // optional
      {
        name: "getMaterialList",
        arguments: [],
      },
      {
        name: "getTextureList",
        arguments: [],
      },
      {
        name: "setTextureQuality",
        arguments: ["hd"],
      },
    ],
  };
  
  onMount(async () => {
    initViewer(config, (data) => {
      console.log(data); // data is the value for the request_settings response
    });
  }); // needs to run on the client side

Alternatives

You will probably need to interact with the different options provided by the Sketchfab viewer API itself. Many of the options have account limitations. Please visit the official site to know all the options

having said that...

You can control the different aspects of the model viewer by passing as a third parameter (optional) an object with the values allowed by the Sketchfab Viewer API

onMount(async () => {
  initViewer(
    config,
    (data) => {
      console.log(data);
    },
    { autospin: 0.2 }
  ); // read on for possible values and uses
});

Possible Values

Author

Sebastian Pulido sebastian.pulido@ibisdev.tech Software Developer at IbisDev https://ibisdev.tech