# TresJS Cientos

> Collection of useful helpers and fully functional, ready-made abstractions for TresJS.

## Documentation Sets

- [Full Documentation](https://cientos.tresjs.org//llms-full.txt): Complete Cientos documentation including getting started guides and API reference for all components.

## Getting Started

- [Getting Started](https://cientos.tresjs.org/raw/getting-started.md): Learn how to get started with cientos
- [Installation Guide](https://cientos.tresjs.org/raw/getting-started/installation.md): Get started with cientos
- [Usage](https://cientos.tresjs.org/raw/getting-started/usage.md): Learn how you can start to use cientos in your projects
- [Loading Models](https://cientos.tresjs.org/raw/getting-started/loading-models.md): The three ways to bring a glTF model into a TresJS scene, and when to use each one.
- [Upgrade Guide](https://cientos.tresjs.org/raw/getting-started/upgrade-guide.md): Migration guide for cientos

## API Reference

- [Align](https://cientos.tresjs.org/raw/api/abstractions/align.md): Calculate and align children within their parent using bounding boxes.
- [Billboard](https://cientos.tresjs.org/raw/api/abstractions/billboard.md): Make objects always face the camera automatically.
- [Camera Shake](https://cientos.tresjs.org/raw/api/abstractions/camera-shake.md): Apply smooth camera shake to the active camera.
- [Decal](https://cientos.tresjs.org/raw/api/abstractions/decal.md): Project a texture onto a mesh's surface — with an optional in-canvas editor UI.
- [Edges](https://cientos.tresjs.org/raw/api/abstractions/edges.md): Render visible edges of objects with enhanced visual quality.
- [Fit](https://cientos.tresjs.org/raw/api/abstractions/fit.md): Uniformly scale and position children to fit into a defined space.
- [Abstractions](https://cientos.tresjs.org/raw/api/abstractions.md): UI components reference
- [Instances](https://cientos.tresjs.org/raw/api/abstractions/instances.md): Draw thousands of copies of one mesh in a single drawcall, declaratively.
- [Levioso (Float)](https://cientos.tresjs.org/raw/api/abstractions/levioso.md): Make content float like magic with smooth animations.
- [Mask](https://cientos.tresjs.org/raw/api/abstractions/mask.md): Cut out areas of the screen using the stencil buffer.
- [Merged](https://cientos.tresjs.org/raw/api/abstractions/merged.md): One instanced batch per mesh, shared across your whole component tree.
- [Outline](https://cientos.tresjs.org/raw/api/abstractions/outline.md): Create inverted-hull outlines using parent geometry.
- [Sampler](https://cientos.tresjs.org/raw/api/abstractions/sampler.md): Distribute instances on mesh surfaces using MeshSurfaceSampler.
- [ScreenSizer](https://cientos.tresjs.org/raw/api/abstractions/screen-sizer.md): Scale objects to screen space where 1 unit equals 1 pixel.
- [ScreenSpace](https://cientos.tresjs.org/raw/api/abstractions/screen-space.md): Position objects in front of the camera with CSS-like positioning.
- [Camera Controls](https://cientos.tresjs.org/raw/api/controls/camera-controls.md): Is similar to OrbitControls yet supports smooth transitions and more features.
- [Controls](https://cientos.tresjs.org/raw/api/controls.md): All currently supported controls
- [Keyboard Controls](https://cientos.tresjs.org/raw/api/controls/keyboard-controls.md): WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards
- [Map Controls](https://cientos.tresjs.org/raw/api/controls/map-controls.md): similar to OrbitControls but for map views
- [Orbit Controls](https://cientos.tresjs.org/raw/api/controls/orbit-controls.md): Allows you to orbit around the scene
- [PointerLock Controls](https://cientos.tresjs.org/raw/api/controls/pointer-lock-controls.md): Allows you to capture the mouse movement and simulate a first person camera
- [Transform Controls](https://cientos.tresjs.org/raw/api/controls/transform-controls.md): Set of three gizmos that can be used to translate, rotate and scale objects
- [useGLTF](https://cientos.tresjs.org/raw/api/loaders/use-gltf.md): A composable to load GLTF models in TresJS scenes.
- [GLTFModel](https://cientos.tresjs.org/raw/api/loaders/gltf-model.md): A component based on useGLTF to load models in TresJS scenes.
- [useFBX](https://cientos.tresjs.org/raw/api/loaders/use-fbx.md): A composable to load FBX models in TresJS scenes.
- [FBXModel](https://cientos.tresjs.org/raw/api/loaders/fbx-model.md): A component based on useFBX to load models in TresJS scenes.
- [useTexture](https://cientos.tresjs.org/raw/api/loaders/use-texture.md): A composable to load textures in TresJS scenes.
- [useTextures](https://cientos.tresjs.org/raw/api/loaders/use-textures.md): A composable to load multiple textures efficiently in TresJS scenes.
- [useSVG](https://cientos.tresjs.org/raw/api/loaders/use-svg.md): A composable to load and render SVG files as 3D geometry in TresJS scenes.
- [Loaders](https://cientos.tresjs.org/raw/api/loaders.md): Asset loading composables for TresJS scenes.
- [useProgress](https://cientos.tresjs.org/raw/api/loaders/use-progress.md): A composable to track loading progress of assets in TresJS scenes.
- [useVideoTexture](https://cientos.tresjs.org/raw/api/loaders/use-video-texture.md): A composable to load video textures in TresJS scenes.
- [Custom Shader Material](https://cientos.tresjs.org/raw/api/materials/custom-shader-material.md): Extends Three.js' material library with your own Vertex and Fragment shaders.
- [Mesh Glass Material](https://cientos.tresjs.org/raw/api/materials/glass-material.md): Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.
- [Holographic Material](https://cientos.tresjs.org/raw/api/materials/holographic-material.md): A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.
- [Materials](https://cientos.tresjs.org/raw/api/materials.md): All materials
- [Mesh Discard Material](https://cientos.tresjs.org/raw/api/materials/mesh-discard-material.md): Hides the object it's attached to while keeping shadows and children visible.
- [Mesh Portal Material](https://cientos.tresjs.org/raw/api/materials/mesh-portal-material.md): Render a separate child scene into a portal surface, perspective-correct and masked by the mesh. Ported from drei.
- [Mesh Reflection Material](https://cientos.tresjs.org/raw/api/materials/mesh-reflection-material.md): Makes floors or walls that reflect the objects in your Scene.
- [Mesh Transmission Material](https://cientos.tresjs.org/raw/api/materials/mesh-transmission-material.md): A glass-like transmission material with chromatic aberration, distortion, and backside support. Ported from drei.
- [Point Material](https://cientos.tresjs.org/raw/api/materials/point-material.md): Extends THREE.PointsMaterial to render points as dots rather than squares.
- [Wobble Material](https://cientos.tresjs.org/raw/api/materials/wobble-material.md): Makes a geometry wobble and wave around with customizable speed and factor.
- [Box](https://cientos.tresjs.org/raw/api/shapes/box.md): Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.
- [CatmullRomCurve3](https://cientos.tresjs.org/raw/api/shapes/catmullromcurve3.md): Allows you to make smooth 3D lines using Catmull-Rom curves.
- [Circle](https://cientos.tresjs.org/raw/api/shapes/circle.md): Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.
- [Cone](https://cientos.tresjs.org/raw/api/shapes/cone.md): Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.
- [Cubic Bezier Line](https://cientos.tresjs.org/raw/api/shapes/cubic-bezier-line.md): Renders a Line2 between start and end points with two control points.
- [Cylinder](https://cientos.tresjs.org/raw/api/shapes/cylinder.md): Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.
- [Dodecahedron](https://cientos.tresjs.org/raw/api/shapes/dodecahedron.md): Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.
- [Grid](https://cientos.tresjs.org/raw/api/shapes/grid.md): Shader-based grid plane with customizable cell and section lines.
- [Icosahedron](https://cientos.tresjs.org/raw/api/shapes/icosahedron.md): Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.
- [Shapes](https://cientos.tresjs.org/raw/api/shapes.md): All shapes
- [Line2](https://cientos.tresjs.org/raw/api/shapes/line2.md): Component for creating 3D lines using Three.js's Line2.
- [Octahedron](https://cientos.tresjs.org/raw/api/shapes/octahedron.md): Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.
- [Plane](https://cientos.tresjs.org/raw/api/shapes/plane.md): Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.
- [Quadratic Bezier Line](https://cientos.tresjs.org/raw/api/shapes/quadratic-bezier-line.md): Renders a Line2 between start and end points with an optional control point.
- [Ring](https://cientos.tresjs.org/raw/api/shapes/ring.md): Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.
- [Rounded Box](https://cientos.tresjs.org/raw/api/shapes/rounded-box.md): Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.
- [Rounded Plane](https://cientos.tresjs.org/raw/api/shapes/rounded-plane.md): Short-cut for a RoundedPlaneGeometry and a MeshBasicMaterial with a Mesh object.
- [Screen Quad](https://cientos.tresjs.org/raw/api/shapes/screen-quad.md): A triangle that fills the screen for full-screen fragment shader work.
- [Sphere](https://cientos.tresjs.org/raw/api/shapes/sphere.md): Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.
- [Superformula](https://cientos.tresjs.org/raw/api/shapes/superformula.md): Produces a configurable 3D plot of the superformula.
- [Tetrahedron](https://cientos.tresjs.org/raw/api/shapes/tetrahedron.md): Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.
- [Torus](https://cientos.tresjs.org/raw/api/shapes/torus.md): Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.
- [Torus Knot](https://cientos.tresjs.org/raw/api/shapes/torus-knot.md): Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.
- [Tube](https://cientos.tresjs.org/raw/api/shapes/tube.md): Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.
- [Helper](https://cientos.tresjs.org/raw/api/debug-performance/helper.md): Handles instantiation, updates, and removal/disposal of THREE Helpers.
- [Debug/Performance](https://cientos.tresjs.org/raw/api/debug-performance.md): All debug and performance tools
- [LOD](https://cientos.tresjs.org/raw/api/debug-performance/lod.md): Level of Detail - show meshes with more or less geometry based on distance from camera.
- [Stats](https://cientos.tresjs.org/raw/api/debug-performance/stats.md): JavaScript performance monitor to track FPS, MS, and memory usage.
- [StatsGl](https://cientos.tresjs.org/raw/api/debug-performance/stats-gl.md): WebGL performance monitoring tool displaying CPU and GPU metrics.
- [useBVH](https://cientos.tresjs.org/raw/api/debug-performance/use-bvh.md): Speed up raycasting with Bounding Volume Hierarchy (BVH) optimization.
- [Accumulative Shadows](https://cientos.tresjs.org/raw/api/light-shadow/accumulative-shadows.md): DirectionalLight-based shadow component with progressive accumulation.
- [Bake Shadows](https://cientos.tresjs.org/raw/api/light-shadow/bake-shadows.md): Bakes shadows in the first frame for performance optimization.
- [Circle Shadow](https://cientos.tresjs.org/raw/api/light-shadow/circle-shadow.md): Cheap, texture-based radial gradient shadow on a plane geometry.
- [Contact Shadows](https://cientos.tresjs.org/raw/api/light-shadow/contact-shadows.md): Fake, non-lighting-based shadow component for single plane shadows.
- [Light/Shadow](https://cientos.tresjs.org/raw/api/light-shadow.md): All light and shadow components
- [Lensflare](https://cientos.tresjs.org/raw/api/light-shadow/lensflare.md): Wraps the Three.js Lensflare with seeded random element generation.
- [Randomized Lights](https://cientos.tresjs.org/raw/api/light-shadow/randomized-lights.md): Creates multiple lights and jiggles them for softer shadows.
- [Soft Shadows](https://cientos.tresjs.org/raw/api/light-shadow/soft-shadows.md): Injects percent closer soft shadows (PCSS) into THREE's shader chunk.
- [Environment](https://cientos.tresjs.org/raw/api/staging/environment.md): Automatically sets up a global cubemap for scene environment and background.
- [useEnvironment](https://cientos.tresjs.org/raw/api/staging/use-environment.md): Composable that sets up a global cubemap for scene environment and background.
- [Lightformer](https://cientos.tresjs.org/raw/api/staging/lightformer.md): Addon for environment component that provided you custom lights.
- [Backdrop](https://cientos.tresjs.org/raw/api/staging/backdrop.md): A curved plane studio backdrop for presentational purposes.
- [Staging](https://cientos.tresjs.org/raw/api/staging.md): All staging components
- [Ocean](https://cientos.tresjs.org/raw/api/staging/ocean.md): Wrapper for the Three.js Water add-on with sky reflection support.
- [Precipitation](https://cientos.tresjs.org/raw/api/staging/precipitation.md): Flexible infinite particle flow for rain, snow, waterfall, and beam effects.
- [Sky](https://cientos.tresjs.org/raw/api/staging/sky.md): Wrapper for the Three.js Sky add-on with sun position controls.
- [Smoke](https://cientos.tresjs.org/raw/api/staging/smoke.md): Beautiful smoke, cloud, and fog effect using textures and transparency.
- [Sparkles](https://cientos.tresjs.org/raw/api/staging/sparkles.md): Makes sparkles on geometry vertices, optionally guided by directional light.
- [Stage](https://cientos.tresjs.org/raw/api/staging/stage.md): Creates a complete stage setup with lighting, shadows, and environment.
- [Stars](https://cientos.tresjs.org/raw/api/staging/stars.md): Renders beautiful stars in the sky using Points and BufferGeometry.
- [AnimatedSprite](https://cientos.tresjs.org/raw/api/objects/animated-sprite.md): Display 2D animations defined in a texture atlas.
- [CubeCamera](https://cientos.tresjs.org/raw/api/objects/cube-camera.md): Render environment maps for reflective objects.
- [Fbo](https://cientos.tresjs.org/raw/api/objects/fbo.md): Render to texture using Frame Buffer Objects.
- [GradientTexture](https://cientos.tresjs.org/raw/api/objects/gradient-texture.md): Create gradient textures for materials.
- [HTML](https://cientos.tresjs.org/raw/api/objects/html.md): Allows you put DOM elements in your Tres.js scene.
- [Image](https://cientos.tresjs.org/raw/api/objects/image.md): Display image textures with shader-based effects.
- [Objects](https://cientos.tresjs.org/raw/api/objects.md): 3D objects and texture components
- [MarchingCubes](https://cientos.tresjs.org/raw/api/objects/marching-cubes.md): Create organic blob-like shapes using metaballs.
- [Reflector](https://cientos.tresjs.org/raw/api/objects/reflector.md): Create real-time reflections of your scene.
- [Refractor](https://cientos.tresjs.org/raw/api/objects/refractor.md): Create real-time refractive (glass-like) surfaces in your scene.
- [Text3D](https://cientos.tresjs.org/raw/api/objects/text-3d.md): Render text in 3D using TextGeometry.
- [All](https://cientos.tresjs.org/raw/api.md): Explore the complete API reference
- [Bounds](https://cientos.tresjs.org/raw/api/miscellaneous/bounds.md): Calculate boundary box and center camera accordingly.
- [GlobalAudio](https://cientos.tresjs.org/raw/api/miscellaneous/global-audio.md): Add global sound to your scene.
- [Miscellaneous](https://cientos.tresjs.org/raw/api/miscellaneous.md): Various utility components and composables
- [MouseParallax](https://cientos.tresjs.org/raw/api/miscellaneous/mouse-parallax.md): Create parallax effects based on mouse movement.
- [PositionalAudio](https://cientos.tresjs.org/raw/api/miscellaneous/positional-audio.md): Spatially positioned audio in 3D space.
- [useAnimations](https://cientos.tresjs.org/raw/api/miscellaneous/use-animations.md): Composable for managing model animations with AnimationMixer.
- [useGLTFExporter](https://cientos.tresjs.org/raw/api/miscellaneous/use-gltf-exporter.md): Export 3D objects to GLTF format.
- [useIntersect](https://cientos.tresjs.org/raw/api/miscellaneous/use-intersect.md): Detect when objects enter or leave the screen.