JSPM

@splinetool/viewer

0.0.3
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 5981
    • Score
      100M100P100Q121958F

    Spline viewer

    Package Exports

    • @splinetool/viewer
    • @splinetool/viewer/build/viewer.js
    • @splinetool/viewer/src/spline-viewer.ts

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@splinetool/viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    <spline-viewer>

    Quickstart

    <!-- Import the component -->
<script
    type="module"
    src="https://unpkg.com/@splinetool/spline-viewer/dist/spline-viewer.min.js"
></script>

<!-- Use it like any other HTML element -->
<spline-viewer
    url="https://prod.spline.design/iEAs8HJFu91daMOq/scene.splinecode"
></spline-viewer>

    Installing

    The <spline-viewer> web component can be installed from NPM:

    npm install @splinetool/spline-viewer

    It can also be used directly from various free CDNs such as unpkg.com:

    <script
    type="module"
    src="https://unpkg.com/@splinetool/spline-viewer/dist/spline-viewer.min.js"
></script>

    Options

    url

    The url of your Spline export. ex: https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode.

    width (optional)

    The desired width of the viewer in pixels. Ex: width="400".

    height (optional)

    The desired height of the viewer in pixels. Ex: height="400"

    background (optional)

    A css like color that will override the background color of your scene as it was set in the editor. Ex: background="#ff0000".

    loading (optional)

    This option controls the agressiveness of the preload of your scene. Possible values are auto, lazy and eager. By default (auto) the behavior is to lazy load the scene and only start to preload when the tag enters the viewport. If you need to start loading immediately then you can set loading="eager" instead.

    Exporting for <spline-viewer from Spline editor

    If you want a scene to be loaded by the <spline-viewer> component, you need to export it from Spline editor using the Spline Viewer export type. First click on the Export button from the toolbar, then click on the Spline Viewer tab on the sidebar of the export modal. Finally click on update and when export is done you can copy paste the code snippet or the exported URL.

    Listening for events outside of the canvas

    In case you need the events to be able to listen for your movements outside of the canvas (exemple: a look at event that follow your mouse outside of the canvas), you can set the Mouse Events option to From full window inside the Spline Viewer export options.