Sandi UI

screenshot of Sandi UI
vite
vue

Based on three vue3 component library with event system, build your interactive 3D world with components

Overview

Sandi-UI is an innovative component library built on Vue 3, designed specifically for creating interactive 3D worlds using Three.js. With its event-driven system, Sandi-UI makes it easy to integrate complex interactions into your 3D scenes, whether you're building a game, visualization, or an artistic project. The library promises an intuitive experience by utilizing Vue’s component structure and includes an array of features that push the boundaries of web-based interactivity.

The library is continuously evolving, with ongoing improvements and a growing library of examples to help users get started. Whether you are a seasoned developer or a curious hobbyist, Sandi-UI provides the tools needed to create engaging 3D experiences without the necessary complexity typically associated with 3D development.

Features

  • Event System: Easily bind various event handlers like clicks, mouse movements, and keyboard interactions to 3D objects for immersive user experiences.

  • Contact Detection: Utilize the SDRaycaster component to detect interactions with objects, enabling the creation of entertaining and dynamic demos.

  • CSS2D Support: Combine Sandi-UI with other component libraries for fun interactions using 2D elements alongside your 3D content.

  • CSS3D Support: Integrate 3D effects that enhance user engagement and allow for more creative visualizations.

  • Advanced Components: Access to components like SDLight, SDMaterial, SDMesh, and SDGeometry which simplify the usage of Three.js instances in your projects.

  • Animation Control: The SDAnimationAction and SDAnimationMixer components enable precise control of animations, allowing for seamless playback of FBX and GLTF files.

  • User Controls: Built-in controls such as SDOrbitControls and SDTransformControls facilitate 360-degree viewing and navigation, making interaction with 3D scenes user-friendly.

  • Automatic Resource Management: The library manages resources automatically during the Vue lifecycle, ensuring that resources are cleaned up when components are unmounted.

Sandi-UI is truly a powerful tool for developers looking to enhance their web applications with interactive 3D capabilities.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.