three-ui-ar
v1.1.4
Published
UI for THREE JS
Downloads
86
Readme
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.