Three-ui-ar NPM

THREE UI AR

three-ui-ar is a versatile JavaScript package designed to simplify the creation of user interfaces (UI) within augmented reality (AR) environments. By providing an easy-to-use API for managing sliding panels, menus, and interactive components, ThreeUI enables developers to integrate dynamic and responsive UI elements seamlessly into their AR experiences.

IMPORTANT

    const options = {
        requiredFeatures: ['hit-test'],
        optionalFeatures: ['dom-overlay', 'dom-overlay-for-handheld-ar'],
        domOverlay: { root: document.body }
    };
    document.body.appendChild(ARButton.createButton(renderer, options));

Components

1. SlideOver

The core component of the package that manages the sliding panel functionality.

Features

Open and Close Buttons: Easily configure buttons to open and close the sliding panel.
Customizable Panels: Set up panels with different backgrounds and styles.
Dynamic Menus and Submenus: Add menus and submenus with customizable buttons.
Callback Functions: Execute custom code when menu or submenu items are clicked.
Responsive Design: Built to adapt to different screen sizes and layouts.
Integration with Three.js: Easily integrate with Three.js for 3D experiences.

2. Carousel

The Carousel component provides a sleek and interactive way to display a collection of images or items that users can navigate through by scrolling.

Features

Manual Navigation: Allows users to manually scroll through items using touch or mouse input.
Customizable Item Width: Set the width of each item to fit your design needs.
Gap Control: Easily adjust the gap between items to create a more compact or spacious layout.
Responsive Design: Automatically adjusts the layout to fit various screen sizes and orientations.
Smooth Scrolling: Enables smooth and responsive scrolling for a seamless user experience.
Snap Scrolling: Items automatically snap into place as the user scrolls, enhancing usability.
Image and Text Support: Easily integrate images and text into each carousel item.
Callback Functions: Execute custom code when an item is clicked, providing flexibility for interactive experiences.