5.4.0

All

Explore the complete API reference

📦 Abstraction

Align
Calculate and align children within their parent using bounding boxes.
Billboard
Make objects always face the camera automatically.
Camera Shake
Apply smooth camera shake to the active camera.
Edges
Render visible edges of objects with enhanced visual quality.
Fit
Uniformly scale and position children to fit into a defined space.
Levioso (Float)
Make content float like magic with smooth animations.
Mask
Cut out areas of the screen using the stencil buffer.
Outline
Create inverted-hull outlines using parent geometry.
Sampler
Distribute instances on mesh surfaces using MeshSurfaceSampler.
ScreenSizer
Scale objects to screen space where 1 unit equals 1 pixel.
ScreenSpace
Position objects in front of the camera with CSS-like positioning.

🎮 Controls

Camera Controls
Is similar to OrbitControls yet supports smooth transitions and more features.
Keyboard Controls
WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards
Map Controls
similar to OrbitControls but for map views
Orbit Controls
Allows you to orbit around the scene
PointerLock Controls
Allows you to capture the mouse movement and simulate a first person camera
Transform Controls
Set of three gizmos that can be used to translate, rotate and scale objects

📂 Loaders

useGLTF
A composable to load GLTF models in TresJS scenes.
GLTFModel
A component based on useGLTF to load models in TresJS scenes.
useFBX
A composable to load FBX models in TresJS scenes.
FBXModel
A component based on useFBX to load models in TresJS scenes.
useTexture
A composable to load textures in TresJS scenes.
useTextures
A composable to load multiple textures efficiently in TresJS scenes.
useSVG
A composable to load and render SVG files as 3D geometry in TresJS scenes.
useProgress
A composable to track loading progress of assets in TresJS scenes.
useVideoTexture
A composable to load video textures in TresJS scenes.

🎨 Materials

Custom Shader Material
Extends Three.js' material library with your own Vertex and Fragment shaders.
Mesh Glass Material
Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.
Holographic Material
A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.
Mesh Discard Material
Hides the object it's attached to while keeping shadows and children visible.
Mesh Reflection Material
Makes floors or walls that reflect the objects in your Scene.
Point Material
Extends THREE.PointsMaterial to render points as dots rather than squares.
Wobble Material
Makes a geometry wobble and wave around with customizable speed and factor.

🔷 Shapes

Box
Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.
CatmullRomCurve3
Allows you to make smooth 3D lines using Catmull-Rom curves.
Circle
Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.
Cone
Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.
Cubic Bezier Line
Renders a Line2 between start and end points with two control points.
Cylinder
Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.
Dodecahedron
Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.
Grid
Shader-based grid plane with customizable cell and section lines.
Icosahedron
Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.
Line2
Component for creating 3D lines using Three.js's Line2.
Octahedron
Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.
Plane
Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.
Quadratic Bezier Line
Renders a Line2 between start and end points with an optional control point.
Ring
Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.
Rounded Box
Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.
Screen Quad
A triangle that fills the screen for full-screen fragment shader work.
Sphere
Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.
Superformula
Produces a configurable 3D plot of the superformula.
Tetrahedron
Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.
Torus
Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.
Torus Knot
Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.
Tube
Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.

📊 Debug & Performance

Helper
Handles instantiation, updates, and removal/disposal of THREE Helpers.
LOD
Level of Detail - show meshes with more or less geometry based on distance from camera.
Stats
JavaScript performance monitor to track FPS, MS, and memory usage.
StatsGl
WebGL performance monitoring tool displaying CPU and GPU metrics.

💡 Light & Shadow

Accumulative Shadows
DirectionalLight-based shadow component with progressive accumulation.
Bake Shadows
Bakes shadows in the first frame for performance optimization.
Circle Shadow
Cheap, texture-based radial gradient shadow on a plane geometry.
Contact Shadows
Fake, non-lighting-based shadow component for single plane shadows.
Lensflare
Wraps the three.js Lensflare with seeded random element generation.
Randomized Lights
Creates multiple lights and jiggles them for softer shadows.
Soft Shadows
Injects percent closer soft shadows (PCSS) into THREE's shader chunk.

🎭 Staging

Environment
Automatically sets up a global cubemap for scene environment and background.
useEnvironment
Composable that sets up a global cubemap for scene environment and background.
Lightformer
Addon for environment component that provided you custom lights.
Backdrop
A curved plane studio backdrop for presentational purposes.
Ocean
Wrapper for the Three.js Water add-on with sky reflection support.
Precipitation
Flexible infinite particle flow for rain, snow, waterfall, and beam effects.
Sky
Wrapper for the Three.js Sky add-on with sun position controls.
Smoke
Beautiful smoke, cloud, and fog effect using textures and transparency.
Sparkles
Makes sparkles on geometry vertices, optionally guided by directional light.
Stage
Creates a complete stage setup with lighting, shadows, and environment.
Stars
Renders beautiful stars in the sky using Points and BufferGeometry.

🎬 Objects

AnimatedSprite
Display 2D animations defined in a texture atlas.
CubeCamera
Render environment maps for reflective objects.
Fbo
Render to texture using Frame Buffer Objects.
GradientTexture
Create gradient textures for materials.
HTML
Allows you put DOM elements in your Tres.js scene.
Image
Display image textures with shader-based effects.
MarchingCubes
Create organic blob-like shapes using metaballs.
Reflector
Create real-time reflections of your scene.
Text3D
Render text in 3D using TextGeometry.

🛠️ Miscellaneous

Bounds
Calculate boundary box and center camera accordingly.
GlobalAudio
Add global sound to your scene.
MouseParallax
Create parallax effects based on mouse movement.
PositionalAudio
Spatially positioned audio in 3D space.
useAnimations
Composable for managing model animations with AnimationMixer.
useGLTFExporter
Export 3D objects to GLTF format.
useIntersect
Detect when objects enter or leave the screen.