import { Application } from '@splinetool/runtime';

// make sure you have a canvas in the body
const canvas = document.getElementById('canvas3d');

// start the application and load the scene
const spline = new Application(canvas);
spline.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode');

import { Application } from '@splinetool/runtime';

const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline
    .load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
    .then(() => {
        const obj = spline.findObjectByName('Cube');
        // or
        // const obj = spline.findObjectById('7AF5EBC0-09BB-4720-B045-F478F8053AA4');

        console.log(obj); // Spline Object => { name: 'Cube', id: '7AF5EBC0-09BB-4720-B045-F478F8053AA4', position: {}, ... }

        // move the object in 3D space
        obj.position.x += 10;
    });

import { Application } from '@splinetool/runtime';

const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline
    .load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
    .then(() => {
        spline.addEventListener('mouseDown', (e) => {
            if (e.target.name === 'Cube') {
                console.log('I have been clicked!');
            }
        });
    });

import { Application } from '@splinetool/runtime';

const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline
    .load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
    .then(() => {
        spline.emitEvent('mouseHover', 'Cube');
    });

import { Application } from '@splinetool/runtime';

const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline
    .load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
    .then(() => {
        const obj = spline.findObjectByName('Cube');
        objectToAnimate.emitEvent('mouseHover');
    });

/*
    When loading the Application, use the third
    param of the load function to make sure the browser
    will use the preloaded file and not make another request
*/
spline.load(
    'https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode',
    undefined,
    {
        credentials: 'include',
        mode: 'no-cors',
    }
);

const spline = new Application(canvas);

// Create an object describing the variables you want to update during load
const myVariables = { myName: 'John', mySize: 350 };

// And pass them as second parameter for the load function
spline.load('.../scene.splinecode', myVariables);

// Later you can update your variables again
spline.setVariables({ myName: 'Paul', mySize: 100 });

// Or change only one variable
spline.setVariable('myName', 'Ringo');

import { Easing } from '@splinetool/runtime'

// ...

const sphere = spline.findObjectByName('Sphere')!;

// Simplest way to transition sphere from current state to State.
// The "to" param is the only mandatory parameter.
sphere.transition({ to: 'State' });

// Same transition with all params set with their default values
sphere.transition({
  from: undefined, // State name to start from, undefined will start from current state
  to: 'State', // State name to go to, null will go to base state
  duration: 1000, // in ms
  delay: 0, // in ms
  easing: Easing.LINEAR,
  autoplay: true
});

// Force transition from Base State
sphere.transition({ from: null, to: 'State' })

// Chaining two transitions, the second one will be playing after first one is over
sphere.transition({ to: 'State' }).transition({ to: 'State 2' });

// Save transition object for later use
const transition = sphere.transition({ to: 'State', autoPlay: false }).transition({ to: 'State 2' });
transition.play()
transition.pause()
transition.reset()
transition.seek(1000)

app.load('scene.spline').then(() => {
    catButton.addEventListener('click', async () => {
        // By default second parameter is an url to a .splinegeometry file
        await app.swapGeometry('Animal', 'url/to/cat.splinegeometry');
    });

    dogButton.addEventListener('click', async () => {
        // It's also possible to load the .splinegeometry file yourself if you want to manage some kind of cache or reuse one geometry for multiple objects / file
        const res = await fetch('url/to/dog.splinegeometry');
        const buffer = await res.arrayBuffer();
        const dogGeometry = new Uint8Array(buffer);
        await app.swapGeometry('Animal', dogGeometry);
    });
});

app.load('scene.spline').then(() => {
    const obj = spline.findObjectByName('Cube');
    const material = obj.material;

    // material have a global alpha value (from 0 to 1)
    material.alpha = 0.25;

    // and the list of the layers you defined in Spline
    const layers = material.layers;

    // You can differentiate layer by type
    const fresnelLayer = layers.find((l) => l.type === 'fresnel');

    if (fresnelLayer) {
        // And change properties for this layer directly
        fresnelLayer.factor = 0.5;
    }
});

app.load('scene.spline').then(async () => {
    const obj = spline.findObjectByName('Cube');
    const textureLayer = obj.material.layers.find((l) => l.type === 'texture');
    if (textureLayer) {
        // By targetting a material layer that has a texture it's possible to change this texture's image
        await textureLayer.updateTexture('/path-to-new-texture.png');
    }
});