troisjs/troisArchived
Trois
Trois 是一个用于 Vue 3 的声明式 3D 场景管理器和 Three.js 组件库。它作为一个响应式包装器，将 Three.js 场景图和材质映射到 Vue 组件树中，从而能够使用类似 HTML 的模板来创建基于 Web 的 3D 渲染器。
该项目通过基于代理的状态绑定和响应式属性映射，将响应式组件树与 3D 场景图同步。它具有基于组件的场景图，可管理空间变换和对象生命周期，并将 requestAnimationFrame 循环与组件生命周期事件集成在一起。
该库涵盖了广泛的 3D 功能，包括几何体生成、实例化渲染以及用于 GLTF 和 FBX 等格式的资源加载管道。它提供了用于光照和阴影的综合工具、从基础到基于物理的各种材质类型以及自定义着色器，并通过透视相机和轨道控制器进行视口管理。其他功能包括后期处理效果、指针输入跟踪和虚拟现实模式集成。
该包支持通过内容分发网络 (CDN) 导入，以便进行快速原型设计。
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.
