troisjs/troisArchived
Trois
Trois este un manager de scene 3D declarativ și o bibliotecă de componente Three.js pentru Vue 3. Acționează ca un wrapper reactiv care mapează grafurile de scenă și materialele Three.js pe un arbore de componente Vue, permițând crearea de randere 3D bazate pe web folosind template-uri de tip HTML.
Proiectul sincronizează un arbore de componente reactiv cu un graf de scenă 3D prin binding-ul stării bazat pe proxy și maparea proprietăților reactive. Dispune de un graf de scenă bazat pe componente care gestionează transformările spațiale și duratele de viață ale obiectelor, integrând o buclă requestAnimationFrame cu evenimentele ciclului de viață al componentelor.
Biblioteca acoperă o gamă largă de capabilități 3D, inclusiv generarea de geometrie, randarea instanțiată și un pipeline de încărcare a activelor pentru formate precum GLTF și FBX. Oferă instrumente cuprinzătoare pentru iluminare și umbre, o varietate de tipuri de materiale variind de la cele de bază la cele bazate pe fizică și shadere personalizate, precum și gestionarea viewport-ului prin camere de perspectivă și orbit controls. Funcționalitatea suplimentară include efecte de post-procesare, urmărirea input-ului pointer-ului și integrarea modului de realitate virtuală.
Pachetul suportă importul prin rețele de livrare a conținutului (CDN) pentru prototipare rapidă.
Features
- Declarative 3D Scene Graphs - Provides a declarative system for defining cameras, lighting, and meshes using reactive component trees.
- Vue 3 3D Wrappers - Integrates a 3D graphics engine into a Vue component tree to manage scenes and lighting declaratively.
- Reactive Property Bindings - Automatically synchronizes framework-level properties with 3D engine uniforms and attributes for immediate visual updates.
- 2D and 3D Graphics Rendering - Enables the creation of interactive 3D graphics in the browser by integrating Three.js with the Vue ecosystem.
- 3D Asset Importers - Implements a pipeline for loading external 3D assets from formats like GLTF, GLB, and FBX into the scene.
- 3D Geometry Generators - Provides tools and components for creating various 3D shapes and meshes without low-level vertex code.
- 3D Mesh Primitives - Provides pre-configured buffer geometries for common 3D shapes like boxes, spheres, and tori as components.
- 3D Scene Rendering - Generates the final visual display from a 3D scene using a configurable renderer.
- Custom Shader Programming - Allows the authoring of custom vertex and fragment shader code to create unique visual effects.
- Physically Based Rendering Materials - Provides physically based rendering materials that simulate realistic light interactions like clearcoat and sheen.
- Scene Initialization - Configures the initial rendering context, cameras, and scene graph for 3D application startup.
- Render Loop Execution - Manages the programmatic render loop using requestAnimationFrame to synchronize logic and drawing.
- Three.js Utility Libraries - Ships a collection of declarative Vue components that extend Three.js functionality for 3D scene integration.
- WebGL Canvas Integrations - Embeds a WebGL renderer within the Vue component tree to manage viewport sizing and event handling.
- Component-Based Scene Graphs - Organizes 3D objects as a hierarchy of components to manage spatial transformations and object lifetimes.
- Proxy-Based State Interception - Uses JavaScript Proxies to create a reactive bridge that updates 3D object properties in real-time.
- Texture Mapping - Maps image files and cube maps onto 3D surfaces to define visual appearance and surface detail.
- Vue Component Wrappers - Acts as a reactive wrapper that maps Three.js scene graphs and materials into a Vue component tree.
- 3D Asset Pipelines - Implements a pipeline for processing and importing external 3D file formats like GLTF and FBX.
- Shadow Casting Controls - Provides controls to enable or disable shadow casting for specific geometry relative to light sources.
- Camera Orbit Controls - Provides user-controllable camera orbit controls for rotating and zooming around a target point in a 3D scene.
- Camera Perspective Configurations - Allows configuration of perspective camera parameters including field of view, aspect ratio, and clipping planes.
- Cel Shading - Supports cel-shading to create cartoon-like appearances through quantized light and shadow.
- Post-Processing Effects - Implements post-processing filters such as bloom, bokeh, and anti-aliasing for the final visual output.
- Rendering Pipeline Hooks - Provides hooks to execute custom logic at specific stages of the graphics render loop.
- Scene Organizations - Organizes multiple 3D objects into a single logical unit to simplify scene management and transformations.
- 3D Scene Environment Configurators - Provides a programmatic interface to configure global environment properties and background colors for the 3D scene.
- Mesh Instancing - Implements mesh instancing to render multiple copies of a single mesh in a single draw call for better performance.
- Scene Lighting Configuration - Provides tools for configuring light sources and global illumination to control atmosphere and shadows in a 3D scene.
- Dynamic Component Instantiations - Enables the programmatic instantiation of multiple 3D objects within a scene by iterating over data collections.
- Render Loop Integrations - Integrates a requestAnimationFrame loop with component lifecycle events to execute custom logic before each frame.
- Unified Pointer Input Handlers - Provides unified handlers for mouse and touch events to interact with objects in 3D space.
