🔷Examples and Tutorials:

// import React, { useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import IDE from '@soulvisioncreations/ide-sdk';
import './index.css'
import useIDEStore from './uiStore.tsx';
import Button from './Button.js';

var objId, textId1, textId2, imageId1;

function degreesToRadians(degrees) {
    return degrees * (Math.PI / 180);
}

const App = () => {
    const { scrollProgress, setScrollProgress, toggle, setToggle, scrollFrame, setScrollFrame, } = useIDEStore();

    function onMount() {
        // you can add IDE functions here
        imageId1 = IDE.addImagetoScene({
            assetName: 'BG 3.png',
            position: [0, 0, -5],
            rotation: [0, 0, 0],
            scale: [20, 20, 1],
        })

        textId1 = IDE.addTexttoScene({
            input: 'ALL-NEW LEATHER DESK CHAIR',
            color: 'Black',
            position: [0, 0, 0],
            rotation: [0, 0, 0],
            scale: [0, 0, 0],
        })

        textId2 = IDE.addTexttoScene({
            input: 'AVAILABLE IN STORES NEAR YOU',
            color: 'Black',
            position: [0, -3, 0],
            rotation: [0, 0, 0],
            scale: [0.4, 0.4, 0.4],
        })

        objId = IDE.addObjecttoScene({
            assetName: 'chair',
            position: [0, -0.5, 1],
            scale: [1, 1, 1],
        })

        IDE.addAnimation({
            refId: objId,
            finalPosition: [0, -0.6, 2],
            finalRotation: [0, degreesToRadians(90), 0],
            leftX: 0,
            length: 100,
        })
        IDE.addAnimation({
            refId: objId,
            finalPosition: [0, -0.5, 3.8],
            finalRotation: [degreesToRadians(23), degreesToRadians(298), 0],
            leftX: 100,
            length: 100
        })
        IDE.addAnimation({
            refId: objId,
            finalPosition: [0, -0.9, 4],
            finalRotation: [degreesToRadians(29), degreesToRadians(360), 0],
            leftX: 200,
            length: 100,
        })
        IDE.addAnimation({
            refId: objId,
            finalPosition: [0, -0.7, 4],
            finalRotation: [degreesToRadians(11), degreesToRadians(315), 0],
            leftX: 240,
            length: 160
        })
        IDE.addAnimation({
            refId: objId,
            finalPosition: [0, -0.5, 1.2],
            finalRotation: [0, 0, 0],
            leftX: 400,
            length: 50
        })
        IDE.addAnimation({
            refId: objId,
            finalPosition: [0, -0.5, 5.7],
            leftX: 500,
            length: 100,
        })
        IDE.addAnimation({
            refId: objId,
            finalRotation: [degreesToRadians(90), degreesToRadians(180), 0],
            leftX: 600,
            length: 20
        })
        IDE.addAnimation({
            refId: textId1,
            finalScale: [0.5, 0.5, 0.5],
            leftX: 600,
            length: 1,
        })
        IDE.addAnimation({
            refId: objId,
            finalPosition: [0, -2.5, 2],
            // finalScale: [2, 2, 2],
            leftX: 620,
            length: 50
        })
        IDE.addAnimation({
            refId: objId,
            finalScale: [2, 2, 2],
            finalRotation: [degreesToRadians(90), degreesToRadians(180), 0],
            leftX: 670,
            length: 10
        })
        IDE.addAnimation({
            refId: textId1,
            finalScale: [0, 0, 0],
            leftX: 800,
            length: 1,
        })
        IDE.addAnimation({
            refId: textId2,
            finalPosition: [0, -1.5, 0],
            leftX: 800,
            length: 20,
        })
        IDE.addAnimation({
            refId: objId,
            finalPosition: [0, -0.7, 1],
            leftX: 670,
            length: 130
        })
        IDE.addAnimation({
            refId: objId,
            // finalPosition: [0, -0.7, 1],
            finalRotation: [0, degreesToRadians(180), 0],
            leftX: 680,
            length: 120
        })
        IDE.addAnimation({
            refId: objId,
            finalRotation: [0, 0, 0],
            leftX: 800,
            length: 30
        })
    }

    const handleButtonClick = (isSelected) => {
        if (isSelected) {
            IDE.playGLBAnimation({
                refId: objId,
                trigger: 'event',
                actionName: 'open',
            })
            IDE.showObject({ refId: objId, hidden: false })
        } else {
            IDE.playGLBAnimation({
                refId: objId,
                trigger: 'event',
                actionName: 'close',
            })
        }
    };

    const buyNowClick = (isSelected) => {
        window.open("https://www.amazon.in/Dowinx-Massage-Support-Adjustable-Footrest/dp/B07VXPWCN8/ref=asc_df_B07VXPWCN8/?tag=googleshopdes-21&linkCode=df0&hvadid=544925662452&hvpos=&hvnetw=g&hvrand=688380385795324628&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9061998&hvtargid=pla-831366579548&psc=1&mcid=45502a461e093acdb81b4cd334988d99&gclid=CjwKCAiA29auBhBxEiwAnKcSqtiAwDaIIa_uHRrRjiea0dT3W6-bNRbIMpfNVIpgVdcLtMTIus02qRoCprsQAvD_BwE", '_blank');
    }

    useEffect(() => {
        if (scrollFrame > 835) {
            setToggle(true)
        } else {
            setToggle(false)
        }

    }, [scrollFrame])

    return (
        <div className="container">
            <p className="progress">{`Frame: ${scrollFrame}`}</p>
            <div className="app">
                <IDE.Creator
                    configLink="https://orion-dev.avataar.me/creator-assets/ide/config/base_config.json"
                    token="Tkn_afG8XBf2YF34Bar9fVrp7wZH64B3ip"
                    env="development"
                    onMount={onMount}
                    onScrollProgress={(progress) => {
                        setScrollProgress(progress)
                    }}
                    onScrollFrame={(progress) => {
                        setScrollFrame(progress)
                    }}
                />
            </div>
            {toggle && (
                <div className="btn">
                    <Button
                        selectedImage="https://web2.avataar.me/common/icons/Play_Selected.png"
                        unselectedImage="https://web2.avataar.me/common/icons/Play_Unselected.png"
                        onClick={handleButtonClick}
                        className="animBtn"
                    />
                    <Button
                        selectedImage="https://web2.avataar.me/common/icons/Buynow_Unselected.png"
                        unselectedImage="https://web2.avataar.me/common/icons/Buynow_Unselected.png"
                        onClick={buyNowClick}
                        className="animBtn"
                    />
                </div>)}
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

index.css

// .app {
    height: 100vh;
    width: 100vw;
}

.progress {
    right: 3%;
    position: absolute;
    top: 0;
    color: white;
}

.btn {
    display: flex;
    width: 100%;
    position: absolute;
    bottom: 4%;
    justify-content: center;
}

.animBtn {
    background: none;
    border: none;
    cursor: pointer;
}

Button.js

// import React, { useState } from 'react';
import './Button.css';

const Button = ({ selectedImage, unselectedImage, onClick, className }) => {
    const [isSelected, setIsSelected] = useState(false);

    const handleClick = () => {
        setIsSelected(!isSelected);
        onClick(!isSelected);
    };

    return (
        <button onClick={handleClick} className={className}>
            <img src={isSelected ? selectedImage : unselectedImage} alt="Button Image" className="btnImg" />
        </button>
    );
};

export default Button;

Button.css

// .btnImg {
    width: auto;
    height: 50px;
}

uiStore.tsx

// import create from "zustand";

type State = {
    scrollProgress: number;
    setScrollProgress: (update: number | ((scrollProgress: number) => number)) => void;
    toggle: boolean;
    setToggle: (update: boolean | ((toggle: boolean) => boolean)) => void;
    scrollFrame: number;
    setScrollFrame: (update: number | ((scrollFrame: number) => number)) => void;
};

const useIDEStore = create<State>((set) => ({
    scrollProgress: 0,
    setScrollProgress: (progress) => set({ scrollProgress: progress }),
    toggle: false,
    setToggle: (flag) => set({ toggle: flag }),
    scrollFrame: 0,
    setScrollFrame: (frame) => set({ scrollFrame: frame }),

}));

const IDEStoreState = useIDEStore.getState;

export { IDEStoreState };

export default useIDEStore;