LogoLogo
  • 📘Knowledge Center
  • Before Getting Started
    • 🔷3D User
    • 🔷AI User
    • 🔷Merchandiser
    • 🔷Web Developer
  • CREATOR INTERFACE
    • 🔷Creator Home Page
    • 🔷Canvas / Workspace
    • 🔷Export
  • Creator
    • 🔷Getting Started
      • 🔹Sign Up
        • 🔹How to Sign up Using Gmail?
        • 🔹How to Sign up Using Apple Id?
        • 🔹How to Sign up Using Email?
    • 🔷Creator Navigation
    • 🔷Projects
      • 🔷How to use the Quick Access Tools?
      • 🔷View Port Settings
      • 🔷Generate AI 3D Models
      • 🔷Object
        • 🔷Upload Object
        • 🔹Transform
        • 🔷Node Hierarchy
        • 🔷Material Change
      • 🔷Scene
      • 🔷Image
      • 🔷Video
      • 🔷Audio
      • 🔷HDRI
      • 🔹Light
      • 🔷Text
      • 🔷Camera
      • 🔷Animation Timeline
      • 🔷Export
      • 🔷3D/AR
    • 🔷Assets
    • 🔷Community Showcase
    • 🔷Upload Your Catalog
      • 🔷Download Template
      • 🔷Upload File
      • 🔷Upload 3D Model
        • 🔷Product Information
        • 🔷Additional Details
          • 🔹Color Variant
          • 🔹Interaction
          • 🔹Dimensions
        • 🔷Proceed to Preview
        • 🔷Supported Files Formats
    • 🔷User Management
    • 🔷My Profile
      • 🔹How to Seek Help?
      • 🔹About
      • 🔹How to Logout from Creator?
    • 🔷Guidelines For 3D Model Creation
  • IDE - Low Code
    • 🔷Getting Started
    • 🔷IDE Functions
      • 🔹Add Object to The Scene
      • 🔹Add Light to the Scene
      • 🔹Add Environment to the Scene
      • 🔹Add Background to the Scene
      • 🔹Add Room to the Scene
      • 🔹Add Text to the Scene
      • 🔹Add Image to the Scene
      • 🔹Show/Hide Object
      • 🔹Show/Hide Image
      • 🔹Add Scroll Break Points
      • 🔹Add Animation to the Scene
      • 🔹Add Model Transformation to the Scene
      • 🔹Add Animation Block to the Scene
      • 🔹Play GLB Animation (pre built in GLB file)
    • 🔷Examples and Tutorials:
  • Developer Documentation
    • 🛠️How to Integrate Avataar Experiences?
      • 🛠️Integration with Web Renderer (React Package)
      • 🛠️Integration with Web Renderer (Javascript Package)
      • 🛠️Integration with Android Renderer
      • 🛠️Integration with iOS Renderer
      • 🛠️Integration of Experiences via Creator (React Package)
      • 🛠️Integration of Experiences via Creator (Javascript Package)
  • Incarnate
    • 🔷Getting Started
      • 🔷Device Eligibility & Settings
      • 🔷How to Download 'Incarnate by Avataar'?
      • 🔷Sign Up
        • 🔹How to Sign Up Using Google?
        • 🔹How to Sign Up Using Apple ID?
        • 🔹How to Sign Up Using Email?
      • 🔷How to Setup The Ideal Environment for Capture?
    • 🔷A Guided Tour Through the App
      • 🔷How to Choose an Object to Scan?
      • 🔷How to Use the Hamburger Menu Button?
      • 🔷How to Use the Floor Detection Feature?
      • 🔷Bounding Box
        • 🔹How to Resize the Bounding Box?
        • 🔹How to Adjust the Bounding Box?
      • 🔷How to Capture the Object?
      • 🔷How to Upload the Captured Object?
      • 🔷How to Ensure a Good Capture?
  • Release Notes
    • Version 2.4
    • Version 2.3
    • Version 2.2
    • Version 2.1
    • Version 2.0
    • December 1, 2023
Powered by GitBook
On this page
  • index.css
  • Button.js
  • Button.css
  • uiStore.tsx
  1. IDE - Low Code

Examples and Tutorials:

PreviousPlay GLB Animation (pre built in GLB file)NextHow to Integrate Avataar Experiences?

Last updated 1 year ago

// 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;

🔷