SketchfabViewer

Autores:

• @SeaBassLab

tl;dr

• Install by executing npm i sketchfab-viewer or yarn add sketchfab-viewer.
• Import by adding import { SketchfabViewer } from "sketchfab-viewer";.

Description

SketchfabViewer is a Web Component 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 SketchfabViewer to your project by executing

 npm install sketchfab-viewer

or

 yarn add sketchfab-viewer

Usage

Here's an example of basic usage:

• Add SketchfabViewer in HTML

<sketchfab-viewer uid="538f4a91fb374937833ec025eaad5589"> </sketchfab-viewer>

Alternatives

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

having said that...

• You can control the different aspects of the model viewer by passing properties with the values allowed by the Sketchfab Viewer API

• It even allows adding any loader component by passing the slot='loader' attribute

• The same with any button that you want to add slot='button'

• Keep in mind that the component has a relative position, so you can play with the absolute position all you want.

 <SketchfabViewer
    id="my-viewer"
    uid="538f4a91fb374937833ec025eaad5589"
    settings='[{"name": "getMaterialList", "arguments": []}]'
    options={autospin: 0}
 >
 <MyCustomLoader slot='loader'></MyCustomLoader>
 <Button slot='button' onClick={() => getEnv()}>Set Env</Button>
 </SketchfabViewer>

  const viewer = document.getElementById("my-viewer")
  viewer.addEventListener("onResponse", (event) => console.log(event)); // Response event for all request
  function getEnv(){
    viewer.updateSettings("setEnvironment", [{options}]) // method to use any Viewer API call
  }

Possible Values

Author

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